如何为 DOM 元素生成精确的 CSS 路径？-css教程-PHP中文网

如何为 DOM 元素生成精确的 CSS 路径？

Susan Sarandon

发布： 2024-10-25 05:06:29

原创

559 人浏览过

How Can I Generate Precise CSS Paths for DOM Elements?

以增强的精度从 DOM 元素检索 CSS 路径

提供的函数尝试为给定 DOM 元素生成 CSS 路径。然而，它的输出缺乏特异性，无法捕获元素在其兄弟元素中的位置。为了解决这个问题，我们需要一种更复杂的方法。

改进的 CSS 路径函数

下面提供的增强函数解决了原始限制：

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

登录后复制

增强功能和优点：

基于 ID 的优化： 该函数优先考虑具有 id 属性的匹配元素，一旦遇到 id 就停止搜索。这确保了唯一且高效的 CSS 选择器。
第 N 个类型选择器： 通过利用第 n 个类型选择器，该函数可以识别元素在其兄弟元素中的位置，从而提供更好的选择器。特异性和可读性。
适用于所有元素节点：该函数正确处理所有元素节点（不包括文本节点），准确捕获它们在 DOM 树中的位置。

用法示例：

利用这一改进的功能，现在可以获得给定元素的更精确的 CSS 路径：

console.log(cssPath(document.getElementsByTagName('a')[123]));
// Output: "html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)"

登录后复制

以上是如何为 DOM 元素生成精确的 CSS 路径？的详细内容。更多信息请关注PHP中文网其他相关文章！