节点操作的作用

获取元素通常使用的两种方式：

1. 利用DOM提供的方法获取元素

document.getElementById()
document.getElementsByTagName()
document.querySelector() 等等
逻辑性不强，繁琐

2. 利用节点层级关系获取元素

利用父子兄弟节点关系获取元素
逻辑性墙，但是兼容性稍差

这两种方法都可以获取元素，但是节点操作更简单。

获取节点

1. 父节点

1.1 node.parentNode 返回的是距离最近的父节点

<body><div class="parent"><em class="child">JavaScript</em></div><script>var child = document.querySelector('.child');// 返回的是距离最近的父节点// 如果没有父节点则返回nullvar parent = child.parentNode;console.log(parent);</script>
</body>

以上代码输出结果为：

返回了距离child最近的父节点。

2. 子节点

2.1 node.childNode 返回所有的子节点，包括所有的文本节点和元素节点

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var parent = document.querySelector('ul');// 返回所有的子节点 包括所有的文本节点和元素节点var lis = parent.childNodes;console.log(lis);</script>
</body>

以上代码输出结果为：

返回了包含文本节点在内的9个子节点。那么如果我们只想要元素节点怎么办呢？

2.2 node.children 返回所有子元素节点

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var parent = document.querySelector('ul');// children获取所有的子元素节点var lis = parent.children;console.log(lis);</script>
</body>

以上代码输出结果为：

只返回了4个元素节点。

2.3 node.firstChild 和 node.lastChild 返回第一个和最后一个子节点，包括所有节点

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var parent = document.querySelector('ul');// 获取第一个/最后一个子节点 包括所有的文本节点和元素节点console.log(parent.firstChild);console.log(parent.lastChild);</script>
</body>

以上代码输出结果为：

返回了两个文本节点。那么如果我们只想要元素节点怎么办呢？

2.3 node.firstElementChild 和 node.lastElementChild 返回第一个和最后一个子元素节点，有兼容性问题

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var parent = document.querySelector('ul');// 获取第一个/最后一个子元素节点 有兼容性问题，IE9以上才支持console.log(parent.firstElementChild);console.log(parent.lastElementChild);</script>
</body>

以上代码输出结果为：

返回了第一个和最后一个子元素节点。然而这个方法有兼容性问题，IE9以上才支持。那么我们在日常开发中既想获取第一个和最后一个子元素节点又想兼顾兼容性，我们还有什么好办法呢？

2.4 开发中常用方法获取第一个和最后一个子元素节点

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var parent = document.querySelector('ul');// 实际开发中 利用childrenconsole.log(parent.children[0]);console.log(parent.children[parent.children.length - 1]);</script>
</body>

在实际开发中，我们可以运用children方法来返回第一个和最后一个子节点。

3. 兄弟节点

3.1 node.previousSibling 和 node.nextSibling 获取前一个和后一个兄弟节点，包括所有节点

<body><p>p</p><div class="div">div</div><span>span</span><script>var div = document.querySelector('div');// 获取兄弟节点-前一个/后一个节点 包含所有子节点// 找不到则返回nullconsole.log(div.nextSibling);console.log(div.previousSibling);</script>
</body>

以上代码输出结果为：

返回了div的前一个和后一个文本节点。那么如果我们只想要获取元素节点怎么办呢？

3.2 node.previousElementSibling 和 node.nextElementSibling 获取前一个和后一个兄弟元素节点，有兼容性问题

<body><p>p</p><div class="div">div</div><span>span</span><script>var div = document.querySelector('div');// 获取兄弟节点-前一个/后一个元素节点 有兼容性问题// 找不到则返回nullconsole.log(div.nextElementSibling);console.log(div.previousElementSibling);</script>
</body>

以上代码输出结果为：

返回了前一个和后一个元素节点。然而这个方法有兼容性问题，IE9以上才支持。那么我们在日常开发中既想获取前一个和后一个兄弟元素节点又想兼顾兼容性，我们还有什么好办法呢？

3.3 封装兼容性函数获取兄弟元素节点

以获取下一个元素节点为例：

<body><p>p</p><div class="div">div</div><span>span</span><script>var div = document.querySelector('div');// 封装兼容性函数function getNextElementSibling(ele) {while (ele = ele.nextSibling) {if (ele.nodeType === 1) {return ele;}}return null;}console.log(getNextElementSibling(div));</script>
</body>