获取 HTML 元素的 CSS 选择器/路径答案

【问题标题】：Get CSS Selector/Path of HTML elements获取 HTML 元素的 CSS 选择器/路径
【发布时间】：2020-12-18 03:06:48
【问题描述】：

我使用

过滤了 HTML 类元素

elements = document.querySelectorAll("div._3arMG")

现在我有了所需的 HTML 元素列表，我想要 elements 列表中每个 HTML 元素的 CSS 选择器/路径。

CSS 选择器，当我在控制台中右键单击 HTML 元素时 -> Copy -> Copy Selector -> #root > div._3arMG

请建议我如何使用 Javascript 获取此 CSS 选择器？

【问题讨论】：

标签： javascript html jquery css css-selectors

【解决方案1】：

您可以使用parentElement 递归地为上面的下一个节点执行此操作。通过nodeName 为每个节点获取标记名，使用classList 和id 的类。

已编辑：因为 ID 是唯一的，如果路径中出现 id，我将停止。

let elements = document.querySelectorAll("div._3arMG");

let result = [];
elements.forEach(el => {
    result.push(getPath(el));
})
console.log(result);

function getPath(el) {
    let act = el.nodeName;
    el.classList.forEach(cl => act += '.' + cl);
    if (el.id) act += '#' + el.id;
        
    if (!el.id && el.parentElement) {
        let res = getPath(el.parentElement);
        res.push(act);
        return res;
    } else {
        return [act];
    }
}

<div class='Wrapper'>
  <div class="_3arMG myClass">
    Test
  </div>
  <table id='myTable'>
    <tr>
      <td>
        <div class="_3arMG">My span</div>
      </td>
    </tr>
  </table>
</div>

【讨论】：

由于 ID 应该是唯一的，当它碰到具有 id 的元素时，您可以（可能）停止。
@freedomn-m - 我也提出了这个建议，但是 OP 向我们展示了 -> Copy -> Copy Selector -> #root > div._3arMG id root 在路径中的位置，因此我将其构建完成。
“复制 -> 复制选择器”是在浏览器中进行的操作 :) （并不是说包含整个树是错误的 - 有点难以看出 OP 想要什么以及为什么）
@freedomn-m - 我现在改了，因为我发现这真的不是路径的一部分；）

【解决方案2】：

您可以使用Element.querySelector() 或Element.querySelectorAll()，选择适合您的情况

const elements = document.querySelectorAll("div._3arMG")

for (const element of elements){
  const subElements = element.querySelectorAll('.someclass')
  // or
  const subElement = element.querySelector('.someclass')
  
  // ... 
}

参考

Element.querySelector()

Element.querySelectorAll()

【讨论】：

by .someClass ，你的意思是 unique id/class 对于elements 中的每个 HTML 元素？
@SaiAvinashDuddupudi 它查询您定义的选择器的所有后代元素，.someclass 这里只是示例。如果每个后代元素都有自己的 id，则不需要像这样查询，在这种情况下只需使用`document.getElementById()`。如果我误解了你的意思，请纠正我
Element.queryseelctor() 不返回 seelctor。没听懂你说的