本文已参与「新人创作礼」活动,一起开启掘金创作之路。
5.节点操作
一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称）和nodeValue (节点值）这三基本属性。
元素节点nodeType 为1,
属性节点nodeType 为2
文本节点nodeType为3(文本节点包含文字、空格、换行等)
5.1父节点
- node.parentNode
获得离node最近一级的父节点；
找不到返回为null；
5.2 子节点
- node.childNode
获得node的所有子节点，包括元素节点和文本节点（空格、换行）；
可以通过nodeType来筛选出元素节点
- node.children （常用）
获取node下所有的子元素节点
- parent.firstChild
获得第一个子节点，包括文本节点；
- parent.lastChild
获得最后一个子节点
- parent.firstElementChild
获得第一个子元素节点
- parent.lastElementChild
获得最后一个子元素节点
IE9以上支持
- parent.Children[0]
返回第一个子元素节点，无兼容性问题
- parent.Children[parent.children.length-1]
获得最后一个子元素节点，无兼容性问题
5.3 同级节点
- node.nextSibLing
获得下一个同级节点，包括文本节点
- node.previousSibLing
获得上一个同级节点
- node.nextElementSibling
获得下一个元素节点
- node.previousElementSibling
获得上一个元素节点
IE9以上支持
5.4 创建节点
- document.creatElement( 'value' )
创建元素节点value，页面上并不会出现，因为没有添加节点
- node.appendChild( 'value' )
在node节点下创建子节点value
若node下已有value节点，则会在原来的value下追加value节点
- node.insertBefore(value , 指定元素)
在node下创建value子节点并插入到指定元素前面
5.5 删除节点
- node.removeChild( child );
删除node下的child 子节点
5.6复制节点
- node.cloneNode( );
将node节点拷贝一份并返回
括号里面为空或false 则为浅拷贝，不拷贝node到里面的内容
括号里面为true则为深拷贝
