JavaScript节点操作

节点操作

什么是节点： 网页中的所有内容都是节点(文本，标签，属性，样式，注释等)，在节点中使用node来表示
节点拥有的特性： 拥有nodeType,nodeName,nodeValue三个基本属性
nodeType节点类型分为： 元素节点 1，属性节点 2，文本节点 3 实际开发过程中，主要操作的是元素节点

父节点

node.parentNode 返回的是某节点的父节点，注意是最近的一个父节点，如果没有父节点返回值为null

子节点

parentNode.childNodes;返回的是指定节点的所有子节点集合
parentNode.children 是一个只读属性，返回所有的子元素节点，其余节点不返回
注意事项：包含了所有子节点，包括元素节点文本节点等，所以你要获取元素子节点还需单独处理，所以一般不提倡使用childNodes

第一个子节点： parentNode.firstChild
最后一个子节点：parentNode.lastChild
第一个子元素节点：parentNode.firstElementChild
最后一个子元素节点：parentNode.lastElementChild

兄弟节点

上一个兄弟节点: previousSibing previousElementSibling
下一个兄弟节点: nextSibling nextElementSibling

添加节点

document.createElement(标签名);页面中如果要操作的元素不存在，我们可以动态生成
node.appendChild(child);将一个节点添加到指定父节点的子节点列表末尾，类似于css中after伪元素
node.insertBefore(child,指定元素);将节点添加到父节点的指定节点的前面。类似于css中before伪元素

删除节点

removeChild();从node中删除一个子节点，返回删除的节点

克隆节点

node.cloneNode();

备注：
当括号中的参数为空或者为false，称为浅拷贝，只复制节点本身，不克隆里面的子节点
如果括号中的参数为true，称为深度拷贝，会复制节点本身以及里面所有的子节点

创建元素

有三种方式：
document.write(); 直接将内容写入到页面中，会导致页面全部重绘
element.innerHTML;是将内容写入某个DOM节点，不会导致页面重绘
element.createElement();创建多个元素效率较低，但是结构清晰