polymer中的选择器

2019独角兽企业重金招聘Python工程师标准>>>

原文地址：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 querySelector, querySelectorAll, 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');

转载于:https://my.oschina.net/u/2391658/blog/1113936