Node总结

Posted 2020-10-28 ninalei

一. 基本概念

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对象