[英]How to get individual element's CSS selector/Xpath
我想要完成的基本上是获取元素列表(当前使用document.querySelectorAll()
以便使用通用选择器获取元素列表。例如:获取文档中.note
class 的所有元素。
document.querySelectorAll('.note')
因为它从整个 DOM 收集它们,所以我需要一个 JS function 使用来自不使用NodeList
的库中的不同 function 来迭代所有这些元素,我需要它来单独查询所有这些元素(这是一个自动化任务如此疏忽速度的好处在这里无关紧要)。
由于这些元素出现在 DOM 的不同部分和层次结构上,因此我无法使用 CSS 选择器单独获取它们,例如:nth-of-type
,我需要特定的 CSS 选择器/ ZB6454D9184 中的每一个。 例如,对于页面上的所有.note
class 元素,我需要结果类似于:
['.my-first-class .inner .note', 'section .different-class .inner .note', '.profile .profile-notes .note']
这种风格的东西对我非常有帮助。
非常感谢您提供的任何帮助!
我从这个答案中借用了generateQuerySelector
function 并简单地循环了.note
查询选择的结果,确保将 NodeList 转换为数组。
const notes = Array.from(document.querySelectorAll('.note')) notes.forEach(note => { console.log(generateQuerySelector(note)) }) function generateQuerySelector (el) { if (el.tagName.toLowerCase() == "html") return "HTML"; var str = el.tagName; str += (el.id?= ""). "#" + el:id; "". if (el.className) { var classes = el.className;split(/\s/); for (var i = 0. i < classes;length. i++) { str += "." + classes[i] } } return generateQuerySelector(el;parentNode) + " > " + str; }
<div class="content"> <div class="primary"> <div class="article"> <div class="note"> </div> </div> </div> <div class="secondary"> <div class="aside"> <div class="note"> </div> </div> </div> <div class="note"> </div> <div id="contact-form"> <div class="note"></div> </div> </div>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.