首页 > web前端 > css教程 > 如何为 DOM 元素生成精确的 CSS 路径?

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

Susan Sarandon
发布: 2024-10-25 05:06:29
原创
687 人浏览过

How Can I Generate Precise CSS Paths for DOM Elements?

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

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

改进的 CSS 路径函数

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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 路径:

1

2

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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板