什么是 within？
within 是一个 npm 包，它提供了一种方便的方法来遍历 DOM 元素树中的所有元素。它的用途包括筛选所有匹配某种选择器的元素、将操作应用于只选定的元素、从某些元素下面开始，遍历它们的子元素等等。
安装
使用 npm 安装 within：
npm install within --save
如果你使用 yarn，也可以通过 yarn 安装 within：
yarn add within
使用
引用 within
使用 import 或 require 引用 within：
import within from 'within';
// 或者
const within = require('within');遍历 DOM 元素树中的所有元素
使用 within.all(selector) 方法可以遍历 DOM 元素树中的所有元素：
const elements = within.all('div');
console.log(elements);以上代码将返回一个数组，其中包含所有的 div 元素。
选择某些指定的元素
使用 within.all(selector, context) 方法可以选择在某些指定的元素下面的元素：
<div class="root">
<div class="level-1">
<div class="level-2">
<span>测试</span>
</div>
</div>
</div>const context = document.querySelector('.root');
const elements = within.all('div.level-2 span', context);
console.log(elements);以上代码将返回一个包含 span 元素的数组。
遍历某些指定元素下面的所有子元素
使用 within.all(selector, context, true) 方法可以遍历某些指定元素下面的所有子元素：
<div class="root">
<div class="level-1">
<div class="level-2">
<span>测试</span>
</div>
</div>
</div>const context = document.querySelector('.root');
const elements = within.all('*', context, true);
console.log(elements);以上代码将返回一个包含 .root 元素及其所有子元素的数组。
综合应用
在下面的例子中，我们将使用 within、parent() 和 children() 方法来获取主 div 元素的所有子元素。我们还将使用 within、closest() 和 prev() 方法来找到前一个 div 元素。
<div class="main"> <div class="header">标题</div> <div class="content">内容</div> <div class="footer">底部</div> </div>
-- -------------------- ---- ------- ------ ------ ---- --------- -- --- --- -------- ----- ---- - -------------------------------- ----- -------- - --------------- ------ -- ----- --- -- ----- ------- - ------------------------------- ----- ---- - --------------------- - ----- ----------------
总结
在本文中，我们介绍了如何使用 within 这个 npm 包来遍历 DOM 元素树中的所有元素，选择某些指定的元素，以及遍历某些指定元素下面的所有子元素。此外，我们还展示了一个综合应用的例子，证明了 within 在实际应用中的实用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671128dd3466f61ffe485