我正在做一个副业项目，在该项目中生成 HTML 文件并将其发送到前端，在那里使用 Polymer 3 和其他技术对其进行格式化和显示。
长话短说，当我调用 querySelectorAll 时，它不会返回，例如 document 中的所有 anchor 标记:
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");
为了得到 anchor 元素的列表!
但是，如果 anchor 存在于其他任何地方，它就不会获取它们。
注意事项: Polymer 3 服务器正在运行。 由于某些元素(至少我在 Chrome 调试器中看到的元素)是影子根，情况可能会变得复杂。
因此，有时候，我们最终会这样做:
someNode.shadowRoot.querySelectorAll("a");
或类似的。
最佳答案
如果你做 console.log在你所有的custom-tagX元素' ready方法(和 <body> 中的 onload)，然后你就会明白为什么。你会看到的结果看起来像这样......
body is ready
custom-tag1 is ready
custom-tag2 is ready
...意味着当主体加载完成后，您的 Polymer 特定自定义元素将加载。
所以要解决这个问题，你需要在加载特定元素时发送一个事件，让 body 用 addEventListener 监听它.
但是，当涉及到 Polymer 时，您不应该这样想。
为什么要 <a>标签放在首位？
我会构建一个行为，并将其添加到
(我查了一下，它只是针对 Polymer 1)custom-tag2 ，每次你想用 <a> 做任何你想做的事自定义元素中的标记，只需将该行为添加到元素即可。
我会改为使用 mixin 来共享对 <a> 执行某些操作的代码标签。
https://www.polymer-project.org/3.0/docs/devguide/custom-elements#mixins
关于javascript - querySelectorAll 不返回 DOM 中的所有元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51906557/