node节点的解读

本文链接：https://blog.csdn.net/dai_qingyun/article/details/54603619

node的分类

类型                                                     nodeType

元素：element                                             1

属性：attr                                                     2

文本：text                                                    3

注释：comment                                           8

文档：document                                          9

创造一个元素节点

var div = document.creatElement("div")

创造一个属性节点

var attr = document.createAttribute("attr")

创造文本节点

var text = document.creatTextNode("hello world")

nodeName属性

element.nodeName  返回的是tagName

attr.nodeName  返回的是属性名

text.nodeName  返回的是text

document.nodeName  返回的是document

nodeValue属性

element.nodeValue  返回的是null

attr.nodeValue 返回的是属性值

text.nodeValue 返回的是文本值

document.nodeValue 返回的是null

子节点

hasChildNodes()  是否有子节点

childNodes()  返回所有子节点集合

firstChild()  首个子节点

lastChild()  最后一个子节点

兄弟节点

previousSibling  前一个兄弟节点

nextSibling  后一个兄弟节点

parentNode 与 parentElement

parentNode  父级节点

parentElement  父级元素

textContent与innerText

textContent  获取该节点下的所有文本

innerText  获取该节点文本，但被css和js隐藏的文本不显示

添加节点

parentNode.appendChild(node)

targetNode.parentNode.insertBefore(newNode,target)

复制节点

targetNode.cloneNode(deep)  deep为true，子节点也复制，为false，子节点不复制

删除节点

targetNode.remove()

parentNode.removeChild(node)

替换节点

targetNode.parentNode.replaceChild(newElement,targetNode)

判断两个节点是否相等

node.isEqualNode(otherNode) 类型和特性相等， 则为true

node.isEqualNode(otherNode) 类型和特性相等， 则为true