简介
在前端开发过程中，经常需要对 HTML 元素进行操作。有时候需要获取某个元素的兄弟节点，但是 nextSibling 属性返回的可能是空白字符或注释节点。这时候就需要使用 nextElementSibling 属性。不过，nextElementSibling 还并不是所有浏览器都支持。为了解决这个问题，可以使用 npm 包 dom-next-element-sibling，该包提供了一个跨浏览器获取 nextElementSibling 的方法。
安装
使用 npm 命令安装 dom-next-element-sibling：
npm install dom-next-element-sibling --save
使用
使用 dom-next-element-sibling 时，需要先将其引入：
import getnextelem from 'dom-next-element-sibling';
然后，就可以使用 getnextelem 方法来获取元素的下一个元素节点：
const nextElem = getnextelem(elem);
其中，elem 是要获取下一个元素节点的元素。
示例代码
下面以在列表中获取当前元素的下一个元素为例，演示 dom-next-element-sibling 的使用方法。
HTML 代码：
<ul> <li>Item 1</li> <li>Item 2</li> <li id="current">Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>
JavaScript 代码：
-- -------------------- ---- ------- ------ ----------- ---- --------------------------- ----- ----------- - ----------------------------------- ----- -------- - ------------------------- -- --------- --- ----- - -------------------------------- -- -- ----- -- - ---- - ----------------------- -
其中，使用 getElementById 方法获取了当前元素，然后使用 getnextelem 方法获取了下一个元素。判断 nextElem 是否为空，输出相应的内容。
结语
dom-next-element-sibling 包提供了一个简单的方法来获取元素的下一个元素节点。它可以跨浏览器运行，并且使用起来非常简单。在开发过程中，如果需要获取元素的下一个元素节点，可以尝试使用该工具包来简化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e084a