如何使用 Polymer 查询元素 DOM 的Selector 元素答案

【问题标题】：How to querySelector elements of an element's DOM using Polymer如何使用 Polymer 查询元素 DOM 的Selector 元素
【发布时间】：2015-06-04 08:23:13
【问题描述】：

我有我的元素：

<dom-module id="x-el">
  <p class="special-paragraph">first paragraph</p>
  <content></content>
</dom-module>

我喜欢使用它

<x-el>
  <p class="special-paragraph">second paragraph</p>
</x-el>

在我的命令部分：

Polymer({
  is: 'x-el',

  ready: function () {
    /* this will select all .special-paragraph in the light DOM
       e.g. 'second paragraph' */
    Polymer.dom(this).querySelectorAll('.special-paragraph');

    /* this will select all .special-paragraph in the local DOM
       e.g. 'first paragraph' */
    Polymer.dom(this.root).querySelectorAll('.special-paragraph');

    /* how can I select all .special-paragraph in both light DOM and
       local DOM ? */
  }
});

是否可以使用内置的 Polymer 来做到这一点？还是应该使用默认的 DOM api？

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

Polymer 不提供了一个辅助函数或抽象来列出来自轻和本地 DOM 的节点。

如果您需要此功能，可以使用this.querySelector(selector)。

附带说明，除了Polymer.dom(this.root).querySelectorAll(selector) 方法之外，Polymer 还提供了$$ 实用函数，该函数有助于访问元素本地DOM 的成员。该函数的使用如下：

<dom-module id="my-element">
  <template>
    <p class="special-paragraph">...</p>
    <content></content>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-element',
    ready: {
      this.$$('.special-paragraph'); // Will return the <p> in the local DOM
    }
  });
</script>

请注意，与querySelectorAll 不同，$$ 函数仅返回一个元素：本地 DOM 中与选择器匹配的 first 元素。

【讨论】：

可能值得澄清的是，this.$$.(selector) 返回元素 local DOM 中与 selector 匹配的 first 节点。
感谢您的提示，@benhjt！我进行了澄清。 :)
@VartanSimonian 感谢您的解决方案！我认为这是聚合物的一个不起眼的特性。 this 指的是元素，那为什么 Polymer.dom(this) 只用于操作 light DOM 呢？我认为这有点令人困惑。
@발렌탕 我可以看到它怎么会有点迷惑！我当然有时会纠结。一种思考方式是 this 总是，正如您正确指出的那样，总是指代元素本身。 Polymer.dom(...) 是一种包装器，可确保在您修改 DOM 时，它得到正确修改，无论您是否给它 this，这将编辑轻 DOM，或this.root 以利用本地 DOM。标准 DOM 不知道 Polymer 在做什么，因此使用了这个包装器！如果我按照您的喜好回答了您的问题，您介意将其标记为答案吗？ :)
@VartanSimonian 再次感谢我亲爱的人，这确实很有帮助，继续跟踪 Polymer 的精彩演讲！

【解决方案2】：

您可以记住的另一个解决方案是：

var elements = this.shadowRoot.querySelectorAll("input")

【讨论】：

我的问题是关于聚合物 1