在前端开发中，经常需要操作 DOM 元素，其中最常见的需求就是获取一个元素所有的同级节点。在这种情况下，一个非常方便实用的 npm 包就是 siblings，它可以帮助我们快速地获取元素的兄弟节点，提高开发效率。
1. 安装 siblings
使用 npm 安装 siblings：
npm install siblings --save
或者使用 yarn 安装：
yarn add siblings
2. siblings 使用方法
siblings 包提供的是一个 siblings 函数，接受一个参数，即为操作的 DOM 元素。下面是一个示例：
import siblings from 'siblings';
const el = document.querySelector('#some-element');
const sibs = siblings(el);
console.log(sibs);在代码中，我们首先获取了一个 DOM 元素 el，然后使用 siblings 函数获取该元素的所有兄弟节点，返回值是一个包含所有兄弟节点的数组 sibs，之后我们就可以在控制台中使用 console.log 打印出来查看了。
3. siblings 返回值
siblings 函数的返回值是一个数组，包含了元素的所有兄弟节点。下面是一个示例：
<div id="parent"> <div class="child1"></div> <div class="child2"></div> <div class="child3"></div> </div>
import siblings from 'siblings';
const el = document.querySelector('.child2');
const sibs = siblings(el);
console.log(sibs);输出结果：
[<div class="child1"></div>, <div class="child3"></div>]
4. siblings 的可选参数
siblings 函数还提供了一些可选的参数，以满足更多的需求。下面是可选参数的说明：
4.1. filter
filter 是一个回调函数，用于过滤不需要的兄弟节点。示例代码：
-- -------------------- ---- ------- ------ -------- ---- ----------- ----- -- - ---------------------------------- ----- ---- - ------------ -------- ---- - ------ -------------------------------- --- ------------------
输出结果：
[<div class="child3"></div>]
在这个示例中，我们使用 classList.contains('child3') 方法来过滤了不需要的兄弟节点，最终返回的是仅包含一个兄弟节点的数组。
4.2. level
level 是一个整数，用于限制兄弟节点的层数。示例代码：
-- -------------------- ---- ------- ------ -------- ---- ----------- ----- -- - ---------------------------------- ----- ---- - ------------ -------- ---- - ------ -------------------------------- -- --- ------------------
输出结果：
[]
在这个示例中，我们限制了层数为 1，因此返回的数组为空。
5. 总结
siblings 是一个非常实用的 npm 包，可以快速地获取元素的所有兄弟节点。通过使用它提供的可选参数，我们可以更加细致地控制返回值的范围，满足更多的需求。你可以将 siblings 用在项目中，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/204138