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

梦里梦外; 2022-06-01 04:48 320阅读 0赞

js获取某元素相对指定父元素得路径，例如：  
![这里写图片描述][SouthEast]  
想看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>

[SouthEast]: /images/20220601/8a75eea1e266425b8cd2eb77ee16f02e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，320人围观）

还没有评论，来说两句吧...

相关阅读

相关子元素相对于父元素固定定位

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

ゞ浴缸里的玫瑰/ 2023年06月25日 03:09/ 0 赞/ 41 阅读

相关 JS-数组添加元素、查找元素索引、删除指定元素

经常用到，做一下记录。 1.新增元素 var arr = ['a','b','c',2,'apples'] var arr2 = ['d','e']

一时失言乱红尘/ 2022年12月14日 09:08/ 0 赞/ 291 阅读

相关 js和jquery获取父级元素、子级元素、兄弟元素的方法

原生的JS获取ID为test的元素下的子元素。可以用：比如： <div id="dom"> <div></div> <div></div>

冷不防/ 2022年08月10日 08:51/ 0 赞/ 297 阅读

相关 jquery选择器之获取父级元素、同级元素、子元素

\---------------------转自http://blog.csdn.net/tolcf/article/details/39289471 一、获取父级元素 1

客官°小女子只卖身不卖艺/ 2022年07月26日 00:22/ 0 赞/ 312 阅读

相关 jquery选择器获取父级元素、同级元素、子元素

一、获取父级元素 1、 parent(\[expr\]): 获取指定元素的所有父级元素 <div id="par_div"><a i

缺乏、安全感/ 2022年06月16日 14:46/ 1 赞/ 475 阅读

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

js获取某元素相对指定父元素得路径，例如： ![这里写图片描述][SouthEast] 想看html文档树： <!DOCTYPE html> <htm

梦里梦外;/ 2022年06月01日 04:48/ 0 赞/ 321 阅读

相关 html css样式子元素相对父级元素定位

废话不多说。父级元素样式设置： position:relative; 子元素样式： position: absolute; 这样就可以达到子

系统管理员/ 2022年05月23日 09:30/ 0 赞/ 307 阅读

相关 jquery获取父元素及祖先元素

parent是找当前元素的第一个父节点，parents是找当前元素的所有父节点先说一下parent和parents的区别从字面上不难看出 parent是指取得一

- 日理万妓/ 2022年05月20日 02:22/ 0 赞/ 300 阅读

相关 JS获取当前元素在父元素的下标

var elt= tdSelf; var index = [].indexOf.call(elt.parentNode.querySelectorAll(elt

冷不防/ 2022年05月10日 13:48/ 0 赞/ 212 阅读

相关 CSS 父元素相对位置设置

父元素设置position: relative 子元素设置position: absolute 然后给子元素设置left和top调整位置。当然也可以用margin-top和

痛定思痛。/ 2022年03月18日 07:52/ 0 赞/ 340 阅读