Question

我正在做一个副项目，在该项目中生成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调试器中看到的元素）是影子根。

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

someNode.shadowRoot.querySelectorAll("a");

或类似的

任何帮助或见识将不胜感激。

Answer 1

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

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

......表示在加载主体后，将加载聚合物特定的自定义元素。

因此，要解决此问题，您需要在加载特定元素后发送一个事件，并让主体使用addEventListener来监听它。

但是，当涉及到Polymer时，这不是您应该考虑的方式。

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

~~我将建立一个行为并将其添加到custom-tag2中，并且每次您想使用自定义元素中的<a>标签进行任何操作时，只需添加该行为即可元素。~~ （我查了一下，它只用于聚合物1）

我会改用mixin共享对<a>标签有作用的代码。

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

希望至少能提供一些指导。

Answer 2

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

querySelectorAll不返回DOM

2 个答案: