浏览器元素遍历API

之前的文章中介绍过了浏览器 Node 相关的 API。虽然，使用之前的 API 我们可以轻松操作和获取 DOM 节点，但是会存在一些兼容性问题。

比如空白节点，IE9 之前的版本不会把元素间的空格当成空白节点，而其他浏览器却会，所以导致了 childNodes 和 firstChild 等属性上的差异。

举个例子，比如存在如下的 HTML 结构。

<div class="wrapper">
  <div id="app"></div>
  hello world
  <div id="great">great!</div>
  text
</div>

如果获取 id 为 app 这个节点的下一个节点，使用如下两种不同的方式将会获得不同的结果。

const el = document.getElementById('app');
const element1 = el.nextSibling;
const element2 = el.nextElementSibling;

console.log(element1); // "\nhello world\n"，但是在ie9之前的浏览器打开将会是其它结果
console.log(element2); // <div id="great">great!</div>

为了解决这些差异问题，W3C 定义了一套新的 API。

1. childElementCount 子元素数量

该属性返回子元素的数量，其子元素不包括文本节点和注释节点。

以上述 demo 为例，在其父元素上获取 childElementCount 将会返回 2。

2. firstElementChild 第一个子 element 节点

指向第一个 Element 类型的子元素。

上述示例获取 wrapper 的 firstElementChild 将会得到的是<div id="app"></div>。

console.log(wrapper.firstElementChild); // <div id="app"></div>

3. lastElementChild 最后一个子 element 节点

指向最后一个 Element 类型的子元素。

上述示例获取 wrapper 的 lastElementChild 将会得到的是<div id="great">great!</div>。

console.log(wrapper.lastElementChild); // <div id="great">great!</div>

4. previousElementSibling 上一个 element 节点

指向上一个 Element 类型的兄弟元素。

上述示例获取 great 的 previousElementSibling 将会得到的是<div id="app"></div>。

console.log(great.previousElementSibling); // <div id="app"></div>

5. nextElementSibling 下一个 element 节点

指向下一个 Element 类型的兄弟元素。

上述示例获取 app 的 nextElementSibling 将会得到的是<div>great!</div>。

console.log(app.nextElementSibling); // <div id="great">great!</div>