一、HTML DOM之Document物件
當瀏覽器載入HTML文件時，它就會成為document物件。1、獲取dom元素的幾種方法
1.1、根據id獲取dom元素
document.getElementById("myDiv");//靜態方法，返回帶有指定id的元素物件,{Object}
1.2、根據標籤名獲取dom元素
document.getElementsByTagName("div");//動態方法，返回指定標籤名的元素集合。
1.3、根據類名獲取dom元素
document.getElementsByClassName("example");//返回文件中所有指定類名的元素集合,作為NodeList物件。多個選擇器之間用空格分割。
document.getElementsByClassName("example color");
1.4、根據CSS選擇器字串獲取dom元素
<div id="myDiv" class="example exp">你好</div>
document.querySelector(".example.exp");//選擇器包含一個或多個要匹配的css選擇器,對於多個選擇器，使用逗號隔開，返回一個匹配的元素。。 返回文件中與指定選擇器或選擇器組匹配的第一個Element。 如果找不到匹配項，則返回null。
//注意:如果要匹配的ID或選擇器不符合 CSS 語法（比如不恰當地使用了冒號或者空格），你必須用反斜槓將這些字元轉義。由於 JavaScript 中，反斜槓是轉義字元，所以當你輸入一個文字串時，你必須將它轉義兩次（一次是為 JavaScript 字串轉義，另一次是為 querySelector 轉義）：
<div id="foo\bar"></div>
<div id="foo:bar"></div>
console.log('#foo\bar') // "#fooar"
document.querySelector('#foo\bar') // 不匹配任何元素
console.log('#foo\\bar') // "#foo\bar"
console.log('#foo\\\\bar') // "#foo\\bar"
document.querySelector('#foo\\\\bar') // 匹配第一個div元素
document.querySelector('#foo:bar') // 不匹配任何元素
document.querySelector('#foo\\:bar') // 匹配第二個div
1.5、根據CSS選擇器字串獲取dom元素集合
document.querySelectorAll(".example,.exp");//選擇器是一個或多個CSS選擇器，這些選擇器由逗號隔開。返回的 NodeList 將包含文件中的所有節點，這些都是由特定選擇器匹配的。如果選擇器字串包含了一個CSS偽元素，將返回空的元素集合。
1.6、根據元素的 name 屬性值獲取dom元素集合
var a = document.getElementsByName("myname");//返回一個實時更新的 NodeList集合。
注意：name屬性只有在(X)HTML文件中可用。該方法返回一個live的 NodeList集合，這個集合包含name屬性為指定值的所有元素，例如<meta> 、<object>，甚至那些不支援name屬性但是新增了name自定義屬性的元素也包含其中。getElementsByName 在不同的瀏覽器其中工作方式不同。在IE和Opera中， getElementsByName() 方法還會返回那些id為指定值的元素。所以你要小心使用該方法，最好不要為元素的name和id賦予相同的值。
style物件下的具體屬性都有哪些?詳情參閱:http://www.runoob.com/jsref/dom-obj-style.html
2、document.activeElement,返回文件中當前獲得焦點的元素。
3、document.addEventListener(),向文件新增事件控制程式碼。用document.removeEventListener() 移除addEventListener()所新增的事件。IE8 及更早IE版本不支援 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支援。但是，對於這類瀏覽器版本可以使用 attachEvent() 方法來新增事件控制程式碼（要注意跨瀏覽器相容問題）。
用法：document.addEventListener(event, function, useCapture);useCapture指定事件是否在捕獲或冒泡階段執行。true - 事件控制程式碼在捕獲階段執行；false- 預設。事件控制程式碼在冒泡階段執行。addEventListener() 方法新增的事件控制程式碼不會覆蓋已存在的事件控制程式碼,可以在文件中新增許多事件，新增的事件不會覆蓋已存在的事件,也可以新增不同型別的事件。例如：
document.addEventListener("click", myFunction);
document.addEventListener("click", someOtherFunction);
當傳遞引數值時，使用"匿名函式"呼叫帶引數的函式：
document.addEventListener("click",function(){
myFunction(p1, p2);
});
如果瀏覽器不支援 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。以下例項演示了跨瀏覽器的解決方法：
if(document.addEventListener){//所有主流瀏覽器，除了 IE 8 及更早 IE版本
document.addEventListener("click", myFunction);
}else if(document.attachEvent){// IE 8 及更早 IE 版本
document.attachEvent("onclick", myFunction);
}
4、document.removeEventListener(event,function,useCapture);用於移除由 document.addEventListener()方法新增的事件控制程式碼。
注意: 如果要移除事件控制程式碼，addEventListener() 的執行函式必須使用外部函式，如上例項所示 (myFunction)。匿名函式，類似 "document.removeEventListener("event", function(){ myScript });"該事件是無法移除的。
提示使用 element.addEventListener()和element.removeEventListener()方法來新增或移除指定元素的事件控制程式碼。
注意：IE8及更早IE版本不支援removeEventListener()方法，Opera7及Opera更早版本也不支援。但是，對於這些不支援該函式的瀏覽器，你可以使用detachEvent()方法來移除由attachEvent()方法新增的事件控制程式碼(檢視"更多例項"瞭解跨瀏覽器的解決方案)。
注意：useCapture引數，如果新增兩次事件控制程式碼，一次在捕獲階段，一次在冒泡階段，你必須單獨移除該事件。
5、document.anchors,返回了當前頁面的所有超級連結陣列。注意：a連結沒有name屬性的不會被計入。
6、document.applets，返回對文件中所有Applet物件的引用(Applet物件是什麼)。
7、document.baseURI,獲取文件的基礎URL。除了IE瀏覽器，其他主流瀏覽器都支援 baseURI 屬性。
8、document.body，返回文件的body元素。
9、document.close()，用於關閉一個由window.open方法開啟的輸出流。
10、document.cookie，設定或返回與當前文件有關的 鍵/值 對的所有 cookies。
11、document.createAttribute(attributename)，建立一個屬性節點，返回一個節點物件,示例：
var attr=document.createAttribute("class");
attr.value="democlass";(或者attr.nodeValue = "democlass";)
document.getElementsByTagName("p")[0].setAttributeNode(attr);
12、document.createComment(),建立註釋節點, 並插入HTML文件。示例：
var cText = document.createComment("My personal comments");
document.body.appendChild(c);
13、document.createDocumentFragment();
建立空的DocumentFragment物件，並返回此物件（文件片段）。該方法建立了一虛擬的節點物件，節點物件包含所有屬性和方法。當你想提取文件的一部分，改變，增加，或刪除某些內容及插入到文件末尾可以使用createDocumentFragment() 方法。你也可以使用文件的文件物件來執行這些變化，但要防止檔案結構被破壞，createDocumentFragment() 方法可以更安全改變文件的結構及節點。文件片段是個輕量級的document物件，它的設計初衷就是為了完成更新和移動節點這類任務。文件片段的一個便利的語法特性是當你附加一個片斷到節點時，實際上被新增的是該片斷的子節點，而不是片斷本身。只觸發了一次重排，而且只訪問了一次實時的DOM。可以提升效能。示例：
var frag=document.createDocumentFragment();
var son = document.createElement('p');
son.innerText = '子標籤';
frag.appendChild(son);
document.getElementsByClassName("empty")[0].appendChild(frag);
14、document.createElement(nodename);建立一個元素節點。元素節點可以自定義，並不一定需要是標準html元素名稱，且建立後的元素需要新增到body或者某個元素下，否則不顯示，示例：
var mydiv = document.createElement("mydiv");
var div = document.createElement("div");
div.innerText = "元素內容";（注意：如果這裡用div.nodeValue = "元素內容";則設定文字節點無效）
document.body.appendChild(mydiv);
document.body.appendChild(div);
15、document.createTextNode(text);建立一個文字節點。HTML元素通常是由元素節點和文字節點組成。示例：
var text = document.createTextNode("Hello World");
document.body.appendChild(text);
擴充：nodeValue、innerText、innerHTML和textContent區別？
(1)、nodeValue：僅僅對CDATA片段，註釋comment，Processing Instruction節點或text節點有效，對document, documentFragment, Element節點，返回值為null,也無法使用其進行內容的設定，如果要改變元素的文字節點，用element.childNodes[0].nodeValue。(注意：element.childNodes[0].nodeValue只可以用來修改元素已存在的文字節點，如果是沒有文字節點的元素需要新新增文字節點，用element.childNodes[0].nodeValue會報錯,這是需要用其他方法替代。)，示例：
<div class="demo1"></div>
document.querySelector(".demo1").childNodes[0].nodeValue = "新增文字節點";//報錯
<div class="demo2"></div>
document.querySelector(".demo2").childNodes[0].nodeValue = "新增文字節點";//正確
(2)、innerHTML：瀏覽器會將內容解析為HTML，因此更慢。
(3)、innerText：與innerHTML類似，但是不會解析其中的html標籤。
(4)、textContent：使用純文字而不是解析為html,更快捷.（比innerHTML安全）,如果在僅僅是要element節點改變文字，使用textContent。
textcContent、nodeValue和innerHMLT在改變元素文字節點的區別：三者都能用，但使用nodeValue容易造成困惑，innerTMLHTML效能差點，使用textContent最佳。
示例：var div = document.createElement("div");
var attr = document.createAttribute("class");
attr.value="new_div";
div.setAttributeNode(attr);
div.innerText = "新建div標籤";
document.body.appendChild(div);
alert(div.nodeValue);//null
alert(div.childNodes[0].nodeValue);//'新建div標籤'
16、document.doctype;返回HTML文件的文件型別物件，IE8及IE更早版本顯示HTML和XHTML文件時該屬性返回null,但是支援XML文件。
17、document.documentElement;返回文件的根節點,HTML文件返回物件為HTML元素。
18、document.documentMode;返回用於通過瀏覽器渲染文件的模式。IE8使用不同方式渲染頁面,基於!DOCTYPE或者某些存在的HTML元素。這些元素返回值如下:
5 - 頁面在 IE5 模式下展示
7 - 頁面在 IE7 模式下展示
8 - 頁面在 IE8 模式下展示
9 - 頁面在 IE9 模式下展示
注意：如果沒有指定!DOCTYPE,IE8以IE5模式渲染頁面。
19、document.documentURI;設定或返回文件的位置。
20、document.domain;返回當前文件的伺服器域名。
21、document.domConfig;返回normalizeDocument()被呼叫時所使用的配置。
22、document.embeds;返回文件中所有嵌入的內容（embed）集合。
23、document.forms;forms集合返回當前頁面所有表單的陣列集合。
24、document.images;返回當前文件中所有圖片的陣列。
25、document.implementation;返回處理該文件的 DOMImplementation 物件。
26、document.importNode(node,true);把一個節點從另一個文件複製到該文件以便應用。如果第二個值設定為true，那麼還要複製該節點的所有子孫節點。例項：
var frame=document.getElementsByTagName("iframe")[0];
var h=frame.contentWindow.document.getElementsByTagName("h1")[0];
var x=document.importNode(h,true);
注意:IE8及IE更早版本不支援該方法。
27、document.inputEncoding;返回當前文件的字元編碼。
注意： 除了Opera瀏覽器、IE8及更早IE版本不支援該屬性。
28、document.lastModified;返回文件最後被修改的日期和時間。
29、document.links;links集合返回當前文件所有連結的陣列。links集合計算<a href="">標籤和<area>標籤。
30、document.normalize();合併相鄰的文字節點並刪除空的文字節點。例項：
<p id="demo">點選一個按鈕來新增文字,點選另一個按鈕規範化文件</p>
<p>上面的段落有 <span id="cc">1</span>個子節點。</p>
<button onclick="addTextNode()">新增一個文字節點</button>
<button onclick="normPara()">規範文字</button>
function addTextNode(){
var y=document.createTextNode("Click again");
var x=document.getElementById("demo");
x.appendChild(y);
var z=document.getElementById("cc");
z.innerHTML=x.childNodes.length;
}
function normPara(){
document.normalize();
var x=document.getElementById("demo");
var z=document.getElementById("cc");
z.innerHTML=x.childNodes.length;
}
執行addTextNode方法後，p標籤文字內容增加了“Click again”，但是審查元素可以看出p標籤的佈局如下：
<p id="demo">
"點選一個按鈕來新增文字,點選另一個按鈕規範化文件"
"Click again"
</p>
執行normPara方法後，審查元素可以看出p標籤的佈局如下：
<p id="demo">點選一個按鈕來新增文字,點選另一個按鈕規範化文件Click again</p>
31、document.open(MIMEtype,replace);開啟一個輸出流來收集 document.write() 或 document.writeln() 方法輸出的內容。呼叫 open() 方法開啟一個新文件並且用 write() 方法設定文件內容後，必須記住用 document.close()方法關閉文件，並迫使其內容顯示出來。
注意：如果目標檔案已經存在，它將被清除。如果這個方法沒有引數，會顯示一個新視窗(about:blank)。
引數MIMEtype可選，規定正在寫的文件的型別，預設值是 "text/html"。
引數replace可選，當此引數設定後，可引起新文件從父文件繼承歷史條目。
32、document.readyState，返回當前文件的狀態，該屬性返回以下值:
uninitialized - 還未開始載入
loading - 載入中
interactive - 已載入，文件與使用者可以開始互動
complete - 載入完成
33、document.referrer;返回載入當前文件的來源文件的URL。如果當前文件不是通過超級連結訪問的，則為 null。這個屬性允許客戶端 JavaScript 訪問 HTTP 引用頭部。
34、document.adoptNode(node)，從另外一個文件返回adapded節點到當前文件。
35、document.scripts;返回頁面中所有指令碼的集合。
36、document.title;設定或獲取當前文件的標題（ HTML title 元素中的文字）。
37、document.URL;返回當前文件的URL。
38、document.write(exp1,exp2,exp3,...);向文件寫入HTML表示式或JavaScript程式碼。
39、document.writeln(exp1,exp2,exp3,...);與write()方法作用相同，外加可在每個表示式後寫一個換行符。writeln方法和write方法的區別例項：
document.write("Hello World!");
document.write("Have a nice day!");
文件展示：Hello World!Have a nice day!
document.writeln("Hello World!");
document.writeln("Have a nice day!");
文件展示：Hello World!
Have a nice day! 複製程式碼