JavaScript的DOM進階

時間  2021-01-02
標籤 html node 瀏覽器 服務器 app dom ide 函數 性能 學習 欄目 JavaScript 简体版
原文   原文鏈接

DOM 自身存在不少類型，在DOM 基礎課程中大部分都有所接觸，好比Element 類型：
表示的是元素節點，再好比Text 類型：表示的是文本節點。DOM 也提供了一些擴展功能。html


一．DOM類型
DOM 基礎課程中，咱們瞭解了DOM 的節點而且瞭解怎樣查詢和操做節點，而自己這
些不一樣的節點，又有着不一樣的類型。node

1.Node 類型
Node 接口是DOM1 級就定義了，Node 接口定義了12 個數值常量以表示每一個節點的類
型值。除了IE 以外，全部瀏覽器均可以訪問這個類型。瀏覽器

雖然這裏介紹了12 種節點對象的屬性，用的多的其實也就幾個而已。服務器

  
  
           
  
  
    
   
   
            
   
   
  1. alert(Node.ELEMENT_NODE); //1，元素節點類型值 
    2. 
   
   
            
   
   
  2. alert(Node.TEXT_NODE); //2，文本節點類型值 
    3.

咱們建議使用Node 類型的屬性來代替1,2 這些阿拉伯數字，有可能你們會以爲這樣豈
不是很繁瑣嗎？而且還有一個問題就是IE 不支持Node 類型。
若是隻有兩個屬性的話，用1，2 來代替會特別方便，但若是屬性特別多的狀況下，一、
二、三、四、五、六、七、八、九、十、十一、12，你根本就分不清哪一個數字表明的是哪一個節點。固然，
若是你只用1，2 兩個節點，那就另當別論了。
IE 不支持，咱們能夠模擬一個類，讓IE 也支持。app

  
  
           
  
  
    
   
   
            
   
   
  1. if (typeof Node == 'undefined') { //IE 返回 
    2. 
   
   
            
   
   
  2. window.Node = { 
    3. 
   
   
            
   
   
  3. ELEMENT_NODE : 1, 
    4. 
   
   
            
   
   
  4. TEXT_NODE : 3 
    5. 
   
   
            
   
   
  5. }; 
    6. 
   
   
            
   
   
  6. } 
    7.

2.Document 類型
Document 類型表示文檔，或文檔的根節點，而這個節點是隱藏的，沒有具體的元素標
籤。dom

  
  
           
  
  
    
   
   
            
   
   
  1. document; //document 
    2. 
   
   
            
   
   
  2. document.nodeType; //9，類型值 
    3. 
   
   
            
   
   
  3. document.childNodes[0]; //DocumentType，第一個子節點對象 
    4. 
   
   
            
   
   
  4. document.childNodes[0].nodeType; //非IE 爲10，IE 爲8 
    5. 
   
   
            
   
   
  5. document.childNodes[1]; //HTMLHtmlElement 
    6. 
   
   
            
   
   
  6. document.childNodes[1].nodeName; //HTML 
    7.

若是想直接獲得<html>標籤的元素節點對象HTMLHtmlElement，沒必要使用childNodes
屬性這麼麻煩，可使用documentElement 便可。ide

  
  
           
  
  
    
   
   
            
   
   
  1. document.documentElement; //HTMLHtmlElement 
    2.

在不少狀況下，咱們並不須要獲得<html>標籤的元素節點，而須要獲得更經常使用的<body>
標籤，以前咱們採用的是：document.getElementsByTagName('body')[0]，那麼這裏提供一個
更加簡便的方法：document.body。函數

  
  
           
  
  
    
   
   
            
   
   
  1. document.body; //HTMLBodyElement 
    2.

在<html>以前還有一個文檔聲明：<!DOCTYPE>會做爲某些瀏覽器的第一個節點來處
理，這裏提供了一個簡便方法來處理：document.doctype。性能

  
  
           
  
  
    
   
   
            
   
   
  1. document.doctype; //DocumentType 
    2.

PS：IE8 中，若是使用子節點訪問，IE8 以前會解釋爲註釋類型Comment 節點，而
document.doctype 則會返回null。學習

  
  
           
  
  
    
   
   
            
   
   
  1. document.childNodes[0].nodeName //IE 會是#Comment 
    2.

在Document 中有一些遺留的屬性和對象合集，能夠快速的幫助咱們精確的處理一些任
務。

  
  
           
  
  
    
   
   
            
   
   
  1. //屬性 
    2. 
   
   
            
   
   
  2. document.title; //獲取和設置<title>標籤的值 
    3. 
   
   
            
   
   
  3. document.URL; //獲取URL 路徑 
    4. 
   
   
            
   
   
  4. document.domain; //獲取域名，服務器端 
    5. 
   
   
            
   
   
  5. document.referrer; //獲取上一個URL，服務器端 
    6. 
   
   
            
   
   
  6. //對象集合 
    7. 
   
   
            
   
   
  7. document.anchors; //獲取文檔中帶name 屬性的<a>元素集合 
    8. 
   
   
            
   
   
  8. document.links; //獲取文檔中帶href 屬性的<a>元素集合 
    9. 
   
   
            
   
   
  9. document.applets; //獲取文檔中<applet>元素集合，已不用 
    10. 
   
   
            
   
   
  10. document.forms; //獲取文檔中<form>元素集合 
    11. 
   
   
            
   
   
  11. document.p_w_picpaths; //獲取文檔中<img>元素集合 
    12.

3.Element 類型
Element 類型用於表現HTML 中的元素節點。在DOM 基礎那章，咱們已經能夠對元素
節點進行查找、建立等操做，元素節點的nodeType 爲1，nodeName 爲元素的標籤名。
元素節點對象在非IE 瀏覽器能夠返回它具體元素節點的對象類型。

PS：以上給出了部分對應，更多的元素對應類型，直接訪問調用便可。

4.Text 類型
Text 類型用於表現文本節點類型，文本不包含HTML，或包含轉義後的HTML。文本
節點的nodeType 爲3。
在同時建立兩個同一級別的文本節點的時候，會產生分離的兩個節點。

  
  
           
  
  
    
   
   
            
   
   
  1. var box = document.createElement('div'); 
    2. 
   
   
            
   
   
  2. var text = document.createTextNode('Mr.'); 
    3. 
   
   
            
   
   
  3. var text2 = document.createTextNode(Lee!); 
    4. 
   
   
            
   
   
  4. box.appendChild(text); 
    5. 
   
   
            
   
   
  5. box.appendChild(text2); 
    6. 
   
   
            
   
   
  6. document.body.appendChild(box); 
    7. 
   
   
            
   
   
  7. alert(box.childNodes.length); //2，兩個文本節點 
    8.

PS：把兩個同鄰的文本節點合併在一塊兒使用normalize()便可。

  
  
           
  
  
    
   
   
            
   
   
  1. box.normalize(); //合併成一個節點 
    2.

PS：有合併就有分離，經過splitText(num)便可實現節點分離。

  
  
           
  
  
    
   
   
            
   
   
  1. box.firstChild.splitText(3); //分離一個節點 
    2.

除了上面的兩種方法外，Text 還提供了一些別的DOM 操做的方法以下：

  
  
           
  
  
    
   
   
            
   
   
  1. var box = document.getElementById('box'); 
    2. 
   
   
            
   
   
  2. box.firstChild.deleteData(0,2); //刪除從0 位置的2 個字符 
    3. 
   
   
            
   
   
  3. box.firstChild.insertData(0,'Hello.'); //從0 位置添加指定字符 
    4. 
   
   
            
   
   
  4. box.firstChild.replaceData(0,2,'Miss'); //從0 位置替換掉2 個指定字符 
    5. 
   
   
            
   
   
  5. box.firstChild.substringData(0,2); //從0 位置獲取2 個字符，直接輸出 
    6. 
   
   
            
   
   
  6. alert(box.firstChild.nodeValue); //輸出結果 
    7.

5.Comment 類型
Comment 類型表示文檔中的註釋。nodeType 是8，nodeName 是#comment，nodeValue
是註釋的內容。

  
  
           
  
  
    
   
   
            
   
   
  1. var box = document.getElementById('box'); 
    2. 
   
   
            
   
   
  2. alert(box.firstChild); //Comment 
    3.

PS：在IE 中，註釋節點可使用！看成元素來訪問。

  
  
           
  
  
    
   
   
            
   
   
  1. var comment = document.getElementsByTagName('!'); 
    2. 
   
   
            
   
   
  2. alert(comment.length); 
    3.

6.Attr 類型
Attr 類型表示文檔元素中的屬性。nodeType 爲11，nodeName 爲屬性名，nodeValue 爲
屬性值。DOM 基礎篇已經詳細介紹過，略。


二．DOM擴展
1.呈現模式
從IE6 開始開始區分標準模式和混雜模式(怪異模式)，主要是看文檔的聲明。IE 爲
document 對象添加了一個名爲compatMode 屬性，這個屬性能夠識別IE 瀏覽器的文檔處於
什麼模式若是是標準模式，則返回CSS1Compat，若是是混雜模式則返回BackCompat。

  
  
           
  
  
    
   
   
            
   
   
  1. if (document.compatMode == 'CSS1Compat') { 
    2. 
   
   
            
   
   
  2. alert(document.documentElement.clientWidth); 
    3. 
   
   
            
   
   
  3. } else { 
    4. 
   
   
            
   
   
  4. alert(document.body.clientWidth); 
    5. 
   
   
            
   
   
  5. } 
    6.

PS：後來Firefox、Opera 和Chrome 都實現了這個屬性。從IE8 後，又引入documentMode
新屬性，由於IE8 有3 種呈現模式分別爲標準模式8，仿真模式7，混雜模式5。因此若是
想測試IE8 的標準模式，就判斷document.documentMode > 7 便可。


2.滾動
DOM 提供了一些滾動頁面的方法，以下：

  
  
           
  
  
    
   
   
            
   
   
  1. document.getElementById('box').scrollIntoView(); //設置指定可見 
    2.

3.children 屬性
因爲子節點空白問題，IE 和其餘瀏覽器解釋不一致。雖然能夠過濾掉，但若是隻是想
獲得有效子節點，可使用children 屬性，支持的瀏覽器爲：IE5+、Firefox3.5+、Safari2+、
Opera8+和Chrome，這個屬性是非標準的。

  
  
           
  
  
    
   
   
            
   
   
  1. var box = document.getElementById('box'); 
    2. 
   
   
            
   
   
  2. alert(box.children.length); //獲得有效子節點數目 
    3.

4.contains()方法
判斷一個節點是否是另外一個節點的後代，咱們可使用contains()方法。這個方法是IE
率先使用的，開發人員無須遍歷便可獲取此信息。

  
  
           
  
  
    
   
   
            
   
   
  1. var box = document.getElementById('box'); 
    2. 
   
   
            
   
   
  2. alert(box.contains(box.firstChild)); //true 
    3.

PS：早期的Firefox 不支持這個方法，新版的支持了，其餘瀏覽器也都支持，Safari2.x
瀏覽器支持的有問題，沒法使用。因此，必須作兼容。


在Firefox 的DOM3 級實現中提供了一個替代的方法compareDocumentPosition()方法。
這個方法肯定兩個節點之間的關係。

  
  
           
  
  
    
   
   
            
   
   
  1. var box = document.getElementById('box'); 
    2. 
   
   
            
   
   
  2. alert(box.compareDocumentPosition(box.firstChild)); //20 
    3.

PS：爲何會出現20，那是由於知足了4 和16 兩項，最後相加了。爲了能讓全部瀏覽
器均可以兼容，咱們必須寫一個兼容性的函數。

  
  
           
  
  
    
   
   
            
   
   
  1. //傳遞參考節點(父節點)，和其餘節點(子節點) 
    2. 
   
   
            
   
   
  2. function contains(refNode, otherNode) { 
    3. 
   
   
            
   
   
  3. //判斷支持contains，而且非Safari 瀏覽器 
    4. 
   
   
            
   
   
  4. if (typeof refNode.contains != 'undefined' && 
    5. 
   
   
            
   
   
  5. !(BrowserDetect.browser == 'Safari' && BrowserDetect.version < 3)) { 
    6. 
   
   
            
   
   
  6. return refNode.contains(otherNode); 
    7. 
   
   
            
   
   
  7. //判斷支持compareDocumentPosition 的瀏覽器，大於16 就是包含 
    8. 
   
   
            
   
   
  8. } else if (typeof refNode.compareDocumentPosition == 'function') { 
    9. 
   
   
            
   
   
  9. return !!(refNode.compareDocumentPosition(otherNode) > 16); 
    10. 
   
   
            
   
   
  10. } else { 
    11. 
   
   
            
   
   
  11. //更低的瀏覽器兼容，經過遞歸一個個獲取他的父節點是否存在 
    12. 
   
   
            
   
   
  12. var node = otherNode.parentNode; 
    13. 
   
   
            
   
   
  13. do { 
    14. 
   
   
            
   
   
  14. if (node === refNode) { 
    15. 
   
   
            
   
   
  15. return true; 
    16. 
   
   
            
   
   
  16. } else { 
    17. 
   
   
            
   
   
  17. node = node.parentNode; 
    18. 
   
   
            
   
   
  18. } 
    19. 
   
   
            
   
   
  19. } while (node != null); 
    20. 
   
   
            
   
   
  20. } 
    21. 
   
   
            
   
   
  21. return false; 
    22. 
   
   
            
   
   
  22. } 
    23.

三．DOM操做內容
雖然在以前咱們已經學習了各類DOM 操做的方法，這裏所介紹是innerText、
innerHTML、outerText 和outerHTML 等屬性。除了以前用過的innerHTML 以外，其餘三個
還麼有涉及到。


1.innerText 屬性

  
  
           
  
  
    
   
   
            
   
   
  1. document.getElementById('box').innerText; //獲取文本內容(若有html 直接過濾掉) 
    2. 
   
   
            
   
   
  2. document.getElementById('box').innerText = 'Mr.Lee'; //設置文本(若有html 轉義) 
    3.

PS：除了Firefox 以外，其餘瀏覽器均支持這個方法。但Firefox 的DOM3 級提供了另
外一個相似的屬性：textContent，作上兼容便可通用。

  
  
           
  
  
    
   
   
            
   
   
  1. document.getElementById('box').textContent; //Firefox 支持 
    2. 
   
   
            
   
   
  2. //兼容方案 
    3. 
   
   
            
   
   
  3. function getInnerText(element) { 
    4. 
   
   
            
   
   
  4. return (typeof element.textContent == 'string') ? 
    5. 
   
   
            
   
   
  5. element.textContent : element.innerText; 
    6. 
   
   
            
   
   
  6. } 
    7. 
   
   
            
   
   
  7. function setInnerText(element, text) { 
    8. 
   
   
            
   
   
  8. if (typeof element.textContent == 'string') { 
    9. 
   
   
            
   
   
  9. element.textContent = text; 
    10. 
   
   
            
   
   
  10. } else { 
    11. 
   
   
            
   
   
  11. element.innerText = text; 
    12. 
   
   
            
   
   
  12. } 
    13. 
   
   
            
   
   
  13. } 
    14.

2.innerHTML 屬性
這個屬性以前就已經研究過，不拒絕HTML。

  
  
           
  
  
    
   
   
            
   
   
  1. document.getElementById('box').innerHTML; //獲取文本(不過濾HTML) 
    2. 
   
   
            
   
   
  2. document.getElementById('box').innerHTML = '<b>123</b>'; //可解析HTML 
    3.

雖然innerHTML 能夠插入HTML，但自己仍是有必定的限制，也就是所謂的做用域元
素，離開這個做用域就無效了。

  
  
           
  
  
    
   
   
            
   
   
  1. box.innerHTML = "<script>alert('Lee');</script>"; //<script>元素不能被執行 
    2. 
   
   
            
   
   
  2. box.innerHTML = "<style>red;< /style>"; //<style>元素不能被執行 
    3.

3.outerText
outerText 在取值的時候和innerText 同樣，同時火狐不支持，而賦值方法至關危險，他
不單替換了文本內容，還將元素直接抹去。

  
  
           
  
  
    
   
   
            
   
   
  1. var box = document.getElementById('box'); 
    2. 
   
   
            
   
   
  2. box.outerText = '<b>123</b>'; 
    3. 
   
   
            
   
   
  3. alert(document.getElementById('box')); //null，建議不去使用 
    4.

4.outerHTML
outerHTML 屬性在取值和innerHTML 一致，但和outerText 也同樣，很危險，賦值的之
後會將元素抹去。

  
  
           
  
  
    
   
   
            
   
   
  1. var box = document.getElementById('box'); 
    2. 
   
   
            
   
   
  2. box.outerHTML = '123'; 
    3. 
   
   
            
   
   
  3. alert(document.getElementById('box')); //null，建議不去使用，火狐舊版未抹去 
    4.

PS：關於最經常使用的innerHTML 屬性和節點操做方法的比較，在插入大量HTML 標記時
使用innerHTML 的效率明顯要高不少。由於在設置innerHTML 時，會建立一個HTML 解
析器。這個解析器是瀏覽器級別的(C++編寫)，所以執行JavaScript 會快的多。但，建立和
銷燬HTML 解析器也會帶來性能損失。最好控制在最合理的範圍內，以下：

  
  
           
  
  
    
   
   
            
   
   
  1. for (var i = 0; i < 10; i ++) { 
    2. 
   
   
            
   
   
  2. ul.innerHTML = '<li>item</li>'; //避免頻繁 
    3. 
   
   
            
   
   
  3. } 
    4. 
   
   
            
   
   
  4. //改 
    5. 
   
   
            
   
   
  5. for (var i = 0; i < 10; i ++) { 
    6. 
   
   
            
   
   
  6. a = '<li>item</li>'; //臨時保存 
    7. 
   
   
            
   
   
  7. } 
    8. 
   
   
            
   
   
  8. ul.innerHTML = a; 
    9.
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程