querySelectorAll 不返回 DOM 中的所有元素

Posted

技术标签:

【中文标题】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 时,您不应该这样想。

为什么首先要使用&lt;a&gt; 标签?

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

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

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

【讨论】:

【参考方案2】:

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

【讨论】:

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

以上是关于querySelectorAll 不返回 DOM 中的所有元素的主要内容,如果未能解决你的问题,请参考以下文章

DOM扩展

如何在jquery中操作DOM

jquery中如何选择选取DOM元素?

jQuery的基本语法是?

IE8 不支持 querySelectorAll

原生DOM选择器querySelector和querySelectorAll