使函数仅查看DOM的特定部分

Make function to see only specific part of DOM

本文关键字：定部 DOM 函数      更新时间：2023-09-26

目前我使用以下代码来获取所选元素的路径

if (!(el instanceof Element)) return;
        var path = [];
        while (el.nodeType === Node.ELEMENT_NODE) {
            var selector = el.nodeName.toLowerCase();
            if (el.id) {
                selector += '#' + el.id;
            } else {
                var sib = el, nth = 1;
                while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling) && nth++);
                selector += ":nth-child("+nth+")";
            }
            path.unshift(selector);
            el = el.parentNode;
        }
        return path.join(" > ");

它在我的完整 html 页面的上下文中返回正确的路径。但是，我希望此功能不是在整个页面上工作，而是在我的 html 页面的小区域中工作。我如何限制此功能工作，比如说在某个div#id 中？

但是，我希望此功能不是在整个页面上工作，而是在我的 html 页面的小区域中工作。我如何限制此功能工作，比如说在某个div#id 中？

听起来你只需要在到达那个特定元素后停止遍历树。根据是否将 ID 或元素传递给函数，您可以执行以下操作之一：

while (el.nodeType === Node.ELEMENT_NODE && (!el.id || el.id !== SOME_ID)) {

或 

while (el.nodeType === Node.ELEMENT_NODE && el !== SOME_ELEMENT) {
你不能

，至少不使用DOM API。

DOM API 允许你遍历整个 DOM，你可以随心所欲地上升。如果您有对document的引用，则可以自由地执行任何操作。

限制访问的一种方法是为 DOM API 编写包装器。这个包装器将具有您需要的功能，其中可能包括：创建新的 DOM 节点、删除 DOM 节点、在 DOM 节点上设置属性。但是您将无法自由地浏览 DOM 树（因为这会破坏您想要的封装）。

这种包装器的细节非常复杂，有很多选择。我正在使用一个内部开发的框架，该框架将其与小部件的符号相结合，这非常好。

相关文章：