NPM 包 the-root 的使用教程

介绍

NPM 包 the-root 是一个 Javascript 函数库，其目的是帮助用户获取 DOM 树的根节点。the-root 借鉴了 jQuery 的思路，通过对浏览器原生 API 的二次封装，抽象出了更加简单易懂的操作方式，使用户可以更加方便地获取根节点。

安装

在使用 the-root 之前，需要先安装它。你可以在命令行中使用以下命令进行安装：

npm install the-root --save

安装完成后，在你的代码中引入 the-root：

import theRoot from 'the-root';

或者：

const theRoot = require('the-root');

使用方法

获取根节点

使用 the-root 的最基本操作就是获取 DOM 树的根节点。获取根节点的方法如下：

const rootNode = theRoot();

一行代码搞定！这样你就可以通过 rootNode 对象来操作整个 DOM 树了。

获取指定节点的父节点

如果你想获取某个节点的父节点，可以使用 theRoot.getParentNode(element)：

const element = document.getElementById('my-element');
const parentNode = theRoot.getParentNode(element);

获取指定节点的祖先节点

如果你想获取某个节点的祖先节点，可以使用 theRoot.getAncestorNode(element, selector)。其中，selector 是一个可选参数，表示你要获取的祖先节点所匹配的选择器。

const element = document.getElementById('my-element');
const ancestor = theRoot.getAncestorNode(element, '.container');

这将会获取 id 为 my-element 的节点在 .container 容器中的祖先节点。

获取指定节点的兄弟节点

如果你想获取某个节点的兄弟节点，可以使用 theRoot.getSiblingNodes(element, selector)。其中，selector 是一个可选参数，表示你要获取的兄弟节点所匹配的选择器。

const element = document.getElementById('my-element');
const siblings = theRoot.getSiblingNodes(element, 'li');

这将会获取 id 为 my-element 的节点的所有兄弟节点，并且只返回其中标签名为 li 的节点。

更多示例

获取表格单元格的所有兄弟节点

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

const td1 = document.querySelector('td:nth-child(1)');
const siblings = theRoot.getSiblingNodes(td1);
// 返回 <td>2</td> 节点

获取列表项的所有祖先节点

<ul class="list">
  <li>
    <span>示例</span>
  </li>
</ul>

const span = document.querySelector('.list li span');
const ancestor = theRoot.getAncestorNode(span);
// 返回 <li> 节点

总结

the-root 是一个简单易用的函数库，如果你需要在你的项目中获取 DOM 树的根节点，使用 the-root 绝对是一个不错的选择。通过 the-root，你可以快速地获取父节点、祖先节点和兄弟节点等信息，可以让你在处理 DOM 操作时事半功倍。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa14b5cbfe1ea0610338