logo标签列表

querySelectorAll在DOM中没有返回所有元素

javascriptdomwebpolymercomponents
5
我正在进行一个副业项目，其中HTML文件是生成并发送到前端，在那里使用Polymer 3和其他技术进行格式化和显示。
简而言之，当我调用querySelectorAll时，它不会返回例如文档中的所有锚标签。
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内），等等。

所以，如果我（终于！）获取到了对body的引用，我可以调用：

theBody.querySelectorAll("a");

如果没有找到相应的结果，它会返回一个空列表。我需要进行如下处理：

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

为了获取锚点元素列表！
但是，如果锚点存在于其他地方，则不会获取它们。
注意： Polymer 3服务器正在运行。 有些元素（至少在Chrome的调试器中看到的）可能是影子根。
因此，有时我们会这样做：
someNode.shadowRoot.querySelectorAll("a");

或类似的。
2个回答
1
如果在所有的自定义标签custom-tagX元素的ready方法中（以及在<body>的onload方法中）执行console.log，那么你将会看到原因。你所看到的结果可能类似于这样...
 body is ready
 custom-tag1 is ready
 custom-tag2 is ready

这段文字的意思是，当页面加载完成后，你的 Polymer 自定义元素才会加载。为了解决这个问题，你需要在特定元素加载完成时发送一个事件，并让 body 使用 addEventListener 监听它。然而，在处理 Polymer 时，你不应该这样想。你为什么要首先使用 标签呢？我建议使用 mixins 来共享处理 标签的代码。

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

-5
是的，抱歉 - 我刚刚修复了那个问题。那不是最初的问题 - 它在我的实际代码中是正确的。当我提出问题时已经是凌晨3点了，我只是忘记打“或”的字 - 对此感到抱歉。问题仍然存在。 - Ginzorf
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接