使用jquery实现一个生成某个DOM元素的xpath函数

阳光穿透心脏的1/2处 2022-01-14 03:15 120阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

> 实现一个函数，生成某个DOM元素的xpath，主要包含两部分：标签层级和兄弟元素中的顺序

功能如下：

<body>
    	<ul>
    		<li>
    			<span>1</span>
    		</li>
    		<li>
    			<span>2</span>
    			<span>3</span>
    			<span id="span_3">4</span>
    		</li>
    	</ul>
    </body>

如果传入id="span\_3"的元素，生成的xpath是body>ul\[0\]>li\[0\]>span\[2\] 实现如下文js代码，需引入jquery

function getPath($ele) {
            function path(el, obj) {
              if (el[0].nodeName === 'BODY') {
                obj['BODY'] = ''
                return obj
              } else if (el.parent()[0].nodeName === 'BODY') {
                var children = el.parent().children()
                for (var i = 0, len = children.length; i < len; i++) {
                  if (el[0] === children[i]) {
                    obj[el[0].nodeName] = i
                  }
                }
                obj['BODY'] = ''
                return obj
              } else {
                var children = el.parent().children()
                for (var i = 0, len = children.length; i < len; i++) {
                  if (el[0] === children[i]) {
                    obj[el[0].nodeName] = i
                  }
                }
                path(el.parent(), obj)
              }
            }
            let o = {};
            path($ele, o)
            var str = ''
            for (var k in o) {
              if (o[k] === '') {
                str += k + "&"
              } else {
                str += k + "[" + o[k] + "]" + "&"
              }
            }
            return str.trim().split("&").reverse().join(">").slice(1).toLowerCase()
    }
    
    // 使用
    console.log(getPath($('#test')))

转载于:https://my.oschina.net/u/3150903/blog/3021301

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/8afdad2cd9924effa69b538029d8a5e2.png

发表评论取消回复

表情：

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

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

相关阅读

相关 jQuery 学习-DOM篇（六）：jQuery 替换 DOM 元素

> 推荐阅读 > > Helm3（K8S 资源对象管理工具）视频教程：[https://edu.csdn.net/course/detail/32506][https_

Dear 丶/ 2022年10月27日 05:17/ 0 赞/ 210 阅读

相关 jQuery 学习-DOM篇（四）：jQuery 删除 DOM 元素的方法

> 推荐阅读 > > Helm3（K8S 资源对象管理工具）视频教程：[https://edu.csdn.net/course/detail/32506][https_

雨点打透心脏的1/2处/ 2022年10月24日 05:52/ 0 赞/ 216 阅读

相关 jQuery操作DOM元素

HTML DOM常见操作: 　　查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点. 查找节点　　关于节点的查找,是利用选择器完成的. 插入

妖狐艹你老母/ 2022年08月05日 16:20/ 0 赞/ 279 阅读

相关 jQuery操作DOM元素

作为一个后端程序员，也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。实现上述两个功能当然可以使用原生js来完成，但在实际开

男娘i/ 2022年04月24日 23:52/ 0 赞/ 306 阅读

相关 jQuery——遍历DOM元素的兄弟元素

-------------------- 任务描述本关任务：用 jQuery 遍历 DOM 元素的兄弟元素。效果如下： ![206880][] 相关知识为了完成本

水深无声/ 2022年04月05日 14:00/ 0 赞/ 323 阅读

相关 jQuery——遍历DOM元素的后代元素

-------------------- 任务描述本关任务：用 jQuery 向下遍历 DOM 节点。效果如下： ![206892][] 相关知识为了完成本关任务

傷城~/ 2022年04月05日 13:54/ 0 赞/ 323 阅读

相关 jQuery——遍历DOM元素的祖先元素

任务描述本关任务：用 jQuery 遍历 DOM 的祖先元素。效果如下： ![206887][] 相关知识为了完成本关任务，你需要掌握：1.节点树，2.`pa

梦里梦外;/ 2022年04月05日 13:53/ 0 赞/ 300 阅读

相关 Jquery 操作DOM元素（1）

> 用原生js来操作dom元素其实是一件比较繁琐的事，当JQuery遇到dom操作时会怎样呢？直接上代码，已注释好： <!DOCTYPE html> <h

野性酷女/ 2022年03月17日 02:20/ 0 赞/ 273 阅读

相关使用jquery实现一个生成某个DOM元素的xpath函数

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] > 实现一个函数，生成某个DOM元素的xpath，主要包

阳光穿透心脏的1/2处/ 2022年01月14日 03:15/ 0 赞/ 121 阅读

相关在xpath中使用dom4j直接获取某个元素的方式

第一种形式： /AAA/DDD/BBB：表示一层一层的，AAA下面的DDD下面的BBB 第二种形式： //BBB：表示只要和这个相同的名称（BBB），都可以得到第三种

左手的ㄟ右手/ 2021年06月24日 15:59/ 0 赞/ 353 阅读