[英]How to get individual element's CSS selector/Xpath
What I am trying to accomplish is basically, to get a list of Elements ( currently using document.querySelectorAll()
in order to get a list of elements using a general selector. Eg: get me all elements of .note
class in the document.我想要完成的基本上是获取元素列表(当前使用
document.querySelectorAll()
以便使用通用选择器获取元素列表。例如:获取文档中.note
class 的所有元素。
document.querySelectorAll('.note')
since it collects them from all over the DOM, I then need a JS function to iterate over all of them using a different function from a library that does not use NodeList
, and I need it to query all these elements individually (This is an automation task so negligent benefits of speed are of no matter here).因为它从整个 DOM 收集它们,所以我需要一个 JS function 使用来自不使用
NodeList
的库中的不同 function 来迭代所有这些元素,我需要它来单独查询所有这些元素(这是一个自动化任务如此疏忽速度的好处在这里无关紧要)。
Since these elements appear on different parts and hierarchies of the DOM, I cannot fetch them all with a CSS selector individually like :nth-of-type
, I need the specific CSS Selector/ XPath of each of them.由于这些元素出现在 DOM 的不同部分和层次结构上,因此我无法使用 CSS 选择器单独获取它们,例如
:nth-of-type
,我需要特定的 CSS 选择器/ ZB6454D9184 中的每一个。 For example, for all .note
class elements on a page, I need the result to be something like:例如,对于页面上的所有
.note
class 元素,我需要结果类似于:
['.my-first-class .inner .note', 'section .different-class .inner .note', '.profile .profile-notes .note']
something in this style would be extremely helpful to me.这种风格的东西对我非常有帮助。
Thank you very much for any assistance you may provide!非常感谢您提供的任何帮助!
I borrowed a generateQuerySelector
function from this answer and simply looped over the results of .note
query selection, being sure to convert the NodeList to an Array.我从这个答案中借用了
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 can't write it down, it can only show you whatever you want in the way you want 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.