JS节点操作小结(创建节点,添加节点,获取节点,删除节点,复制节点)

一,创建节点
document.createElement(‘li’),//创建一个节点

二,添加节点
insertBefore(要添加的节点, 添加在哪个节点之前) 在指定节点前面添加

三,获取节点
(1)获取父节点
node.parentNode,获取距离node最近的父级元素,找不到则返回null;
(2)获取子节点
1.childNodes 获取所有子节点(包括元素节点,文本节点等)
2.获取元素子节点 node.chiildren .
(3)获取第一个子节点
1.node.firstChild 获取第一个,无论是元素节点还是文本节点
2.node.firstElementChild 获取第一个元素节点 但是存在兼容性问题
(4)获取最后一个子节点
1.node.lastChild
2.node.lastElementChild 最后一个元素节点

3.既没有兼容性问题,又可以直接获取第一个元素节点的方法
node.children[0];获取第一个元素节点
node.children[node.children.length - 1];获取最后一个元素节点
(5)获取兄弟节点
1.node.nextSibling //获取下一个兄弟节点(无论元素节点还是文本节点)
node.nextElementSibling//获取下一个元素节点(兼容性)
2.node.previousSibling //获取上一个兄弟节点(无论元素节点还是文本节点
node.previousElementSibling //获取上一个元素节点(兼容性)

----解决获取兄弟节点兼容性问题:
function nextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
封装一个函数即可. 依旧是使用上面的方法

四,删除节点
(1)node.removeChild(要删除的节点) node为父节点

五,复制节点
(1)node.cloneNode() //括号为空或者为false为浅复制,只复制节点
node.cloneNode(true) //括号为true为深复制,复制节点及内部所有内容