原文地址: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');