<script type="text/javascript"> //IE不支持，我們可以模擬一個類，讓IE也支持。 if (typeof Node == 'undefined') { window.Node = { ELEMENT_NODE:1, ATTRIBUTE_NODE:2, TEXT_NODE:3, COMMENT_NODE:8, DOCUMENT_NODE:9, DOCUMENT_TYPE_NODE:10 }; } console.log(Node.ELEMENT_NODE);//1 console.log(Node.ATTRIBUTE_NODE);//2 console.log(Node.TEXT_NODE);//3 console.log(Node.COMMENT_NODE);//8 console.log(Node.DOCUMENT_NODE);//9 console.log(Node.DOCUMENT_TYPE_NODE);//10</script>Document類型
Document類型表示文檔，或文檔的根節點，而這個節點是隱藏的，沒有具體的元素標簽//元素document.documentElement;//htmldocument.body;//bodydocument.doctype;//<!DOCTYPE>，ie8之前會返回null//屬性document.title;//獲取和設置<title>標簽的值document.URL;//獲取URL路徑document.domain;//獲取域名，服務器端document.referrer;//獲取上一個URL，服務器端//對象集合document.anchors;//獲取文檔中帶name屬性的<a>元素集合document.links;//獲取文檔中帶href屬性的<a>元素集合document.applets;//獲取文檔中<applet>元素集合，已不用document.forms;//獲取文檔中<form>元素集合document.images;//獲取文檔中<img>元素集合Text類型
Text類型用于表現文本節點類型，文本不包含HTML，或包含轉義后的HTML。文本節點的nodeType為3<script type="text/Javascript"> var box = document.createElement('div'); var text = document.createTextNode('Mr.'); var text2 = document.createTextNode('Lee!'); box.appendChild(text); box.appendChild(text2); document.body.appendChild(box); console.log(box.childNodes.length); //2，在同時創建兩個同一級別的文本節點的時候，會產生分離的兩個節點,其實是換行了 box.normalize();//合并成一個節點，其實是把換行去掉了 box.firstChild.splitText(3);//有合并就有分離，以三個字符為距離進行換行 //除了上面的兩種方法外，Text還提供了一些別的DOM操作的方法如下： box.firstChild.deleteData(0,2); //刪除從0位置的2個字符 box.firstChild.insertData(0,'Hello.');//從0位置添加指定字符 box.firstChild.replaceData(0,2,'Miss');//從0位置用Miss替換掉2個指定字符,如果第二個參數是0，則是添加Miss box.firstChild.substringData(0,2);//從0位置獲取2個字符，直接輸出 console.log(box.firstChild.nodeValue);//Missllo..,輸出結果</script>Comment類型
Comment類型表示文檔中的注釋。nodeType是8，nodeName是#comment，nodeValue是注釋的內容。<script type="text/javascript"> console.log(document.body.firstChild.nodeType);//8 console.log(document.body.firstChild.nodeValue);//this is comment //在IE中，注釋節點可以使用！當作元素來訪問。 //var comment = document.getElementsByTagName('!');</script>DOM擴展
呈現模式
從IE6開始開始區分標準模式和混雜模式(怪異模式)，主要是看文檔的聲明。IE為document對象添加了一個名為compatMode屬性，這個屬性可以識別IE瀏覽器的文檔處于什么模式如果是標準模式，則返回CSS1Compat，如果是混雜模式則返回BackCompat。<script type="text/javascript"> if (document.compatMode == 'CSS1Compat') { console.log(document.documentElement.clientWidth); } else { console.log(document.body.clientWidth); }</script>后來Firefox、Opera和Chrome都實現了這個屬性。從IE8后，又引入documentMode新屬性，因為IE8有3種呈現模式分別為標準模式8，仿真模式7，混雜模式5。所以如果想測試IE8的標準模式，就判斷document.documentMode > 7 即可。滾動
scrollIntoView(alignWithTop) 函數用來滾動瀏覽器窗口或容器元素，以便在當前視窗的可見范圍看見當前元素。如果alignWithTop為true，或者省略它，窗口會盡可能滾動到自身頂部與元素頂部平齊<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <a onClick="onc()" hef="#">click here</a> <div style="height:400px; background-color:blue"></div> <div id="nn" style="background-color: red;height:900px;"></div></body><script type="text/javascript"> //作為一個事件的函數來被調用 function onc () { var dd = document.getElementById("nn").scrollIntoView(true);//這個意思其實就是將這個元素滾動到瀏覽器窗口的頂部來顯示 }</script></html>children屬性
由于子節點空白問題，IE和其他瀏覽器解釋不一致。雖然可以過濾掉，但如果只是想得到有效子節點，可以使用children屬性，幾乎所有瀏覽器都支持。<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="div"> <span>hello1</span> <span>hello2</span> <span>hello3</span> </div></body><script type="text/javascript"> console.log(document.getElementById("div").children.length);//3 console.log(document.getElementById("div").children[0].innerHTML);//hello1</script></html>contains()方法
判斷一個節點是不是另一個節點的后代，我們可以使用contains()方法。這個方法是IE率先使用的，開發人員無須遍歷即可獲取此信息<script type="text/javascript"> var div = document.getElementById("div") console.log(div.contains(div.firstChild));//true</script>早期的Firefox不支持這個方法，新版的支持了，其他瀏覽器也都支持，Safari2.x瀏覽器支持的有問題，無法使用。所以，必須做兼容在Firefox的DOM3級實現中提供了一個替代的方法compareDocumentPosition()方法。這個方法確定兩個節點之間的關系。<script type="text/javascript"> var div = document.getElementById("div") console.log(div.compareDocumentPosition(div.firstChild));//20</script>DOM操作內容
innerText屬性
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="div"> <span>hello1</span> <span>hello2</span> <span>hello3</span> </div></body><script type="text/javascript"> var div = document.getElementById("div") console.log(div.innerText);//獲取文本內容(如有html直接過濾掉) div.innerText = 'Mr.Lee';//設置文本(如有html轉義) //DOM3新屬性 console.log(div.textContent) div.innerText = '<html>';</script></html>innerHTML屬性
<script type="text/javascript"> document.getElementById('div').innerHTML;//獲取文本(不過濾HTML) document.getElementById('div').innerHTML = '<b>123</b>';//可解析HTML</script>雖然innerHTML可以插入HTML，但本身還是有一定的限制，也就是所謂的作用域元素，離開這個作用域就無效了<script type="text/javascript"> document.getElementById("div").innerHTML = "<script>alert('Lee');</script"+">";//<script>元素不能被執行</script>outerText屬性
outerText在取值的時候和innerText一樣，但是賦值方法相當危險，他不單替換了文本內容，還將元素直接抹去。<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="div"> <span>hello1</span> <span>hello2</span> <span>hello3</span> </div></body><script type="text/javascript"> var div = document.getElementById("div") console.log(div.outerText);//獲取文本內容(如有html直接過濾掉) div.outerText = 'Mr.Lee';//設置文本(如有html轉義) console.log(document.getElementById("div"));//null</script></html>outerHTML屬性
outerHTML屬性在取值和innerHTML一致，但和outerText也一樣，很危險，賦值的之后會將元素抹去。<script type="text/javascript"> var div = document.getElementById("div") console.log(div.outerHTML);//獲取文本內容(如有html直接過濾掉) div.outerHTML = '<b>124</b>';//設置文本(如有html轉義) console.log(document.getElementById("div"));//null</script>關于最常用的innerHTML屬性和節點操作方法的比較，在插入大量HTML標記時使用innerHTML的效率明顯要高很多。因為在設置innerHTML時，會創建一個HTML解析器。這個解析器是瀏覽器級別的(C++編寫)，因此執行JavaScript會快的多。但，創建和銷毀HTML解析器也會帶來性能損失。最好控制在最合理的范圍內，如下：for (var i = 0; i < 10; i ++) {ul.innerHTML = '<li>item</li>';//避免頻繁}//改for (var i = 0; i < 10; i ++) {a = '<li>item</li>';//臨時保存}ul.innerHTML = a;
新聞熱點
疑難解答
