JavaScript基础——节点操作
节点概念
节点类型
节点常见类型有以下几种：
- 元素结点 Node.ELEMENT_NODE(1)
- 属性结点 Node.ATTRIBUTE_NODE(2)
- 文本结点 Node.TEXT_NODE(3)
节点层级
利用DOM树可以将结点划分为不同层级关系，常见的是父子级关系
一、父级节点
node.parentNode 例如：实现点击test结点中的close结点让test消失，就可以这么写。
<div id='test'> <div id='close'>x</div> </div> <script> var close = this.document.querySelector('#close'); close.onclick = function(){ close.parentNode.remove(); } </script> 二、子节点
1.获取所有子节点
node.childNodes // 标准 例如：
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> var ul = this.document.querySelector('ul'); console.log(ul.childNodes); </script> 我们要将ul中的childNodes将所有4个li打印出来，但是将上述代码进行输出时，却发现得到的数组长度为9，如下所示。
展开该数组不难发现，除了4个元素结点li外还有5个文本结点，这5个并不是li中的文本，因为li中的文本已经不属于ul的子节点。
那么这5个文本类型的结点是ul的？可ul中并没有文本啊？
别忘了，其实换行符也是属于一个字符，这5个文本结点正好对应ul中li与li之间的换行符。
注意：childsNode返回值里面包含的是所有的子节点，如果想要获取里面的元素结点，则需要专门处理。一般不提倡使用。
2.获取所有子元素结点
parentNode.children // 非标准 children是一个只读属性，返回所有子元素的节点。它只返回元素结点，其他结点均不返回。
虽热children是非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。
3.获取第一个和最后一个结点
获取第一个/最后一个节点，包含文本结点、元素结点等。
node.firstChild // 获取第一个子节点 node.lastChild // 获取最后一个子节点 获取第一个/最后一个节点，只获取子元素结点。
node.firstElementChild // 获取第一个子元素节点 node.lastElementChild // 获取最后一个子元素节点 注意：这两个方法有兼容性问题，IE9以上才支持
获取第一个/最后一个节点，只获取子元素结点。（实际开发中为了照顾兼容性的写法）
node.children[0] // 获取第一个子元素节点 node.children[node.children.length] // 获取最后一个子元素节点 三、兄弟结点
获取上一个/下一个兄弟节点，包含文本节点、元素节点等。
node.nextSibling // 下一个兄弟节点 node.previousSibling // 上一个兄弟节点 获取上一个/下一个兄弟节点，只获取元素节点。
node.nextElementSibling // 上一个兄弟元素节点 node.previousElementSibling // 上一个兄弟元素节点 注意：这两个方法有兼容性问题，IE9以上才支持
解决办法：自己封装一个兼容性的函数
function getNextElementSibling(element){ var el = element; while(el = el.nextSibling){ // 注意这里是赋值运算符并不是比较，循环条件是el不为null if(el.nodeType==1)return el; } return null; }