如何使用Polymer查询元素DOM的Selector元素 [英] How to querySelector elements of an element's DOM using Polymer
问题描述
我有我的元素:
<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?
Is it possible to do that using Polymer built-in's ? Or should I use the default DOM api ?
推荐答案
Polymer不会不提供帮助功能或抽象功能,该功能或抽象功能会从本地和列出节点DOM.
Polymer does not provide a helper function or abstraction that will list nodes both from the light and local DOMs.
如果需要此功能,则可以使用this.querySelector(selector)
.
If you require this functionality, you can use this.querySelector(selector)
.
另一方面,除了Polymer.dom(this.root).querySelectorAll(selector)
方法之外,Polymer还提供了$$
实用程序功能,该功能有助于访问元素的本地DOM的成员.该功能的用法如下:
On a side note, aside from the Polymer.dom(this.root).querySelectorAll(selector)
method, Polymer also provides the $$
utility function which helps in accessing members of an element's local DOM. This function is used as follows:
<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 元素.
Note that, unlike querySelectorAll
, the $$
function only returns one element: the first element in the local DOM which matches the selector.
这篇关于如何使用Polymer查询元素DOM的Selector元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!