1

我希望能够使用 Javascript 获取元素的非绝对css 路径，以便随后可以调用：

document.querySelectorAll()

我正在尝试从共享相同css 路径的页面中获取所有元素。

例如使用 Google 的搜索结果页面：

  1. 一个 css 选择器（绝对）将是：
div.g:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > h3:nth-child(1) > div:nth-child(1)
  1. 一个 css 路径（非绝对）将是：
html body#gsr.srp.tbo.vasq div#main div#cnt div.mw div#rcnt div.col div#center_col div#res.med div#search div div#rso div.bkWMgd div.srg div.g div div.rc div.r a h3.LC20lb div.ellip

我看到的每个答案通常都会返回一个元素的绝对路径（css 选择器） - 即第 n 个孩子。例如：从 Dom 元素中获取 CSS 路径。

有没有人知道如何获得适用于页面上多个元素的纯 css 路径？

编辑：我真正要寻找的是 Firefox Web Developer Inspector 工具中的源代码，您可以在其中右键单击并选择“复制 CSS 路径”。如果有人对此有指点，我将不胜感激。

4

1 回答 1

1

这有点困难，因为你必须决定你想要什么级别的特异性。您可以选择包含或忽略标签、ID、类和属性，所有这些都有自己的格式。我写了一个函数来为你做这件事。

nonabsoluteCSS()接受任何元素和布尔值，以确定是否包含元素的标签名称、类、id 和属性。它是递归的，会爬上 DOM 树，直到碰到<body>元素。

如果您想深入了解伪元素和兄弟元素等内容，您可以进一步扩展此功能，但这应该是一个不错的起点。

$(function(){
	$("a").click(function(){
  	console.log(nonabsoluteCSS(this, true, true, true, true));
  });
});

function nonabsoluteCSS(elm, useElements, useClasses, useIds, useAttributes)
{
  if($(elm).length < 1)
  	return false;

  var p = $(elm).parent()[0];
  var e = $(elm)[0];
  
  var output = "";
  
  if(!useElements && !useClasses && !useIds && !useAttributes)
  	output = "*";
  else
  {
    if(useElements)
    	output += e.tagName.toLowerCase();
    if(useClasses)
    {
    	for(var i = 0; i < e.classList.length; i++)
      	output += "."+e.classList[i];
    }
    if(useIds && e.id != "")
    	output += "#"+e.id;
    if(useAttributes)
    {
    	for(var i = 0; i < e.attributes.length; i++)
      {
      	output += "["+e.attributes[i].name+"=\""+e.attributes[i].value+"\"]";
      }
    }
  }
  
  if(p.tagName.toLowerCase() != "body")
  {
  	return nonabsoluteCSS(p, useClasses, useIds, useAttributes) + " " + output;
  }
  else
  {
  	return output;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p class="class1">
    <span class="class2 class3" id="spanid">
      <a href="#">
        Click me to see my CSS path.
      </a>
    </span>
  </p>
</div>

于 2019-09-14T04:48:13.743 回答