js统计元素元素路径，获取某元素相对指定父元素得路径

最新推荐文章于 2023-04-27 17:46:24 发布

开心大表哥

最新推荐文章于 2023-04-27 17:46:24 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js算法文章标签： js

本文链接：https://blog.youkuaiyun.com/a419419/article/details/79113976

js算法专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现获取HTML文档中特定元素相对于指定父元素的XPath路径的方法。通过递归函数，能够准确地定位到目标元素并返回其路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js获取某元素相对指定父元素得路径，例如：
这里写图片描述
想看html文档树：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <ul>
                <li><span id="span1"></span></li>
                <li><span id="span2"></span></li>
             </ul>
        </div>
        <div id="container">
           <div>
             <ul>
                <li><span id="span3"></span></li>
                <li><span id="span4"></span></li>
             </ul>
           </div>
           <div>
             <ul>
                <li><span id="span6"></span></li>
                <li><span id="span7"></span></li>
             </ul>
           </div>
        </div>
    </body>
</html>

然后是js:

<script>
        //xpath解释器
        var Interpreter = (function(){
            //获取兄弟元素名称
            function getSublingName(node){
                //如果存在兄弟元素
                if(node.previousSibling){
                    var name='',//放回得兄弟元素名称字符串
                    count =1,//紧邻兄弟元素中相同名称元素个数
                    nodeName = node.nodeName, //原始节点名称
                    sibling = node.previousSibling;//前一个兄弟元素
                    //如果存在前一个兄弟元素
                    while(sibling){
                        //如果节点为元素 并且节点类型与前一个兄弟元素类型相同，并且前一个兄弟元素名称存在
                        if(sibling.nodeType==1&&sibling.nodeType===node.nodeType&&sibling.nodeName){
                            //如果节点名称和前一个兄弟元素名称相同
                            if(nodeName == sibling.nodeName){
                                //节点名称后面添加计数
                                name += ++count;
                            }else{
                                //重置相同紧邻节点名称节点个数
                                count=1;
                                //追加新得节点名称
                                name += '|'+sibling.nodeName.toUpperCase();
                            }
                        }
                        //向前获取前一个兄弟元素
                        sibling=sibling.previousSibling;
                    }
                    return name;
                    //否则不存在兄弟元素放回
                }else{
                    return '';
                }
            }
            //参数1 node：目标节点 参数二 wrap: 容器节点
            return function(node,wrap){
                //路径数组
                var path = [],//如果不存在容器节点， 默认为document
                wrap = wrap||document;
                //如果当前（目标）节点等于容器节点
                if(node===wrap){
                    //容器节点为元素
                    if(wrap.nodeType==1){
                        //路径数组中输入容器节点名称
                        path.push(wrap.nodeName.toUpperCase());
                    }
                    //返回最终路径数组结果
                    return path;
                }
                //如果当前节点的父节点不等于容器节点
                if(node.parentNode!==wrap){
                    //对当前节点的父节点执行遍历操作
                    path=arguments.callee(node.parentNode,wrap);
                }
                //如果当前节点得父节点与容器节点相等
                else{
                    //容器节点为元素
                    if(wrap.nodeType==1){
                        //路径数组中输入容器节点名称
                        path.push(wrap.nodeName.toUpperCase());
                    }
                }
                //获取元素得兄弟元素名称统计
                var sublingsNames = getSublingName(node);
                //如果节点为元素
                if(node.nodeType == 1){
                    //输入当前结点元素名称及其前面兄弟元素名称统计
                    path.push(node.nodeName.toUpperCase()+sublingsNames);
                }
                //返回最终路径数组结果
                return path;
            }
            //立即执行方法
        })();
    var path = Interpreter(document.getElementById('span1'));
    var path1 = Interpreter(document.getElementById('span4'),document.getElementById('container'));
    var path2 = Interpreter(document.getElementById('span6'));
    console.log(path.join('>'))
    console.log(path1.join('>'))
    console.log(path2.join('>'))
    </script>