Question

Polymer.dart 1.x中有几种方法可以在DOM中查找元素。有什么不同。

Answer 1

  <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>

app_element.dart包含此导入

import 'dart:html' as dom;

使用shady DOM（默认）

$["shadow1"]（仅适用于静态添加的元素）
- shadow1
dom.querySelectorAll('div')
- （由Polymer动态插入<div hidden>）
- top
- shadow1
- shadow2
- child1
- child2
querySelectorAll('div')
- shadow1
- shadow2
- child1
- child2
Polymer.dom(this).querySelectorAll('div')
- child1
- child2
Polymer.dom(this.root).querySelectorAll('div')
- shadow1
- shadow2
$$('div')（返回此选择器找到的第一个元素）
- shadow1

使用shadow DOM（全局设置选择加入）

$["shadow1"]（仅适用于静态添加的元素）
- shadow1
dom.querySelectorAll('div')
- （由Polymer动态插入<div hidden>）
- top
- child1
- child2
querySelectorAll('div')
- child1
- child2
Polymer.dom(this).querySelectorAll('div')
- child1
- child2
Polymer.dom(this.root).querySelectorAll('div')
- shadow1
- shadow2
$$('div')（返回此选择器找到的第一个元素）
- shadow1

当然可以使用.querySelectorAll(...) .querySelector(...)，但因为它总会返回.querySelectorAll(...)返回的其中一个元素，但我没有明确地添加这些示例。

启用shadow DOM在Polymer.dart 0.17中的工作方式与解释here for Polymer.js

相同

在Polymer 1.0中查找元素的不同方法有哪些

1 个答案: