在Polymer 1.0中查找元素的不同方法是什么 [英] What are the different ways to look up elements in Polymer 1.0
问题描述
在Polymer.dart 1.x中有几种方法在DOM中查找元素。有什么区别。
< body&
< div id =top>< / div>
< app-element>
< div id =child1>< / div>
< div id =child2>< / div>
< / app-element>
< script type =application / dartsrc =index.dart>< / script>
< / body>
< dom- module id ='app-element'>
< template>
< button on-click =clickHandler>查询< / button>
< div id =shadow1>< / div>
< div id =shadow2>< / div>
< content>< / content>
< / template>
< / dom-module>
app_element.dart / p>
import'dart：html'as dom;
使用阴影DOM（默认）
-
$ [shadow1]（仅适用于静态添加的元素）
-
shadow1
-
-
dom.querySelectorAll div'）
- （a
< div hidden>by Polymer） -
top -
shadow1 -
shadow2 -
child1 -
child2
- （a
-
querySelectorAll（'div'）
-
shadow1 -
shadow2 -
child1 -
child2
-
-
Polymer.dom（this）.querySelectorAll（'div'）
-
child1 -
child2
-
-
Polymer.dom（this.root）.querySelectorAll（'div'）
-
shadow1 -
/ ul> -
$$（'div'）（返回此选择器找到的第一个元素）
-
shadow1
-
使用shadow DOM（全局设置选择启用）
-
$ [shadow1]（仅适用于静态添加的元素）
-
shadow1
-
-
dom.querySelectorAll（'div'）
- （a
< div hidden>由Polymer动态插入） -
top -
child1
child2 - （a
-
-
querySelectorAll（'div'）
-
child1 - code> child2
-
-
Polymer.dom（this）.querySelectorAll （'div'）
-
child1 -
child2
-
-
dom（this.root）.querySelectorAll（'div'）
-
shadow1 -
shadow2
-
-
$$（'div'）（返回此选择器找到的第一个元素）
-
shadow1
-
code> .querySelectorAll（...） .querySelector（...）当然可以使用， .querySelectorAll（...）返回的一个元素我没有明确添加这些示例。
启用shadow DOM在Polymer.dart 0.17中的工作原理与 Polymer for Polymer中所述相同。 js
There are several way in Polymer.dart 1.x to look up elements in the DOM. What are the differences.
<body>
<div id="top"></div>
<app-element>
<div id="child1"></div>
<div id="child2"></div>
</app-element>
<script type="application/dart" src="index.dart"></script>
</body>
<dom-module id='app-element'>
<template>
<button on-click="clickHandler">Query</button>
<div id="shadow1"></div>
<div id="shadow2"></div>
<content></content>
</template>
</dom-module>
The app_element.dart contains this import
import 'dart:html' as dom;
With shady DOM (default)
$["shadow1"](works only for statically added elements)shadow1
dom.querySelectorAll('div')- (a
<div hidden>dynamically inserted by Polymer) topshadow1shadow2child1child2
- (a
querySelectorAll('div')shadow1shadow2child1child2
Polymer.dom(this).querySelectorAll('div')child1child2
Polymer.dom(this.root).querySelectorAll('div')shadow1shadow2
$$('div')(returns the first element found by this selector)shadow1
With shadow DOM (global setting to opt in)
$["shadow1"](works only for statically added elements)shadow1
dom.querySelectorAll('div')- (a
<div hidden>dynamically inserted by Polymer) topchild1child2
- (a
querySelectorAll('div')child1child2
Polymer.dom(this).querySelectorAll('div')child1child2
Polymer.dom(this.root).querySelectorAll('div')shadow1shadow2
$$('div')(returns the first element found by this selector)shadow1
Instead of .querySelectorAll(...) .querySelector(...) can be used of course but because it will always return one of the elements returned by .querySelectorAll(...) I didn't explicitely add these examples.
Enabling shadow DOM works the same in Polymer.dart 0.17 as explained here for Polymer.js
这篇关于在Polymer 1.0中查找元素的不同方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
