节点操作

发表于 更新于 分类于 本文字数： 832 阅读时长 ≈ 1 分钟

父子节点

获取父节点

node.parentNode

获取子节点

childNodes 得到所有的子节点 包含 元素节点 文本节点等等
1.node.childNodes (不常用)
2.node.children

获取第一个子节点和最后一个子节点

获取第一个子节点:
firstChid 得到第一个子节点 包含 元素节点 文本节点等等
1.node.firstChild (不常用)
2.node.firstElementChild (IE9以上支持)
3.node.children[0]

获取最后一个子节点:
lastChid 得到最后一个子节点 包含 元素节点 文本节点等等
1.node.lastChild (不常用)
2.node.lastElementChild (IE9以上支持)
3.node.children[node.children.length-1]

兄弟节点

获取下一个兄弟节点

nextSibling 得到下一个兄弟节点 包含 元素节点 文本节点等等
1.node.nextSibling (不常用)
2.node.nextElementSibling (IE9以上支持)

获取上一个兄弟节点

previousSibling 得到上一个兄弟节点 包含 元素节点 文本节点等等
1.node.previousSibling (不常用)
2.node.previousElementSibling (IE9以上支持)

创建节点

document.createElement(‘tagname’)

添加节点

appendChild 将一个节点添加指定父元素的子节点列表末尾,类似数组中的push
insertBefore 将一个节点添加指定父元素的子节点列表指定位置
1.node.appendChild(child)
2.node.insertBefore(child,指定元素)

删除节点

node.removeChild(child)

复制节点

node.cloneNode()
注意:如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点