JavaScript Element : Node

Element represents an element in the DOM/document tree. Element is the base type for HTMLElement and SVGElement.

Spec

Instance Properties

attributes : Array<Attr>

childElementCount : Number

Returns the number of direct children of this.

children : HTMLCollection

The Element children in this. Unlike Node.childNodes, children only returns nodes inside this that derive from Element (ie, other node types like Text and Comment will be excluded from children but present in childNodes).

Example:

<div id='parent'>
  Some text
  <span>A span</span>
</div>
<script>
  var parent = document.getElementById('parent');
  console.log('children:');
  for (var i = 0; i < parent.children.length; i++) {
    console.log('  ' + parent.children[i].nodeName);
  }

  console.log('childNodes:');
  for (var i = 0; i < parent.childNodes.length; i++) {
    console.log('  ' + parent.childNodes[i].nodeName);
  }
</script>

Run

Results:

Spec

classList : DOMTokenList

classList is an object that allows easy manipulation of the classes in the className property. See also className.

Example:

<style>
  .bar { color: red; }
  .baz { font-weight: bold; }
</style>
<div id='foo' class='bar'>
  Example of the classList property.
</div>
<script>
  var foo = document.getElementById('foo');

  console.log(foo.classList.length);
  console.log(foo.className);

  foo.classList.add('baz');

  console.log(foo.classList.length);
  console.log(foo.className); // Notice className updates
</script>

Run

Results:

className : String

Gets or sets the classes of the Element (used for styling via CSS). className should be a space separated list of classes. className corresponds to the HTML class attribute. See also classList.

Example:

<style>
  .bar { color: red; }
  .baz { color: blue; }
</style>
<div id='foo' class='bar'>
  Example of the className property.
</div>
<script>
  var foo = document.getElementById('foo');

  console.log(foo.className);
  foo.className = 'baz';
</script>

Run

Results:

clientHeight : Number readonly

Spec

clientLeft : Number readonly

Spec

clientTop : Number readonly

Spec

clientWidth : Number readonly

Spec

dataset : DOMStringMap readonly

Map of custom 'data-' prefixed attributes on this. Attribute names are converted to camel case.

Example:

<div id='foo' data-bar-baz='value'></div>
<script>
  var foo = document.getElementById('foo');

  console.log(foo.dataset.barBaz);
</script>

Run

Results:

firstElementChild : Element

Spec

id : String

A unique name for this element in the document. You can retrieve an element by id using document.getElementById().

lastElementChild : Element

Spec

localName : String

namespaceURI : String

nextElementSibling : Element

prefix : String

previousElementSibling : Element

scrollHeight : Number readonly

Spec

scrollLeft : Number

Spec

scrollTop : Number

Spec

scrollWidth : Number readonly

Spec

shadowRoot : ShadowRoot readonly

tagName : String readonly

Spec

Instance Methods

append 2 variants

append(item0 : String, [item1 : String, [...]]) : undefined

Same as append(new Text(item0), new Text(item1), ...).

Example:

<div id='parent'><span id='foo'>foo</span></div>
<script>
  var parent = document.getElementById('parent');
  parent.append('bar', 'baz');

  console.log(parent.childNodes[0]);
  console.log(parent.childNodes[1]);
  console.log(parent.childNodes[2]);
</script>

Run

Results:

Spec

append(item0 : Node, [item1 : Node, [...]]) : undefined

Inserts the specified nodes at the end of this.childNodes. See also prepend, replaceChildren, and Node.appendChild.

Example:

<div id='parent'><span id='foo'>foo</span></div>
<script>
  var parent = document.getElementById('parent');
  parent.append(new Text('bar'), document.createElement('input'));
</script>

Run

Results:

Spec

createShadowRoot() : ShadowRoot

Spec

getAttribute(name : String) : String

getAttributeNS(namespaceURI : String, localName : String) : String

getBoundingClientRect() : ClientRect

Returns the rectangular bounds of this relative to the viewport. If this is a text element that is split on multiple lines, the rectangle will be enlarged to contain all portions. Use getClientRects() to get the rectangles of each portion.

Example:

<span id='foo'>This is a string of text</span>
<script>
  var foo = document.getElementById('foo');

  var boundingClientRect = foo.getBoundingClientRect();

  console.log(JSON.stringify(boundingClientRect, null, ' '));
</script>

Run

Results:

Spec

getClientRects() : ClientRectList

Returns a list of rectangles where this is in the document. This method is similar to getBoundingClientRect() except it will return a ClientRect for each part of the element (eg, text elements split on multiple lines will return a list with length > 1).

Example:

<div style='width: 120px'>
<span id='foo'>This is a string of wrapping text</span>
</div>
<script>
  var foo = document.getElementById('foo');

  var clientRects = foo.getClientRects();

  console.log('length = ' + clientRects.length);

  for (var i = 0; i < clientRects.length; i++) {
    console.log('clientRect[' + i + '] = ');
    console.log(JSON.stringify(clientRects[i], null, ' '));
    console.log();
  }
</script>

Run

Results:

Spec

getDestinationInsertionPoints() : NodeList

Spec

getElementsByClassName(classNames : String) : NodeList

Returns a list of descendants of this that match the specified class name. See also getElementsByTagName(), querySelector(), and querySelectorAll().

Example:

<div>
  <div id='foo'>
    <a class='bar'>'bar' inside foo.</a>
    <div class='bar baz'>
      <a>Nested anchor.</a>
    </div>
  </div>
  <a class='bar'>'bar' outside foo.</a>
</div>
<script>
  var foo = document.getElementById('foo');
  var bars = foo.getElementsByClassName('bar');

  console.log(bars.length);
  for (var i = 0; i < bars.length; i++) {
    console.log(bars[i].tagName);
  }
</script>

Run

Results:

getElementsByTagName(name : String) : NodeList

Returns a list of descendants of this that match the specified tag name. See also getElementsByTagNameNS(), getElementsByClassName(), querySelector(), and querySelectorAll().

Example:

<div>
  <div id='foo'>
    <a>Anchor inside foo.</a>
    <div>
      <a>Nested anchor.</a>
    </div>
  </div>
  <a>Anchor outside foo.</a>
</div>
<script>
  var foo = document.getElementById('foo');
  var anchors = foo.getElementsByTagName('a');

  console.log(anchors.length);
  for (var i = 0; i < anchors.length; i++) {
    console.log(anchors[i].innerText);
  }
</script>

Run

Results:

getElementsByTagNameNS(namespaceURI : String, localName : String) : NodeList

hasAttribute(name : String) : Boolean

hasAttributeNS(namespaceURI : String, localName : String) : Boolean

hasAttributes() : Boolean

prepend 2 variants

prepend(item0 : String, [item1 : String, [...]]) : undefined

Same as prepend(new Text(item0), new Text(item1), ...).

Example:

<div id='parent'><span id='foo'>foo</span></div>
<script>
  var parent = document.getElementById('parent');
  parent.prepend('bar', 'baz');

  console.log(parent.childNodes[0]);
  console.log(parent.childNodes[1]);
  console.log(parent.childNodes[2]);
</script>

Run

Results:

Spec

prepend(item0 : Node, [item1 : Node, [...]]) : undefined

Inserts the specified nodes at the start of this.childNodes. See also append, replaceChildren, and Node.insertBefore.

Example:

<div id='parent'><span id='foo'>foo</span></div>
<script>
  var parent = document.getElementById('parent');
  parent.prepend(new Text('bar'), document.createElement('input'));
</script>

Run

Results:

Spec

querySelector(selector : String) : Element

Returns the first Element that matches the CSS selector. See also querySelectorAll(), getElementsByTagName(), and getElementsByClassName().

Example:

<span id='foo'>foo1</span>
<span class='bar'>
  <span class='baz'>baz1</span>
</span>
<span class='baz'>baz2</span>
<script>
  var foo = document.querySelector('#foo');
  console.log(foo.innerHTML);

  var baz = document.querySelector('.baz');
  console.log(baz.innerHTML);

  var baz2 = document.querySelector('body > .baz');
  console.log(baz2.innerHTML);
</script>

Run

Results:

Spec

querySelectorAll(cssSelector : String) : NodeList

Returns a NodeList containing the Elements in the document that match the CSS selector. See also querySelector(), getElementsByTagName(), and getElementsByClassName().

Example:

<body>
  <span id='foo'>foo1</span>
  <span class='bar'>
    <span class='baz'>baz1</span>
  </span>
  <span class='baz'>baz2</span>
</body>
<script>
  var all = document.querySelectorAll('#foo, .baz');
  console.log(all.length);
  for (var i = 0; i < all.length; i++) {
    console.log(all[i].innerHTML);
  };
</script>

Run

Results:

Spec

releasePointerCapture(id : Number) : undefined

Spec

removeAttribute(name : String) : undefined

removeAttributeNS(namespaceURI : String, localName : String) : undefined

replaceChildren 2 variants

replaceChildren(item0 : String, [item1 : String, [...]]) : undefined

Same as replaceChildren(new Text(item0), new Text(item1), ...).

Example:

<div id='parent'><span id='foo'>foo</span></div>
<script>
  var parent = document.getElementById('parent');
  parent.replaceChildren('bar', 'baz');
</script>

Run

Results:

Spec

replaceChildren(item0 : Node, [item1 : Node, [...]]) : undefined

Removes all items from this.childNodes and replaces them with the specified nodes. See also append, prepend, Node.insertBefore, Node.removeChild, and Node.replaceChild.

Example:

<div id='parent'><span id='foo'>foo</span></div>
<script>
  var parent = document.getElementById('parent');
  parent.replaceChildren(new Text('bar'), document.createElement('input'));
</script>

Run

Results:

Spec

requestFullscreen([options : Object]) : Promise<undefined>

options : {

navigationUI

String

One of 'auto', 'show', or 'hide'.

}

Enters fullscreen mode where this fills the entire screen. See also document.exitFullscreen().

Example:

<div style="background: pink;">
  Element
  <button id="enter">Enter Fullscreen</button>
  <button id="exit">Exit Fullscreen</button>
</div>
<script>
document.querySelector('#enter').onclick = async () => {
  const div = document.querySelector('div');
  if (div.requestFullscreen) {
    await div.requestFullscreen();
  }
  else if (div.webkitRequestFullscreen) {
    div.webkitRequestFullscreen();
  }
};
document.querySelector('#exit').onclick = async () => {
  if (document.exitFullscreen) {
    await document.exitFullscreen();
  }
  else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
};
</script>

Run

Results:

Spec

requestPointerLock() : undefined

Locks the pointer (mouse cursor) to this. If successful, document.onpointerlockchange will fire and subsequent pointer moves be sent to this. If unable to lock the pointer, document.onpointerlockerror will fire. Use document.exitPointerLock to release the pointer. See also document.pointerLockElement, MouseEvent.movementX and MouseEvent.movementY.

Example:

<button id="request">Request Pointer Lock</button>
<pre id="output" style="background: #eee; height: 100px">
<script>
document.querySelector('#request').onclick = (e) => {
  document.body.requestPointerLock();
  e.stopPropagation();
};
document.body.onclick = () => {
  document.exitPointerLock();
};
document.body.onmousemove = (e) => {
  const output = document.getElementById('output');
  output.textContent = 'hasPointerLock: ' + !!document.pointerLockElement + '\n' +
                       'movementX: ' + e.movementX + '\n' + 
                       'movementY: ' + e.movementY;
};
</script>

Run

Results:

Spec

scrollIntoView([top = false : Boolean]) : undefined

Scolls the element into view.

Example:

<div style='height: 100px; overflow: scroll'>
  <div>A</div><div>B</div><div>C</div><div>D</div>
  <div>E</div><div>F</div><div>G</div><div id='h'>H</div>
</div>
<button onclick='doScroll(true)'>Scroll 'H' to top</button>
<button onclick='doScroll(false)'>Scroll 'H' to bottom</button>
<script>
  var doScroll = function(top) {
    document.getElementById('h').scrollIntoView(top);
  }
</script>

Run

Results:

Spec

setAttribute(name : String, value : String) : undefined

setAttributeNS(namespaceURI : String, qualifiedName : String, value : String) : undefined

setPointerCapture(id : Number) : undefined

Spec

Instance Events

oncopy / 'copy' event

listener(event : ClipboardEvent) : undefined

Spec

oncut / 'cut' event

listener(event : ClipboardEvent) : undefined

Spec

onfullscreenchange / 'fullscreenchange' event

listener(event : Event) : undefined

Spec

onfullscreenerror / 'fullscreenerror' event

listener(event : Event) : undefined

Spec

ongotpointercapture / 'gotpointercapture' event

listener(event : PointerEvent) : undefined

Spec

onlostpointercapture / 'lostpointercapture' event

listener(event : PointerEvent) : undefined

Spec

onpaste / 'paste' event

listener(event : ClipboardEvent) : undefined

Spec

onpointercancel / 'pointercancel' event

listener(event : PointerEvent) : undefined

Spec

onpointerdown / 'pointerdown' event

listener(event : PointerEvent) : undefined

Spec

onpointerenter / 'pointerenter' event

listener(event : PointerEvent) : undefined

Spec

onpointerleave / 'pointerleave' event

listener(event : PointerEvent) : undefined

Spec

onpointermove / 'pointermove' event

listener(event : PointerEvent) : undefined

Spec

onpointerout / 'pointerout' event

listener(event : PointerEvent) : undefined

Spec

onpointerover / 'pointerover' event

listener(event : PointerEvent) : undefined

Spec

onpointerup / 'pointerup' event

listener(event : PointerEvent) : undefined

Spec

ontouchcancel / 'touchcancel' event

listener(event : TouchEvent) : undefined

Spec

ontouchend / 'touchend' event

listener(event : TouchEvent) : undefined

Called when the user stops touching the element.

Spec

ontouchmove / 'touchmove' event

listener(event : TouchEvent) : undefined

Called when the user moves while touching the element.

Spec

ontouchstart / 'touchstart' event

listener(event : TouchEvent) : undefined

Called when the user begins touching the element.

Spec

home license contribute feedback