一. 基本概念

1.1 DOM

DOM(Document Object Model), 把網頁轉換成JS對象，可以用腳本進行各種操作。瀏覽器將結構化文檔（HTML/XML）解析成一系列的節點形成DOM tree。所有的節點和最終的樹狀結構都有API。

1.2 節點類型

• 文檔節點（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接口

2.1 Node接口屬性

1. Node.nodeType 返回整數，表示當前節點
2. Node.nodeName 如果是element會返回大寫的標簽名 eg: ‘DIV‘
3. Node.nodeValue 只有文本節點和註釋節點有這個值，其余都是null
4. Node.textContent 返回當前節點和後代所有節點的文本內容，忽略HTML標簽（innerText）
5. Node.baseURI 返回當前網頁的絕對路徑
6. Node.nextSibling 返回下一個同級節點
7. Node.previousSibling 返回同級的前一個節點
8. Node.parentNode 返回父節點（可能是element/document/doucumentfragment）
9. Node.parentElement 返回父元素節點
10. Node.firstChild / lastChild 返回的可能是文本節點或註釋節點
11. Node.childNodes /children 對於childNodes會返回所有的節點（包括註釋，文本等） 而chilren只返回element
    • 　　對與children[0]返回的一定是element 但是firstChild返回的可能是文本

2.2 Node接口方法

1. Node.appendChild() 配合documen.createElement(‘tagName‘)
2. Node.hasChildNodes() 返回bool
3. Node.cloneNode(true/false) true clone子節點，但是會丟失所有的on-屬性和eventHandler
4. Node.insertBefore(newNode, referenceNode) 把newNode 插在Node內部referenceNode之前
   • 　　referenceNode 為null則插在Node最後
   • 　　沒有insertAfter，可以通過Node.insertBefore(newNode, referenceNode.nextSibling)
5. Node.removeChild(childNode)
6. Node.replaceChild(newNode, oldNode)
7. Node.contains(node)
8. Node.isEqualNode() 返回兩個節點的類型、屬性、子節點相同
9. Node.isSameNode() 返回兩個節點是否為同一個節點

三. NodeList 接口

通過Node.childNods document.querySelectorAll() document.getElementsByTagName()等方法獲得

1. NodeList.prototype.forEach() NodeList是類數組對象，但可以使用forEach
   • 　　通過Array.prototype.slice.call()將其轉化成array
   • nodelist.forEach( function(item, index, list))
2. NodeList.prototype.length
3. NodeList.prototype.item(i) 返回第i
4. NodeList.prototype.keys() NodeList.prototype.values() NodeList.prototype.entries()
• 　　可以用for (let key of nodelist.keys())
• for (let value of nodelist.values())
• for (let entry of nodelist.entries())

四. HTMLCollection接口

通過HTMLCollectionm沒有forEach循環，只有element元素

1. HTMLCollection.prototype.length
2. HTMLCollection.prototype.item(i)

五. ParentNode接口

1. ParentNode.childern 返回當前節點的元素子節點
2. ParentNode.firstElementChild 返回第一個元素子節點
3. ParentNode.lastElementChild 返回最後一個元素節點
4. ParentNode.append() ParentNode.prepend() 像parent node中插入子節點

六. ChildNode接口

1. childNode.remove() 移除某一個node
2. childNode.before(node) childNode.after(node) 在某一個node前後插入node，共有一個parentNode
3. childNode.replaceWith() 替換當前的節點

七. document對象

Node總結