querySelectorAll 未返回 DOM 中的所有元素

Question

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

长话短说，当我调用querySelectorAll时，它不会return，例如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");

它会return一个空列表。我必须做这样的事情：

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

为了获取锚元素列表！

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

备注： Polymer 3 服务器是运行。由于某些元素（至少我在 Chrome 的调试器中看到的那些元素）是 shadow roots.

，情况可能会变得复杂

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

someNode.shadowRoot.querySelectorAll("a");

或类似。

Answer 1

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

Answer 2

如果您在所有 custom-tagX 元素的 ready 方法中执行 console.log（并且在 < 中的 onload body>), 然后你就会明白为什么了。你会看到的结果看起来像这样......

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

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

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

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

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

~~我会改为构建一个行为，并将其添加到 custom-tag2，每次你想用自定义元素中的 <a> 标签做任何你想做的事情时，只需将该行为添加到元素即可。~~ (我查了一下，是Polymer 1)

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

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

querySelectorAll 未返回 DOM 中的所有元素

querySelectorAll not returning all elements in DOM

javascript

dom

components

web

polymer