如何从 DOM 元素生成准确的 CSS 路径：为什么 :nth-child 很重要？

如何从 DOM 元素生成准确的 CSS 路径

您已经提供了一个从 DOM 元素检索 CSS 路径的函数。虽然它有效地捕获了元素的层次结构，但缺乏唯一标识所需的精度。

问题

函数返回的第 123 个锚点元素的 CSS 路径是：

html > body > div#div-id > div.site > div.clearfix > ul.choices > li

但是，要完全识别该元素，它应该包含 :nth-child 选择器：

html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)

解决方案

要导出准确的 CSS 路径，请在函数中实现以下增强功能：

<code class="javascript">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(" > ");
 };</code>

此改进的函数：

• 处理非元素节点：防止过早遇到非元素节点时循环终止。
• 优先考虑 ID 选择器： 使用 ID 识别祖先以提高路径效率。
• 利用 nth-of-type： 增强选择器的可读性和唯一性。

通过合并这些修改，您可以自信地生成准确的 CSS 路径，准确表示 DOM 元素的层次结构和位置。

以上是如何从 DOM 元素生成准确的 CSS 路径：为什么 :nth-child 很重要？的详细内容。更多信息请关注PHP中文网其他相关文章！