[TOC] ## Node 接口 ### 屬性 #### Node.prototype.nodeType 節點類型,返回整數 `document.nodeType` * 文檔節點（document）：9，對應常量`Node.DOCUMENT_NODE` * 元素節點（element）：1，對應常量`Node.ELEMENT_NODE` * 屬性節點（attr）：2，對應常量`Node.ATTRIBUTE_NODE` * 文本節點（text）：3，對應常量`Node.TEXT_NODE` * 文檔片斷節點（DocumentFragment）：11，對應常量`Node.DOCUMENT_FRAGMENT_NODE` * 文檔類型節點（DocumentType）：10，對應常量`Node.DOCUMENT_TYPE_NODE` * 注釋節點（Comment）：8，對應常量`Node.COMMENT_NODE` #### Node.prototype.nodeName 節點名稱 ``` var div = document.getElementById('d1'); div.nodeName // "DIV" ``` * 文檔節點（document）：`#document` * 元素節點（element）：大寫的標簽名 * 屬性節點（attr）：屬性的名稱 * 文本節點（text）：`#text` * 文檔片斷節點（DocumentFragment）：`#document-fragment` * 文檔類型節點（DocumentType）：文檔的類型 * 注釋節點（Comment）：`#comment` #### Node.prototype.nodeValue 節點值 文本節點（text）、注釋節點（comment）和屬性節點（attr）有文本值 ``` // HTML 代碼如下 // <div id="d1">hello world</div> var div = document.getElementById('d1'); div.nodeValue // null div.firstChild.nodeValue // "hello world" ``` #### Node.prototype.textContent 當前和后臺節點內容 屬性是可讀寫的,且復制標簽會自動轉義 ``` // <div id="divA">This is <span>some</span> text</div> document.getElementById('divA').textContent // This is some text ``` `document.getElementById('foo').textContent = '<p>GoodBye!</p>'; ` #### Node.prototype.baseURI ``` // http://www.example.com/index.html document.baseURI // "http://www.example.com/index.html" ``` 設置了base 就會返回此屬性 `<base href="http://www.example.com/page.html"> ` #### Node.prototype.nextSibling 后面最近的同級節點 ``` // <div id="d1">hello</div><div id="d2">world</div> var d1 = document.getElementById('d1'); var d2 = document.getElementById('d2'); d1.nextSibling === d2 // true ``` 遍歷子節點 ``` var el = document.getElementById('div1').firstChild; while (el !== null) { console.log(el.nodeName); el = el.nextSibling; } ``` #### Node.prototype.previousSibling 前面最近的同級節點 #### Node.prototype.parentNode 父節點 #### Node.prototype.parentElement 父元素節點,只返回元素節點 與`parentNode`的區別 由于父節點只可能是三種類型：元素節點、文檔節點（`document`）和文檔片段節點（`documentfragment`）。`parentElement`屬性相當于把后兩種父節點都排除了 #### Node.prototype.firstChild，Node.prototype.lastChild 返回當前節點的子節點 ``` // <p id="p1"><span>First span</span></p> var p1 = document.getElementById('p1'); p1.firstChild.nodeName // "SPAN" ``` //如果有換行,則返回文本節點 ``` // <p id="p1"> // <span>First span</span> // </p> var p1 = document.getElementById('p1'); p1.firstChild.nodeName // "#text" ``` #### Node.prototype.childNodes 返回當前所有子節點 包括文本節點和屬性節點 ``` var children = document.querySelector('ul').childNodes; ``` #### Node.prototype.isConnected 節點是否在文檔中 ``` var test = document.createElement('p'); test.isConnected // false document.body.appendChild(test); test.isConnected // true ``` ### 方法 #### Node.prototype.appendChild() 作為最后子節點,插入 如果 Dom 節點已經存在,則是移動位置 ``` var p = document.createElement('p'); document.body.appendChild(p); ``` #### Node.prototype.hasChildNodes() 是否有子節點 ``` var foo = document.getElementById('foo'); if (foo.hasChildNodes()) { //存在就移除節點 foo.removeChild(foo.childNodes[0]); } ``` > 注意，子節點包括所有類型的節點，并不僅僅是元素節點。哪怕節點只包含一個空格，hasChildNodes方法也會返回true #### Node.prototype.cloneNode() 克隆節點, 參數為 `true` 遞歸克隆 `var cloneUL = document.querySelector('ul').cloneNode(true); ` `addEventListener`方法和`on-`屬性（即`node.onclick = fn`），添加在這個節點上的事件回調函數 #### Node.prototype.insertBefore() 節點插入父節點內部的指定位置 `var insertedNode = parentNode.insertBefore(newNode, referenceNode); ` 第一個參數是所要插入的節點`newNode`， 第二個參數是父節點`parentNode`內部的一個子節點`referenceNode`。`newNode`將插在`referenceNode`這個子節點的前面。返回值是插入的新節點`newNode` 例子: ``` var p = document.createElement('p'); document.body.insertBefore(p, document.body.firstChild); ``` #### Node.prototype.removeChild() 移除節點,參數為獲取的節點 ``` var divA = document.getElementById('A'); divA.parentNode.removeChild(divA); ``` 移除當前節點的所有子節點: ``` var element = document.getElementById('top'); while (element.firstChild) { element.removeChild(element.firstChild); } ``` #### Node.prototype.replaceChild() 替換某個子節點 `var replacedNode = parentNode.replaceChild(newChild, oldChild); ` NewSpan 替換 divA ``` var divA = document.getElementById('divA'); var newSpan = document.createElement('span'); newSpan.textContent = 'Hello World!'; divA.parentNode.replaceChild(newSpan, divA); ``` #### Node.prototype.contains() 參數節點為當前節點,或子節點,或后代節點 `document.body.contains(document.body.firstChild)` * 參數節點為當前節點。 * 參數節點為當前節點的子節點。 * 參數節點為當前節點的后代節點。 #### Node.prototype.compareDocumentPosition() 與`contains`方法類似,返回二進制 | 二進制值 | 十進制值 | 含義 | | --- | --- | --- | | 000000 | 0 | 兩個節點相同 | | 000001 | 1 | 兩個節點不在同一個文檔（即有一個節點不在當前文檔） | | 000010 | 2 | 參數節點在當前節點的前面 | | 000100 | 4 | 參數節點在當前節點的后面 | | 001000 | 8 | 參數節點包含當前節點 | | 010000 | 16 | 當前節點包含參數節點 | | 100000 | 32 | 瀏覽器內部使用 | ``` var head = document.head; var body = document.body; if (head.compareDocumentPosition(body) & 4) { console.log('文檔結構正確'); } else { console.log('<body> 不能在 <head> 前面'); } ``` #### Node.prototype.isEqualNode() 兩節點是否相等 ``` var p1 = document.createElement('p'); var p2 = document.createElement('p'); p1.isEqualNode(p2) // true ``` 所謂相等的節點，指的是兩個節點的類型相同、屬性相同、子節點相同 #### Node.prototype.isSameNode() 是否為同一個節點 ``` var p1 = document.createElement('p'); var p2 = document.createElement('p'); p1.isSameNode(p2) // false p1.isSameNode(p1) // true ``` #### Node.prototype.normalize() 清理當前節點內部的所有文本節點（text） ``` var wrapper = document.createElement('div'); wrapper.appendChild(document.createTextNode('Part 1 ')); wrapper.appendChild(document.createTextNode('Part 2 ')); wrapper.childNodes.length // 2 wrapper.normalize(); wrapper.childNodes.length // 1 ``` #### Node.prototype.getRootNode() 與`ownerDocument`屬性的作用相同 ``` document.body.firstChild.getRootNode() === document // true document.body.firstChild.getRootNode() === document.body.firstChild.ownerDocument // true ``` ## NodeList 接口，HTMLCollection 接口 節點數組 `NodeList`可以包含各種類型的節點，`HTMLCollection`只能包含 HTML 元素節點 ## ParentNode 接口，ChildNode 接口 ### ParentNode 接口 **如果有子節點,它就繼承 `Parent`接口** #### ParentNode.children ``` for (var i = 0; i < el.children.length; i++) { // ... } ``` 只包含元素子節點,動態變化 #### ParentNode.firstElementChild 首個元素節點 ``` document.firstElementChild.nodeName // "HTML" ``` #### ParentNode.lastElementChild #### ParentNode.childElementCount #### ParentNode.append()，ParentNode.prepend() 在最前/最后添加元素 ``` var p1 = document.createElement('p'); var p2 = document.createElement('p'); parent.append(p1, p2); ``` ### ChildNode 接口 如果一個節點有父節點，那么該節點就繼承了`ChildNode`接口 #### ChildNode.remove() 移除當前節點 `el.remove() ` #### ChildNode.before()，ChildNode.after() 從之前,之后插入節點 可插入元素節點,也可插入文本節點 ``` var p = document.createElement('p'); var p1 = document.createElement('p'); // 插入元素節點 el.before(p); // 插入文本節點 el.before('Hello'); // 插入多個元素節點 el.before(p, p1); // 插入元素節點和文本節點 el.before(p, 'Hello'); ``` ### ChildNode.replaceWith() 參數節點替換當前節點 ``` var span = document.createElement('span'); el.replaceWith(span); ``` ### NodeList 接口 `document.body.childNodes instanceof NodeList // true ` 1.并不是數組,但有 `length` 與 `forEach` 2.可轉成數組 `Array.prototype.slice.call(children)` ### HTMLCollection 接口 只能包含元素節點,不能使用`foreach` 一些對象的合集 `document.links`、`document.forms`、`document.images` `document.links instanceof HTMLCollection // true ` 如果元素節點有`id`或`name`屬性，那么`HTMLCollection`實例上面，可以使用`id`屬性或`name`屬性引用該節點元素。如果沒有對應的節點，則返回`null` ``` // <img id="pic" src="http://example.com/foo.jpg"> var pic = document.getElementById('pic'); document.images.pic === pic // true ```