介绍
NPM 包 the-root 是一个 Javascript 函数库，其目的是帮助用户获取 DOM 树的根节点。the-root 借鉴了 jQuery 的思路，通过对浏览器原生 API 的二次封装，抽象出了更加简单易懂的操作方式，使用户可以更加方便地获取根节点。
安装
在使用 the-root 之前，需要先安装它。你可以在命令行中使用以下命令进行安装：
--- ------- -------- ------
安装完成后，在你的代码中引入 the-root：
------ ------- ---- -----------
或者：
----- ------- - --------------------
使用方法
获取根节点
使用 the-root 的最基本操作就是获取 DOM 树的根节点。获取根节点的方法如下：
----- -------- - ----------
一行代码搞定！这样你就可以通过 rootNode 对象来操作整个 DOM 树了。
获取指定节点的父节点
如果你想获取某个节点的父节点，可以使用 theRoot.getParentNode(element)：
----- ------- - -------------------------------------- ----- ---------- - -------------------------------
获取指定节点的祖先节点
如果你想获取某个节点的祖先节点，可以使用 theRoot.getAncestorNode(element, selector)。其中，selector 是一个可选参数，表示你要获取的祖先节点所匹配的选择器。
----- ------- - -------------------------------------- ----- -------- - -------------------------------- --------------
这将会获取 id 为 my-element 的节点在 .container 容器中的祖先节点。
获取指定节点的兄弟节点
如果你想获取某个节点的兄弟节点，可以使用 theRoot.getSiblingNodes(element, selector)。其中，selector 是一个可选参数，表示你要获取的兄弟节点所匹配的选择器。
----- ------- - -------------------------------------- ----- -------- - -------------------------------- ------
这将会获取 id 为 my-element 的节点的所有兄弟节点，并且只返回其中标签名为 li 的节点。
更多示例
获取表格单元格的所有兄弟节点
-------
----
----------
----------
-----
------------- --- - ------------------------------------------ ----- -------- - ----------------------------- -- -- ---------- --
获取列表项的所有祖先节点
--- -------------
----
---------------
-----
---------- ---- - ----------------------------- -- ------- ----- -------- - ------------------------------ -- -- ---- --
总结
the-root 是一个简单易用的函数库，如果你需要在你的项目中获取 DOM 树的根节点，使用 the-root 绝对是一个不错的选择。通过 the-root，你可以快速地获取父节点、祖先节点和兄弟节点等信息，可以让你在处理 DOM 操作时事半功倍。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaa14b5cbfe1ea0610338