JavaScript DOM 基礎

DOM 即檔案物件模型，是操作 HTML/XML 檔案的一套方法，通過 DOM 操作節點，使頁面發生改變，是動態檔案技術的核心內容

DOM 的含義

1. DOM 即 document object model，檔案物件模型

2. JavaScript 中有三類物件

   本地物件 Native Object

   Object Function String Number Boolean
   Error EvalError SyntaxError TypeError RageError ReferenceError URIError
   Date RegExp
   

   內置物件 Built-in Object

   Global: 一類物件的統稱，是虛擬的，代表全域
   任何方法和屬性都在物件之下
   如 isNaN()、parseInt、Number()、decodeURL() 等都是 Global 下的方法
   如 Math、Infinity、NaN、undefined 等都是 Global 下的屬性
   本地物件、內置物件是 ECMAScript 的內部物件
   

   宿主物件 Host Object

   執行 JS 的環境提供的物件，即瀏覽器物件
   window 物件 -> BOM，不同瀏覽器間沒有固定規范
   document 物件 -> DOM，遵從 w3c 規范
   document 是 window 下的物件，即 BOM 包含 DOM
   

3. DOM 是通過瀏覽器提供的一套方法來操作 HTML 和 XML 檔案

元素和節點

1. 節點包含元素，元素是節點的一部分，即元素節點

2. 節點分類

   元素節點、屬性節點、文本節點、注釋節點、檔案節點等

3. 元素即元素物件，有 HTMLDivElement、HTMLInputElement、HTMLHtmlElement，繼承自構造方法 HTMLElement，HTMLElement 繼承自 Node，Node 即節點物件

4. document 繼承自構造方法 HTMLDocument 的原型，HTMLDocument 繼承自 Document 的原型

   document.__proto__ -> HTMLDocument.prototype 
   HTMLDocument.prototype.__proto__ -> Document.prototype
   

獲取元素

1. 通過 id 獲取元素

   document.getElementById(); // 回傳對應的 HTMLElement 
   // 對于 getElementById()，IE8 及以下不區分大小寫并且可以匹配 name
   

2. 通過類名獲取元素集合

   兼容 IE9 及以上

   document.getElementsByClassName(); // 回傳元素集合 HTMLCollection
   

3. 通過標簽名獲取元素集合

   document.getElementsByTagName(); // 回傳元素集合 HTMLCollection
   

4. 通過 name 獲取元素

   document.getElementsByName(); // 回傳元素集合 HTMLCollection
   // 常用于表單元素
   

5. 通過選擇器獲取物件

   兼容 IE8 及以上，是 HTML5 新加入的 web api

   document.querySelector(); // 回傳選擇器選中的第一個節點物件 Node
   document.querySelectorAll(); // 回傳選擇器選中的節點串列 NodeList
   // querySelector、querySelectorAll 比 getElementById 等系列方法性能低
   

   querySelectorAll 方法回傳 NodeList，getElements 系列方法回傳 HTMLCollection

   前者是靜態的，獲取集合后，增加或洗掉內容，集合不改變，不具有實時性

   而 HTMLCollection 是動態的，隨檔案操作而改變

遍歷節點樹

1. parentNode

   獲取父節點

   document.getElementsByTagName("html")[0].parentNode -> document
   // html 標簽元素的 parentNode 是 document
   // 最高級節點是 document，document 的父節點是 null
   

2. childNodes

   獲取子節點集合

   document.getElementById("box").childNodes 
   // 包括元素節點、文本節點、注釋節點在內
   

3. firstChild、lastChild

   獲取第一個或最后一個子節點

   document.getElementById("box").firstChild // 第一個子節點
   document.getElementById("box").lastChild // 第二個子節點
   

4. nextSibling、previousSibling

   獲取上一個或下一個兄弟節點

   document.getElementById("box").nextSibling // 上一個兄弟節點
   document.getElementById("box").previousSibling // 下一個兄弟節點
   

5. getAttributeNode()

   獲取屬性節點

   document.getElementById("box").getAttributeNode("id") // 獲取屬性節點 id
   

遍歷元素節點

1. parentElement

   獲取父元素節點，兼容 IE9 及以上

   document.getElementsByTagName("html")[0].parentElement -> null
   // html 標簽元素的 parentElement 是 null
   

2. children

   獲取子元素集合，IE6-8 還包含注釋節點，IE9 及以上只包含元素節點

   document.getElementById("box").children // 只包含元素節點
   document.getElementById("box").chilElementCount // children.length
   

3. firstElementChild、lastElementChild

   獲取第或最后一個子元素節點，兼容 IE9 及以上

   document.getElementById("box").firstElementChild // 第一個子元素節點
   document.getElementById("box").lastElementChild // 第二個子元素節點
   

4. nextElementSibling、previousElementSibling

   獲取下一個或上一個兄弟元素節點，兼容 IE9 及以上

   document.getElementById("box").nextElementSibling // 上一個兄弟元素節點
   document.getElementById("box").previousElementSibling // 下一個兄弟元素節點
   

節點的屬性

1. nodeName

   回傳節點名稱、只讀
   元素節點，元素名稱大寫

   document.getElementById("box").nodeName // DIV
   // 文本節點 -> #text
   // 注釋節點 -> #comment
   document.nodeName // #document
   // 檔案節點 -> #document
   

2. nodeValue

   回傳節點內容，可讀寫
   屬性節點、文本節點、注釋節點可用

   document.getElementById("box").getAttributeNode('id').nodeValue // box
   document.getElementById("box").getAttributeNode('id').value // 效果相同
   

3. nodeType

   回傳節點型別對應數字，只讀

   元素節點 1
   屬性節點 2
   文本節點 3
   注釋節點 8
   document 9
   DocumentFragment 11
   

   通過 nodeType 封裝 childNodes，篩選出元素節點

   function childElementArray(node) {
       var arr = [],
           nodes = node.childNodes;
       for (var i = 0; i < nodes.length; i++) {
           var item = nodes[i];
           if (item.nodeType === 1) {
               arr.push(item);
           }
       }
       return arr;
   }
   

4. attibutes

   回傳元素節點的屬性節點組成的類陣列

   document.getElementById("box").attributes[0].nodeValue // 獲取第一個屬性節點的 nodeValue
   

5. hasChildNodes

   回傳是否有子節點的布林值

DOM 結構樹

1. DOM 結構樹顯示了構造方法的繼承關系與原型鏈的走向

2. Document 的原型被 HTMLDocument 繼承，同樣被 XMLDocument 繼承

3. CharacterData 的原型是文本節點和注釋節點的祖先

4. HTMLElement 下有與標簽對應的多種 HTML...Element，用于構造元素節點

5. 需要注意的方法

   getElementById、getElementsByName 只在 Document 的原型上，只有 document 可以使用

   querySelector、querySelectorAll、getElementsByClassName、getElementsByTagName 在 Document 和 Element 的原型上都有，即 document 和元素節點物件都可以使用

   var box = document.getElementById("box");
   box.getElementById("list"); // 報錯
   

6. 需要注意的屬性

   document.bady 、document.head、document.title 繼承自 HTMLDocoment 的原型

   document.documentElement 繼承自 Document 的原型

   document.bady; // body 標簽元素
   document.head; // head 標簽元素
   document.title; // title 元素內文位元組點
   document.documentElement; // html 標簽元素
   

節點相關操作

1. document.createElement()

   創建元素節點

   var div = document.createElement("div"); // 傳入標簽名
   

2. document.createTextNode()

   創建文本節點

3. document.createComment()

   創建注釋節點

4. document.createDocumentFragment()

   創建一個檔案碎片，向其中添加節點，再將檔案碎片插入檔案中，可以提高性能

5. appendChild()

   在節點內部的最后添加子節點，并且具有剪切節點功能

   var div = document.createElement("div"),
       text = document.creaetTextNode("文本");
   div.appendChild(text);
   document.body.appendChild(div);
   

6. insertBefore(a, b)

   在節點內部 a 節點之前插入 b 節點

   元素節點沒有 insertAfter 方法，可以進行封裝

   Element.prototype.insertAfter = function (target, origin) {
       var after = origin.nextElementSibling; 
       if (after) {
           this.insertBefore(target, after);
       } else this.appendChild(target);
   }
   // nextElementSibling 兼容 IE9
   

7. removeChild()

   從檔案中洗掉子節點，但記憶體中依然保留空間占用

8. remove()

   節點呼叫，洗掉自身，可以釋放記憶體

9. replaceChild(a, b)

   用 a 節點替換子節點 b

10. innerHTML

    可以取值，可以賦值，并且賦值可以決議 HTML 代碼

11. innerText

    可以取值，可以賦值，并且將賦值決議成文本節點，標簽符號會被轉碼成字符物體

    firefox 老版本不支持，可使用功能相同的 textContent

12. setAttribute()，getAttribute()

    設定、獲取屬性

    var div = document.createElement("div");
    div.setAttribute('id', 'box');
    div.getAttribute('id'); // 回傳 box
    

13. dataset

    HTML5 中以命名 data- 開頭的屬性，可以通過 dataset 方法訪問

    兼容 IE9 及以上

    // <p data-name="Jett" data-age="22"></p>
    document.getElementsByTagName("p")[0].dateset // {name: 'Jett', age: '22'}
    

標籤：JavaScript

上一篇：ajax篇

下一篇：【原創】實作點擊按鈕更換表格皮膚效果