Node总结
一. 基本概念
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接口属性
- Node.nodeType 返回整数,表示当前节点
- Node.nodeName 如果是element会返回大写的标签名 eg: 'DIV'
- Node.nodeValue 只有文本节点和注释节点有这个值,其余都是null
- Node.textContent 返回当前节点和后代所有节点的文本内容,忽略HTML标签(innerText)
- Node.baseURI 返回当前网页的绝对路径
- Node.nextSibling 返回下一个同级节点
- Node.previousSibling 返回同级的前一个节点
- Node.parentNode 返回父节点(可能是element/document/doucumentfragment)
- Node.parentElement 返回父元素节点
- Node.firstChild / lastChild 返回的可能是文本节点或注释节点
- Node.childNodes /children 对于childNodes会返回所有的节点(包括注释,文本等) 而chilren只返回element
- 对与children[0]返回的一定是element 但是firstChild返回的可能是文本
2.2 Node接口方法
- Node.appendChild() 配合documen.createElement('tagName')
- Node.hasChildNodes() 返回bool
- Node.cloneNode(true/false) true clone子节点,但是会丢失所有的on-属性和eventHandler
- Node.insertBefore(newNode, referenceNode) 把newNode 插在Node内部referenceNode之前
- referenceNode 为null则插在Node最后
- 没有insertAfter,可以通过Node.insertBefore(newNode, referenceNode.nextSibling)
- Node.removeChild(childNode)
- Node.replaceChild(newNode, oldNode)
- Node.contains(node)
- Node.isEqualNode() 返回两个节点的类型、属性、子节点相同
- Node.isSameNode() 返回两个节点是否为同一个节点
三. NodeList 接口
通过Node.childNods document.querySelectorAll() document.getElementsByTagName()等方法获得
- NodeList.prototype.forEach() NodeList是类数组对象,但可以使用forEach
- 通过Array.prototype.slice.call()将其转化成array
- nodelist.forEach( function(item, index, list))
- NodeList.prototype.length
- NodeList.prototype.item(i) 返回第i
- 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元素
- HTMLCollection.prototype.length
- HTMLCollection.prototype.item(i)
五. ParentNode接口
- ParentNode.childern 返回当前节点的元素子节点
- ParentNode.firstElementChild 返回第一个元素子节点
- ParentNode.lastElementChild 返回最后一个元素节点
- ParentNode.append() ParentNode.prepend() 像parent node中插入子节点
六. ChildNode接口
- childNode.remove() 移除某一个node
- childNode.before(node) childNode.after(node) 在某一个node前后插入node,共有一个parentNode
- childNode.replaceWith() 替换当前的节点
七. document对象