轉自：http://segmentfault.com/a/1190000000660947
在瀏覽器中，與用戶進行數據交換都是通過客戶端的javascript代碼來實現的，而完成這些交互工作大多數是document對象及其部件進行的，因此document對象是一個比較重要的對象。
document對象概述
document對象是文檔的根節點，window.document屬性就指向這個對象。也就是說，只要瀏覽器開始載入HTML文檔，這個對象就開始存在了，可以直接調用。
document.childNodes屬性返回該對象的所有子節點。對於HTML文檔來說，document對象一般有兩個子節點。
第一個子節點是document.doctype，表示文檔類型節點（DocumentType）。對於HTML5文檔來說，該節點就代表<!DOCTYPE html>。
第二個子節點是document.documentElement，表示元素節點（Element），代表：<html lang="en">。
document 對象的屬性
document對象主要有如下屬性：
| 屬性 | 說明 |
|---|---|
| document.title | 設置文檔標題等價於HTML的<title>標簽 |
| document.bgColor | 設置頁面背景色 |
| document.linkColor | 未點擊過的鏈接顏色 |
| document.alinkColor | 激活鏈接(焦點在此鏈接上)的顏色 |
| document.fgColor | 設置前景色(文本顏色) |
| document.vlinkColor | 已點擊過的鏈接顏色 |
| document.URL | 設置URL屬性從而在同一窗口打開另一網頁 |
| document.fileCreatedDate | 文件建立日期，只讀屬性 |
| document.fileModifiedDate | 文件修改日期，只讀屬性 |
| document.fileSize | 文件大小，只讀屬性 |
| document.cookie | 設置和讀出cookie |
| document.charset | 設置字符集 簡體中文:gb2312 |
指向其他節點或對象的屬性
document.doctype // <!DOCTYPE html> document.documentElement //返回文檔的根節點 <html>...</html> document.head // <head>...</head> document.body // <body>...</body> document.defaultView // window document.querySelector('textarea').focus(); document.activeElement // <textarea> querySelector返回的是一個對象，而querySelectorAll返回的一個集合(NodeList)。IE8以上支持
指向特定元素集合的屬性
document.all ：文檔中所有的元素，Firefox不支持該屬性。 document.forms ：所有的form元素。 document.images：所有的img元素。 document.links：所有的a元素。 document.scripts：所有的script元素。 document.styleSheets：所有的link或者style元素。 對象方法：
| 方法 | 說明 |
|---|---|
| document.write() | 動態向頁面寫入內容 |
| document.createElement(Tag) | 創建一個html標簽對象 |
| document.getElementById(ID) | 獲得指定ID值的對象 |
| document.getElementsByTagName(tagname) | 獲得指定標簽名的對象 |
| document.getElementsByName(Name) | 獲得指定Name值的對象 |
| document.getElementsByClassName(classname) | 獲得指定類名的對象（html5 API） |
getElementById(id)方法返回一個對象，該對象對應着文檔里一個特定的元素節點。getElementsByTagName()方法將返回一個對象數組，他們分別對應着文檔里一個特定的元素節點
write()和writeln()方法：區別在於后者在傳送到文檔中的字符串末時附加一個回車符。
querySelector方法的參數使用CSS選擇器語法，getElementById方法的參數是HTML標簽元素的id屬性。
document.querySelector('li') document.getElementById('last') 如果有多個節點滿足querySelector方法的條件，則返回第一個匹配的節點。
document.createElement()是在對象中創建一個對象，要與appendChild() 或 insertBefore()方法聯合使用。
其中，appendChild() 方法在節點的子節點列表末添加新的子節點。insertBefore() 方法在節點的子節點列表任意位置插入新的節點。
body-主體子對象
document.body //指定文檔主體的開始和結束等價於body>/body> document.body.bgColor //設置或獲取對象后面的背景顏色 document.body.link //未點擊過的鏈接顏色 document.body.alink //激活鏈接(焦點在此鏈接上)的顏色 document.body.vlink //已點擊過的鏈接顏色 document.body.text //文本色 document.body.innerText //設置body>…/body>之間的文本 document.body.innerHTML //設置body>…/body>之間的HTML代碼 document.body.topMargin //頁面上邊距 document.body.leftMargin //頁面左邊距 document.body.rightMargin //頁面右邊距 document.body.bottomMargin //頁面下邊距 document.body.background //背景圖片 document.body.appendChild(oTag) //動態生成一個HTML對象 常用對象事件
document.body.onclick=”func()” //鼠標指針單擊對象是觸發 document.body.onmouseover=”func()” //鼠標指針移到對象時觸發 document.body.onmouseout=”func()” //鼠標指針移出對象時觸發 圖層對象的4個屬性
document.getElementById(”ID”).innerText //動態輸出文本 document.getElementById(”ID”).innerHTML //動態輸出HTML document.getElementById(”ID”).outerText //同innerText document.getElementById(”ID”).outerHTML //同innerHTML 看如下例子：
<p>hello world!<span>你好</span></p> <script> var p = document.getElementsByTagName('p');//集合 // alert(p[0].textContent);//firefox // alert(p[0].innerText);//IE alert(p[0].innerHTML);//hello world!<span>你好</span> alert(p[0].outerHTML);//<p>hello world!<span>你好</span></p> alert(p[0].textContent);//hello world!你好 </script> 思維導圖
