jQuery 点击标签获取DOM路径

什么是DOM路径

DOM路径指的是一个HTML元素在DOM树中的位置，类似于文件系统中的文件路径。通过DOM路径，我们可以精确地定位到某个特定的元素。

使用jQuery获取DOM路径

要获取被点击的标签的DOM路径，我们首先需要注册一个点击事件的监听器。然后，在事件处理函数中，通过遍历父元素的方式逐级构建DOM路径。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
         $(document).ready(function () {$ ('a').click(function () {
                var path = $(this).parents().map(function () {
                    return this.tagName;
                }).get().reverse().join(' > ');

                console.log(path);
            });
        });
    </script>
</head>
<body>
    <div>
        <ul>
            <li>
                <a href="#">点击我</a>
            </li>
        </ul>
    </div>
</body>
</html>

在上面的代码中，我们首先引入了jQuery库。然后，在DOM加载完成后，注册了一个点击事件监听器。当任意一个标签被点击时，会触发事件处理函数。

事件处理函数中，我们使用了parents()方法来获取所有父元素，使用map()方法遍历父元素，返回它们的标签名。最后，我们将结果反转并使用”>”符号连接起来，并打印在浏览器的控制台中。

假设我们点击了上面示例代码中的标签，控制台会打印出以下内容：