浏览器元素遍历API

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

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

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

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

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

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 类型的子元素。

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

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

3. lastElementChild 最后一个子 element 节点

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

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

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

4. previousElementSibling 上一个 element 节点

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

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

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

5. nextElementSibling 下一个 element 节点

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

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

console.log(app.nextElementSibling); // <div id="great">great!</div>
如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。