2020-06-04 querySelectorAll 选取不到元素

Posted 2023-05-09

参考技术A vue项目中，在页面审查元素的时候可以看到div 以及相应的class名，但是实际js操作的时候会获取不到。

在js中，页面元素还没有生成，便执行了querySelectorAll等获取元素的方法，导致获取不到。

延缓这类获取元素方法的时机，使用$nextTick 或者 setTimeout等方法改成异步。

querySelectorAll 不返回 DOM 中的所有元素

【中文标题】querySelectorAll 不返回 DOM 中的所有元素

【英文标题】：querySelectorAll not returning all elements in DOM

【发布时间】：2019-01-25 03:44:09

【问题描述】：

我正在做一个辅助项目，在该项目中生成 HTML 文件并将其发送到前端，使用 Polymer 3 和其他技术对其进行格式化和显示。

长话短说，当我调用querySelectorAll时，它不会返回，例如document中的所有锚标记：

document.querySelectorAll("a");

相反，它似乎只承认标签的存在，如果它们是调用querySelectorAll 的节点的直接子节点。所以，如果我有：

<div>
  <custom-tag1>
    <custom-tag2>
      <a href="http://www.google.com">Google</a>
      <a href="http://www.yahoo.com">Yahoo!</a>
      <a href="http://www.amazon.com">Amazon</a>
    </custom-tag2>
  </custom-tag2>
</div>

我发现我必须首先获取 document 对象，然后是 body 对象，然后是位于 body 对象顶层的任何东西（例如，上面的 div 就在 body 内部）等。

因此，如果我（终于！）获得对主体的引用，我可以调用：

theBody.querySelectorAll("a");

它会返回一个空列表。我必须这样做：

theBody.querySelectorAll("div")[0].querySelectorAll("custom-tag1")[0].querySelectorAll("custom-tag2")[0].querySelectorAll("a");

为了得到一个锚元素的列表！

但是，如果锚点存在于其他任何地方，它就不会得到它们。

注意事项： Polymer 3 服务器正在运行。 由于某些元素（至少我在 Chrome 的调试器中看到的）是 shadow root，因此情况可能会变得复杂。

因此，有时我们最终会这样做：

someNode.shadowRoot.querySelectorAll("a");  

或类似的。

【参考方案1】：

如果您在所有custom-tagX 元素的ready 方法中（以及在body> 中的onload）中执行console.log，那么您就会明白为什么。你会看到的结果看起来像这样......

 body is ready
 custom-tag1 is ready
 custom-tag2 is ready

...这意味着当主体完成加载后，将加载您的 Polymer 特定的自定义元素。

所以要解决这个问题，你需要在加载特定元素时发送一个事件，并让 body 用addEventListener 监听它。

但是，当谈到 Polymer 时，您不应该这样想。

为什么首先要使用<a> 标签？

我会改为构建一个行为，并将其添加到custom-tag2，并且每次您想对自定义元素中的<a> 标记执行任何操作时，只需将该行为添加到该元素即可。 （我查了一下，它只适用于 Polymer 1）

我会改为使用 mixins 来共享对 <a> 标记执行某些操作的代码。

https://www.polymer-project.org/3.0/docs/devguide/custom-elements#mixins

【参考方案2】：

是的！正如@Jonas Wilms 所说，它是“querySelectorAll”。 没有什么叫“querySelectAll”。

【讨论】：

是的，抱歉 - 我刚刚解决了这个问题。不是最初的问题 - 它在我的实际代码中是正确的。当我输入问题时是凌晨 3 点，我只是忘记输入“或”——对此感到抱歉。问题依然存在。