Adds a node to the end of the child nodes list of this node.

If the node already exists in this document, it will be removed from its current parent node, then added to this node.

This method is more efficient than nodes.add, and is the preferred way of appending a child node.

@JSName('appendChild')
/**
* Adds a node to the end of the child [nodes] list of this node.
*
* If the node already exists in this document, it will be removed from its
* current parent node, then added to this node.
*
* This method is more efficient than `nodes.add`, and is the preferred
* way of appending a child node.
*/
@DomName('Node.appendChild')
@DocsEditable
Node append(Node newChild) native;

Parses the specified text as HTML and adds the resulting node after the last child of this element.

void appendHtml(String text) {
 this.insertAdjacentHtml('beforeend', text);
}

Adds the specified text as a text node after the last child of this element.

void appendText(String text) {
 this.insertAdjacentText('beforeend', text);
}

@DomName('Element.blur')
@DocsEditable
void blur() native;

@DomName('Element.click')
@DocsEditable
void click() native;

@JSName('cloneNode')
@DomName('Node.cloneNode')
@DocsEditable
Node clone(bool deep) native;

@DomName('Node.contains')
@DocsEditable
bool contains(Node other) native;

Creates an instance of the template. This is only supported if isTemplate is true.

@Experimental
DocumentFragment createInstance() {
 _ensureTemplate();

 var template = ref;
 if (template == null) template = this;

 var instance = _Bindings._createDeepCloneAndDecorateTemplates(
     template.content, attributes['syntax']);

 if (TemplateElement._instanceCreated != null) {
   TemplateElement._instanceCreated.add(instance);
 }
 return instance;
}

@JSName('webkitCreateShadowRoot')
@DomName('Element.webkitCreateShadowRoot')
@DocsEditable
@SupportedBrowser(SupportedBrowser.CHROME, '25')
@Experimental
ShadowRoot createShadowRoot() native;

@DomName('Node.dispatchEvent')
@DocsEditable
bool dispatchEvent(Event event) native;

@DomName('Element.focus')
@DocsEditable
void focus() native;

@DomName('Element.getBoundingClientRect')
@DocsEditable
Rect getBoundingClientRect() native;

@DomName('Element.getClientRects')
@DocsEditable
@Returns('_ClientRectList')
@Creates('_ClientRectList')
List<Rect> getClientRects() native;

The set of all CSS values applied to this element, including inherited and default values.

The computedStyle contains values that are inherited from other sources, such as parent elements or stylesheets. This differs from the style property, which contains only the values specified directly on this element.

PseudoElement can be values such as ::after, ::before, ::marker, ::line-marker.

See also:

• CSS Inheritance and Cascade
• Pseudo-elements

CssStyleDeclaration getComputedStyle([String pseudoElement]) {
 if (pseudoElement == null) {
   pseudoElement = '';
 }
 // TODO(jacobr): last param should be null, see b/5045788
 return window.$dom_getComputedStyle(this, pseudoElement);
}

@DomName('Element.getElementsByClassName')
@DocsEditable
@Returns('NodeList')
@Creates('NodeList')
List<Node> getElementsByClassName(String name) native;

Gets a map for manipulating the attributes of a particular namespace.

This is primarily useful for SVG attributes such as xref:link.

Map<String, String> getNamespacedAttributes(String namespace) {
 return new _NamespacedAttributeMap(this, namespace);
}

@JSName('webkitGetRegionFlowRanges')
@DomName('Element.webkitGetRegionFlowRanges')
@DocsEditable
@SupportedBrowser(SupportedBrowser.CHROME)
@SupportedBrowser(SupportedBrowser.SAFARI)
@Experimental
List<Range> getRegionFlowRanges() native;

@DomName('Node.hasChildNodes')
@DocsEditable
bool hasChildNodes() native;

Inserts element into the DOM at the specified location.

To see the possible values for where, read the doc for insertAdjacentHtml.

See also:

• insertAdjacentHtml

Element insertAdjacentElement(String where, Element element) {
 if (JS('bool', '!!#.insertAdjacentElement', this)) {
   _insertAdjacentElement(where, element);
 } else {
   _insertAdjacentNode(where, element);
 }
 return element;
}

Parses text as an HTML fragment and inserts it into the DOM at the specified location.

The where parameter indicates where to insert the HTML fragment:

• 'beforeBegin': Immediately before this element.
• 'afterBegin': As the first child of this element.
• 'beforeEnd': As the last child of this element.

• 'afterEnd': Immediately after this element.

  var html = '<div class="something">content</div>'; // Inserts as the first child document.body.insertAdjacentHtml('afterBegin', html); var createdElement = document.body.children0; print(createdElement.classes0); // Prints 'something'

See also:

• insertAdjacentText
• insertAdjacentElement

void insertAdjacentHtml(String where, String text) {
 if (JS('bool', '!!#.insertAdjacentHtml', this)) {
   _insertAdjacentHtml(where, text);
 } else {
   _insertAdjacentNode(where, new DocumentFragment.html(text));
 }
}

Creates a text node and inserts it into the DOM at the specified location.

To see the possible values for where, read the doc for insertAdjacentHtml.

See also:

• insertAdjacentHtml

void insertAdjacentText(String where, String text) {
 if (JS('bool', '!!#.insertAdjacentText', this)) {
   _insertAdjacentText(where, text);
 } else {
   _insertAdjacentNode(where, new Text(text));
 }
}

Inserts all of the nodes into this node directly before refChild.

See also:

• insertBefore

Node insertAllBefore(Iterable<Node> newNodes, Node refChild) {
 if (newNodes is _ChildNodeListLazy) {
   if (identical(newNodes._this, this)) {
     throw new ArgumentError(newNodes);
   }

   // Optimized route for copying between nodes.
   for (var i = 0, len = newNodes.length; i < len; ++i) {
     // Should use $dom_firstChild, Bug 8886.
     this.insertBefore(newNodes[0], refChild);
   }
 } else {
   for (var node in newNodes) {
     this.insertBefore(node, refChild);
   }
 }
}

@DomName('Node.insertBefore')
@DocsEditable
Node insertBefore(Node newChild, Node refChild) native;

Checks if this element matches the CSS selectors.

@Experimental
bool matches(String selectors) {
 if (JS('bool', '!!#.matches', this)) {
   return JS('bool', '#.matches(#)', this, selectors);
 } else if (JS('bool', '!!#.webkitMatchesSelector', this)) {
   return JS('bool', '#.webkitMatchesSelector(#)', this, selectors);
 } else if (JS('bool', '!!#.mozMatchesSelector', this)) {
   return JS('bool', '#.mozMatchesSelector(#)', this, selectors);
 } else if (JS('bool', '!!#.msMatchesSelector', this)) {
   return JS('bool', '#.msMatchesSelector(#)', this, selectors);
 }
 throw new UnsupportedError("Not supported on this platform");
}

dynamic noSuchMethod(Invocation invocation) {
 throw new NoSuchMethodError(
     this,
     _symbolToString(invocation.memberName),
     invocation.positionalArguments,
     _symbolMapToStringMap(invocation.namedArguments));
}

Called by the DOM when this element has been instantiated.

@Experimental
void onCreated() {}

Finds the first descendant element of this element that matches the specified group of selectors.

selectors should be a string using CSS selector syntax.

// Gets the first descendant with the class 'classname'
var element = element.query('.className');
// Gets the element with id 'id'
var element = element.query('#id');
// Gets the first descendant [ImageElement]
var img = element.query('img');

See also:

• CSS Selectors

@JSName('querySelector')
/**
* Finds the first descendant element of this element that matches the
* specified group of selectors.
*
* [selectors] should be a string using CSS selector syntax.
*
*     // Gets the first descendant with the class 'classname'
*     var element = element.query('.className');
*     // Gets the element with id 'id'
*     var element = element.query('#id');
*     // Gets the first descendant [ImageElement]
*     var img = element.query('img');
*
* See also:
*
* * [CSS Selectors](http://docs.webplatform.org/wiki/css/selectors)
*/
@DomName('Element.querySelector')
@DocsEditable
Element query(String selectors) native;

Finds all descendent elements of this element that match the specified group of selectors.

selectors should be a string using CSS selector syntax.

var items = element.query('.itemClassName');

ElementList queryAll(String selectors) =>
 new _FrozenElementList._wrap($dom_querySelectorAll(selectors));

Removes this node from the DOM.

@DomName('Node.removeChild')
void remove() {
 // TODO(jacobr): should we throw an exception if parent is already null?
 // TODO(vsm): Use the native remove when available.
 if (this.parentNode != null) {
   final Node parent = this.parentNode;
   parentNode.$dom_removeChild(this);
 }
}

Replaces this node with another node.

@DomName('Node.replaceChild')
Node replaceWith(Node otherNode) {
 try {
   final Node parent = this.parentNode;
   parent.$dom_replaceChild(otherNode, this);
 } catch (e) {

 };
 return this;
}

@JSName('webkitRequestFullscreen')
@DomName('Element.webkitRequestFullscreen')
@DocsEditable
@SupportedBrowser(SupportedBrowser.CHROME)
@SupportedBrowser(SupportedBrowser.SAFARI)
@Experimental
void requestFullscreen() native;

@JSName('webkitRequestFullScreen')
@DomName('Element.webkitRequestFullScreen')
@DocsEditable
@SupportedBrowser(SupportedBrowser.CHROME)
@SupportedBrowser(SupportedBrowser.SAFARI)
@Experimental
void requestFullScreen(int flags) native;

@JSName('webkitRequestPointerLock')
@DomName('Element.webkitRequestPointerLock')
@DocsEditable
@SupportedBrowser(SupportedBrowser.CHROME)
@SupportedBrowser(SupportedBrowser.SAFARI)
@Experimental
void requestPointerLock() native;

@DomName('Element.scrollByLines')
@DocsEditable
void scrollByLines(int lines) native;

@DomName('Element.scrollByPages')
@DocsEditable
void scrollByPages(int pages) native;

Scrolls this element into view.

Only one of of the alignment options may be specified at a time.

If no options are specified then this will attempt to scroll the minimum amount needed to bring the element into view.

Note that alignCenter is currently only supported on WebKit platforms. If alignCenter is specified but not supported then this will fall back to alignTop.

See also:

• scrollIntoView
• scrollIntoViewIfNeeded

void scrollIntoView([ScrollAlignment alignment]) {
 var hasScrollIntoViewIfNeeded = false;
 hasScrollIntoViewIfNeeded =
     JS('bool', '!!(#.scrollIntoViewIfNeeded)', this);
 if (alignment == ScrollAlignment.TOP) {
   this.$dom_scrollIntoView(true);
 } else if (alignment == ScrollAlignment.BOTTOM) {
   this.$dom_scrollIntoView(false);
 } else if (hasScrollIntoViewIfNeeded) {
   if (alignment == ScrollAlignment.CENTER) {
     this.$dom_scrollIntoViewIfNeeded(true);
   } else {
     this.$dom_scrollIntoViewIfNeeded();
   }
 } else {
   this.$dom_scrollIntoView();
 }
}

Print out a String representation of this Node.

String toString() => localName == null ?
   (nodeValue == null ? super.toString() : nodeValue) : localName;

@JSName('addEventListener')
@DomName('Node.addEventListener')
@DocsEditable
void $dom_addEventListener(String type, EventListener listener, [bool useCapture]) native;

@JSName('getAttribute')
@DomName('Element.getAttribute')
@DocsEditable
String $dom_getAttribute(String name) native;

@JSName('getAttributeNS')
@DomName('Element.getAttributeNS')
@DocsEditable
String $dom_getAttributeNS(String namespaceURI, String localName) native;

@JSName('getElementsByTagName')
@DomName('Element.getElementsByTagName')
@DocsEditable
@Returns('NodeList')
@Creates('NodeList')
List<Node> $dom_getElementsByTagName(String name) native;

@JSName('hasAttribute')
@DomName('Element.hasAttribute')
@DocsEditable
bool $dom_hasAttribute(String name) native;

@JSName('hasAttributeNS')
@DomName('Element.hasAttributeNS')
@DocsEditable
bool $dom_hasAttributeNS(String namespaceURI, String localName) native;

@JSName('querySelectorAll')
@DomName('Element.querySelectorAll')
@DocsEditable
@Returns('NodeList')
@Creates('NodeList')
List<Node> $dom_querySelectorAll(String selectors) native;

@JSName('removeAttribute')
@DomName('Element.removeAttribute')
@DocsEditable
void $dom_removeAttribute(String name) native;

@JSName('removeAttributeNS')
@DomName('Element.removeAttributeNS')
@DocsEditable
void $dom_removeAttributeNS(String namespaceURI, String localName) native;

@JSName('removeChild')
@DomName('Node.removeChild')
@DocsEditable
Node $dom_removeChild(Node oldChild) native;

@JSName('removeEventListener')
@DomName('Node.removeEventListener')
@DocsEditable
void $dom_removeEventListener(String type, EventListener listener, [bool useCapture]) native;

@JSName('replaceChild')
@DomName('Node.replaceChild')
@DocsEditable
Node $dom_replaceChild(Node newChild, Node oldChild) native;

@JSName('scrollIntoView')
@DomName('Element.scrollIntoView')
@DocsEditable
void $dom_scrollIntoView([bool alignWithTop]) native;

@JSName('scrollIntoViewIfNeeded')
@DomName('Element.scrollIntoViewIfNeeded')
@DocsEditable
void $dom_scrollIntoViewIfNeeded([bool centerIfNeeded]) native;

@JSName('setAttribute')
@DomName('Element.setAttribute')
@DocsEditable
void $dom_setAttribute(String name, String value) native;

@JSName('setAttributeNS')
@DomName('Element.setAttributeNS')
@DocsEditable
void $dom_setAttributeNS(String namespaceURI, String qualifiedName, String value) native;