文档章节

polymer中的选择器

孟飞阳
 孟飞阳
发布于 2017/07/02 11:36
字数 346
阅读 48
收藏 0

原文地址:https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-api

The following methods and properties are provided.

Adding and removing children:

  • Polymer.dom(parent).appendChild(node)
  • Polymer.dom(parent).insertBefore(node, beforeNode)
  • Polymer.dom(parent).removeChild(node)
  • Polymer.dom.flush()

Calling append/insertBefore adds the node to parent's light DOM. In order to insert/append into the local DOM of a custom element, use a node in the local DOM as a parent (or this.root, which is the root of the local DOM).

Parent and child APIs:

  • Polymer.dom(parent).childNodes
  • Polymer.dom(parent).children
  • Polymer.dom(node).parentNode
  • Polymer.dom(node).firstChild
  • Polymer.dom(node).lastChild
  • Polymer.dom(node).firstElementChild
  • Polymer.dom(node).lastElementChild
  • Polymer.dom(node).previousSibling
  • Polymer.dom(node).nextSibling
  • Polymer.dom(node).textContent
  • Polymer.dom(node).innerHTML

Note: When working with light DOM children, you may want to consider using the distributed children or effective children APIs. See Work with light DOM children for details.

Query selector:

  • Polymer.dom(parent).querySelector(selector)
  • Polymer.dom(parent).querySelectorAll(selector)

Content APIs:

  • Polymer.dom(contentElement).getDistributedNodes()
  • Polymer.dom(node).getDestinationInsertionPoints()

Node mutation APIs:

  • Polymer.dom(node).setAttribute(attribute, value)
  • Polymer.dom(node).removeAttribute(attribute)
  • Polymer.dom(node).classList

Using these node mutation APIs when manipulating children ensures that shady DOM can distribute content elements dynamically. If you change attributes or classes that could affect distribution withoutusing the Polymer.dom API, call distributeContent on the host element to force it to update its distribution.

Work with local DOM

Every Polymer element has a this.root property which is the root of its local DOM tree. You can manipulate the tree using Polymer.dom methods:

// Append to local DOM
var toLocal = document.createElement('div');
Polymer.dom(this.root).appendChild(toLocal);

// Insert to the local DOM
var toInsert = document.createElement('div');
var beforeNode = Polymer.dom(this.root).childNodes[0];
Polymer.dom(this.root).insertBefore(toInsert, beforeNode);

You can use the automatic node finding feature to locate local DOM nodes:

var item = document.createElement('li');
Polymer.dom(this.$.list).appendChild(item);

You can also locate nodes in the local DOM using querySelectorquerySelectorAll, or the $$utility method:

var cancelButton = Polymer.dom(this.root).querySelector('#cancelButton');

// Shorthand for finding a local DOM child by selector
// (equivalent to the above):
this.$$('#cancelButton');

© 著作权归作者所有

孟飞阳
粉丝 214
博文 1021
码字总数 559974
作品 5
朝阳
个人站长
私信 提问
Shadow DOM系列6-综述

Web Components 系列主要由自定义元素(Custom Elements)、HTML 引入(HTML Imports)和影子 DOM(shadow DOM) 组成,而 Shadow DOM 无疑是当中的重中之重。本文对下面翻译的几篇文章进行综...

一配
2015/08/11
0
0
Polymer 更新路线图,3.0 将于 I / O 大会上正式发布

在 2013 年的 Google I/O 大会上,Google 对外发布了 Web UI 框架 Polymer 。作为亲儿子,之后在每年的 Google I/O 大会上基本都能看到 Polymer 的身影,Polymer 也不出意料地将在下周的 I/...

王练
2018/05/06
1K
1
使用Yeoman和Polymer创建Web应用

  Allo’Allo’。大多数人都很清楚高效的Web应用开发有多重要。在你进行某些乏味的项目开发时,你会因为各种令你头痛的事情而感到焦虑、烦躁,比如寻找项目模板、配置项目基础架构、开发环...

彬Goooo
2014/04/03
2.8K
2
Polymer 1.0 升级指南

在最近结束的 Google IO 2015,Google 发布了期待已久的 Polymer 1.0,并宣布可用于生产环境,使用 Polymer 库的人们还在使用开发预览版,本文将做为一个指南,指导将现在应用迁移到 Polyme...

oschina
2015/07/16
3.6K
9
Polymer 1.0.0 发布,Web 组件构建框架

Polymer 1.0.0 发布,自从 0.5 开发者预览版发布以后,Polymer 主要关注跨浏览器性能,对开发者更友好。新的库在 Chrome 比之前快 3x,在 Safari 快 4x,而且代码量比之前的开发者预览版还少...

oschina
2015/06/03
2.7K
5

没有更多内容

加载失败,请刷新页面

加载更多

NIO基于长度域的报文在Netty下的解码

1, 先复习一下粘包/拆包 1.1, 粘包/拆包的含义 TCP是个“流”协议, 并不了解上层业务数据的具体含义, 它会根据TCP缓冲区的实际情况进行包的划分,所以在业务上认为,一个完整的包可能会被TCP...

老菜鸟0217
今天
8
0
从零开始搭建spring-cloud(2) ----ribbon

在微服务架构中,业务都会被拆分成一个独立的服务,服务与服务的通讯是基于http restful的。Spring cloud有两种服务调用方式,一种是ribbon+restTemplate,另一种是feign。 其实我们已经在上...

Vincent-Duan
今天
19
0
get和post的区别?

doGet:路径传参。效率高,安全性差(get的传送数据量有限制,不能大于2Kb) doPOST:实体传参。效率低,安全性好 建议: 1、get方式的安全性较Post方式要差些,包含机密信息的话,建议用Pos...

花无谢
昨天
4
0
当谈论迭代器时,我谈些什么?

当谈论迭代器时,我谈些什么? 花下猫语:之前说过,我对于编程语言跟其它学科的融合非常感兴趣,但我还说漏了一点,就是我对于 Python 跟其它编程语言的对比学习,也很感兴趣。所以,我一直...

豌豆花下猫
昨天
14
0
10天学Python直接做项目,我做了这5件事

初学者如何尽快上手python? 市面上关于如何学python的资料很多,但是讲的都太复杂。 我就是很简单的几句话,从小白到开发工程师,我只做了五件事。 我觉得任何商业计划书如果不能用几句话讲...

Python派森
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部