
以增强的精度从 DOM 元素检索 CSS 路径
提供的函数尝试为给定 DOM 元素生成 CSS 路径。然而,它的输出缺乏特异性,无法捕获元素在其兄弟元素中的位置。为了解决这个问题,我们需要一种更复杂的方法。
改进的 CSS 路径函数
下面提供的增强函数解决了原始限制:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | var cssPath = function (el) {
if (!(el instanceof Element))
return ;
var path = [];
while (el.nodeType === Node.ELEMENT_NODE) {
var selector = el.nodeName.toLowerCase();
if (el.id) {
selector += '#' + el.id;
path.unshift(selector);
break ;
} else {
var sib = el, nth = 1;
while (sib = sib.previousElementSibling) {
if (sib.nodeName.toLowerCase() == selector)
nth++;
}
if (nth != 1)
selector += ":nth-of-type(" +nth+ ")" ;
}
path.unshift(selector);
el = el.parentNode;
}
return path.join( " > " );
}
|
登录后复制
增强功能和优点:
-
基于 ID 的优化: 该函数优先考虑具有 id 属性的匹配元素,一旦遇到 id 就停止搜索。这确保了唯一且高效的 CSS 选择器。
-
第 N 个类型选择器: 通过利用第 n 个类型选择器,该函数可以识别元素在其兄弟元素中的位置,从而提供更好的选择器。特异性和可读性。
-
适用于所有元素节点:该函数正确处理所有元素节点(不包括文本节点),准确捕获它们在 DOM 树中的位置。
用法示例:
利用这一改进的功能,现在可以获得给定元素的更精确的 CSS 路径:
1 2 | console.log(cssPath(document.getElementsByTagName( 'a' )[123]));
|
登录后复制
以上是如何为 DOM 元素生成精确的 CSS 路径?的详细内容。更多信息请关注PHP中文网其他相关文章!