我正在尝试通过 JavaScript/CSS 修改页面（很像 Stylish 或 Greasemonkey 所做的）。这是一个非常复杂的页面（我没有构建，或者无法修改预渲染），这使得构建 CSS 选择器变得困难（手动查看文档结构）。我怎样才能做到这一点？
获取元素的 CSS 选择器（当它没有 id 时）
IT技术
javascript
dom
css-selectors
2021-01-17 23:57:11
6个回答
function fullPath(el){
var names = [];
while (el.parentNode){
if (el.id){
names.unshift('#'+el.id);
break;
}else{
if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
else{
for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
names.unshift(el.tagName+":nth-child("+c+")");
}
el=el.parentNode;
}
}
return names.join(" > ");
}
console.log( fullPath( $('input')[0] ) );
// "#search > DIV:nth-child(1) > INPUT:nth-child(1)"
这似乎是您所要求的，但您可能会意识到这并不能保证唯一标识一个元素。（对于上面的示例，所有同级输入也将匹配。）
编辑：更改代码以使用nth-child而不是 CSS 类来正确消除单个孩子的歧义。
我发现我实际上可以使用来自 chrome devtools 源的这段代码来解决这个问题，而无需进行那么多修改。
在WebInspector.DOMPresentationUtils从新命名空间添加相关方法并修复一些差异后，我简单地这样称呼它：
> UTILS.cssPath(node)
实现示例 见css_path.js
使用安装了 FireBug 的 FireFox。
- 右键单击任何元素
- 选择“检查元素”
- 右键单击 HTML 树中的元素
- 选择“复制 XPath”或“复制 CSS 路径”
此答案 (XPath) 的永久链接的输出：
/html/body/div[4]/div[2]/div[2]/div[2]/div[3]/table/tbody/tr/td[2]/table/tbody/tr/td/div /一个
CSS 路径：
html body.question-page div.container div#content div#mainbar div#answers div#answer-4588287.answer table tbody tr td table.fw tbody tr td.vt div.post-menu a
但关于这个评论：
我的最终目的是为对象创建一个 css 选择器......
如果这是您的意图，那么通过 JavaScript 可能有更简单的方法：
var uniquePrefix = 'isThisUniqueEnough_';
var counterIndex = 0;
function addCssToElement(elem, cssText){
var domId;
if(elem.id)domId=elem.id;
else{
domId = uniquePrefix + (++counterIndex);
elem.id = domId;
}
document.styleSheets[0].insertRule("#"+domId+"{"+cssText+"}");
}
对于不同的浏览器，最后一行可能需要以不同的方式实现。没有测试。
检查这个 CSS 选择器生成器库@medv/finder
- 生成最短选择器
- 每页唯一的选择器
- 稳定稳健的选择器
- 2.9 kB gzip 并缩小大小
生成的选择器示例：
.blog > article:nth-child(3) .add-comment
function getCssSelector(el)
{
names = [];
do {
index = 0;
var cursorElement = el;
while (cursorElement !== null)
{
++index;
cursorElement = cursorElement.previousElementSibling;
};
names.unshift(el.tagName + ":nth-child(" + index + ")");
el = el.parentElement;
} while (el !== null);
return names.join(" > ");
}