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;
}