在 JavaScript 中获取现有 document.querySelector 的参数？答案

【问题标题】：Get the argument of an existing document.querySelector in JavaScript?在 JavaScript 中获取现有 document.querySelector 的参数？
【发布时间】：2021-12-28 16:38:42
【问题描述】：

有没有办法在 JavaScript 中获取document.querySelector 的字符串参数？

例如，假设我有这个现有的选择器：

const myElement = document.querySelector("div[some-complicated=selector]");

有没有办法直接从myElement得到"div[some-complicated=selector]"？

我知道理论上我可以将选择器本身放入一个变量中，然后将该变量传递给querySelector，然后在其他地方引用该变量。但如果可能的话，我想避免这样做。

我的实际用例是事件委托；我想避免重复相同的选择器。所以目前我正在做：

document.querySelectorAll("[data-component=tabs]").forEach((element) => {
  const tabs = element.querySelectorAll("[role=tab]");

  document.addEventListener("click", (event) => {
    if(!(event.target.matches("[role=tab]") && event.path.indexOf(element) > -1)) {
      return;
    }

    // Do stuff...
  });
});

所以基本上我想从querySelectorAll 中提取选择器字符串，这样我就可以将它传递给matches 方法，但不必改变[role=tab]。

【问题讨论】：

不，length 是 NodeList 中的唯一属性，并且没有任何方法可以获取用于创建列表的选择器。
好的，那么节点呢？假设我使用的是querySelector 还是querySelectorAll(selector)[0]？我简要查看了Node 文档并没有看到任何内容，但是该页面不包含classList 之类的内容，所以我一定遗漏了一些东西。
节点不知道引用是如何获取的。变量有什么问题？
它本身并没有什么特别的问题，只是看起来很冗长。另外，这似乎应该有一个简单的答案，但由于我不知道，所以我很好奇。
你可以自己写querySelectorAll方法，见jsfiddle.net/6nxp1kjw。

标签： javascript string dry

【解决方案1】：

好的，@Teemu 的评论让我陷入了困境，我通过Element.attributes 找到了一种迂回的方法。它不漂亮，并没有真正节省我试图避免的任何冗长，不仅仅是通过简单地改变选择器字符串，而是为了思想实验，我想我会在这里发布一个解决方案（我可以看到它有在某些情况下实际使用，但确实应该有一个原生 API）。

本质上，我可以通过以 CSS 选择器的形式将所有属性连接在一起来重构选择器。

Array.from(element.attributes).map((attribute) => `[${attribute.name}='${attribute.value}']`).join("");

或者如果在我的实际示例中使用querySelectorAll：

Array.from(elements[0].attributes).map((attribute) => `[${attribute.name}='${attribute.value}']`).join("");

请注意，这不会重新创建实际用于查询元素的选择器，而是根据给定元素的所有属性创建一个选择器，这有点令人沮丧。但在我的事件委托示例中，这就足够了。

从理论上讲，您甚至可以将其缩小到特定属性（例如role），或者甚至只是通过classList 而不是所有attributes。例如：

Array.from(elements.classList).map((className) => `.${className}`).join("");

就像我说的，对我没有帮助，但回答了问题。

【讨论】：