Javascript 如何获得单个元素'；CSS选择器/Xpath

我试图完成的基本任务是获取元素列表（当前使用

document.querySelectorAll（）

），以便使用常规选择器获取元素列表。 例如：获取文档中

类的所有元素

document.querySelectorAll（'.note'）

由于它从整个DOM中收集这些元素，因此我需要一个JS函数来使用不使用
NodeList
的库中的不同函数对所有元素进行迭代，并且我需要它单独查询所有这些元素（这是一项自动化任务，因此速度的疏忽好处在这里无关紧要）

由于这些元素出现在DOM的不同部分和层次结构上，我无法使用CSS选择器（如
：nth of type
）单独获取它们，我需要每个元素的特定CSS选择器/XPath。
例如，对于页面上的所有
.note
类元素，我需要的结果如下：

['.my first class.inner.note'、'.section.different class.inner.note'、'.profile.profile notes.note']

这种风格的东西对我非常有帮助

非常感谢您提供的任何帮助！
我从中借用了一个
generateQuerySelector
函数，并简单地循环了
的结果。注意
查询选择，确保将节点列表转换为数组


const notes=Array.from（document.querySelectorAll（'.note'））
notes.forEach（note=>{
console.log（generateQuerySelector（注意））
})
函数生成器选择器（el）{
if（el.tagName.toLowerCase（）=“html”）
返回“HTML”；
var str=el.tagName；
str+=（el.id！=”）？“#”+el.id:”；
if（el.className）{
var classes=el.className.split（/\s/）；
对于（var i=0；i”+str；
}

Css不能写下来，它只能以你想要的方式显示你想要的任何东西

body *{ display: block} /* only if you want single column */  
.wanted::after{ content: ' wanted '; float: right; background: red; color: #000; margin: 0 5px; padding: 0 5px}  
p.wanted::after{ content: 'I am a <p>'; background: #cf8;}  
div.wanted::after{ content: 'I am a <div>'; background: yellow}  
a.wanted::after{ content: 'href me';background: orange}  

<div>div</div>  
<a href="">link</a>  
<p>paragraph</p>  
<a class="wanted">link</a>  
<a href="">link</a>  
<div>div</div>  
<div class="wanted">div</div>  
<a href="">link</a>  
<a class="wanted">link</a>  
<nav class="wanted">nav</nav>  
<div class="wanted"> div </div>  
<div>div</div>  
<p>paragraph</p>  
<div class="wanted"> div </div>  
<p class="wanted">paragraph</p>  
<a href="">link</a>  
<div class="wanted"> div </div>  
<a class="wanted">link</a>  
<a class="wanted">link</a>  
<div class="wanted"> div </div>  
<p class="wanted">paragraph</p>  
<div>div</div>  
<div class="wanted"> div </div>  
<a href="">link</a>  
<div class="wanted"> div </div>  
<p class="wanted">paragraph</p>  
<div>div</div>  
<a class="wanted">link</a>  
<div class="wanted"> div </div>  
<div>div</div>  
<p>paragraph</p>  
<div class="wanted"> div </div>  
<div>div</div>  
<p class="wanted">paragraph</p>  
<a href="">link</a>  
<a class="wanted">link</a>  
<div>div</div>  

body*{display:block}/*仅当需要单列时使用*/
.wanted：：在{content:'wanted'；float:右；背景：红色；颜色：#000；边距：0 5px；填充：0 5px}之后
p、 通缉令：：在{content:'I am a'之后；背景：#cf8；}
div.want:：在{内容：'我是一个'；背景：黄色}之后
a、 通缉犯：：在{内容：'href me'；背景：橙色}之后
div
段落

div
div
div
div
段落
div
链接
div
我的意见：使用
id
——这就是我所做的——我在这里为此受到了批评：“查询选择器废话！！！”您是否需要使用不使用NodeList的函数，因为您支持旧IE？因此您需要具有三级父级的列表？@iAmOren如果可以追溯性地将ID添加到网站上的数百个元素中，我没有直接编辑权限，这当然是有益的。不幸的是，我必须使用我得到的东西，使用特定的CSS/Xpath。@camaulay我不是通过浏览器使用它，而是使用Nightwatch.js中内置的自动化测试，Nightwatch不直接与浏览器交互，而是通过Selenium驱动程序，它不会返回NodeList对象。哇，真不敢相信我没有想到只在p上执行递归阿伦茨！我想我也担心性能，但正如我所说，速度不是大问题，所以这很有帮助。我确实注意到这不会唯一标识元素，但我决定通过将以前查询的元素与列表中的当前元素进行比较来解决这一问题，如果它们相同，请添加
nth-child（）
根据计数器选择选择器。谢谢！啊，是的
nth-child（）
将允许您选择特定的兄弟姐妹，祝您好运！