javascript - 获取元素的 CSS 选择器(当它没有 id 时)

Question

我正在尝试通过 JavaScript/CSS 修改页面(就像 Stylish 或 Greasemonkey 所做的那样)。这是一个非常复杂的页面(我没有构建，或者无法修改预渲染)，这使得构建 CSS 选择器变得很难(手动查看文档结构)。我怎样才能实现这个目标？

Answer 1

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 类，以正确消除单个子项的歧义。