JavaScript 实现 XPath
实现一个函数，生成某个 DOM 元素的 xpath，主要包含两部分：标签层级和兄弟元素中的顺序。
<body>
<ul>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
</ul>
</body>
如果传入 id = "span_3" 的元素，那么生成的 xpath 是 body>ul[0]>li[1]>span[2]
思路
我们的参数是目标节点，我们的目标是冒泡到 body，然后记录中间的节点即可。
整个过程是：
- 我们通过 target 先找到了 parentNode，即 li。
- 我们通过 li 找到了 parentNode，即 ul。
- 我们通过 ul 找到了 parentNode，即 body。
- 结束
另外 DOM Node 数据结构大概是：
{
tagName: 'BODY',
children: [
{
tagName: 'UL',
children: [
{
tagName: 'LI',
children: [{
tagName: 'SPAN'
}]
}
]
}
]
}
可以看出 DOM Node 是一种递归的数据结构，因此用递归来实现会非常直观和简洁。 如果不是特别严格的场景，通常也不会有严重性能问题。
关键点
- DFS
- 回溯
- parentNode 获取父节点， children 获取子节点
代码
function helper(node, path) {
if (node === document.body) return `body ${path}`;
const i = Array.prototype.findIndex.call(node.parentNode.children, el => el === node)
return helper(node.parentNode, `${path} > ${node.tagName.toLowerCase()}[${i}]`);
}
function XPath(node) {
return helper(node, '');
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论