Element : Node

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

Instance Properties

attributes : Array<Attr>

childElementCount : Number

Returns the number of direct children of this.

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

The height of this in CSS pixels. Does not include this's border or scrollbar. Will be 0 for display: inline elements; use getBoundingClientRect() or getClientRects() instead. See also HTMLElement.offsetHeight and scrollHeight.

Example:

<style>
  div {
    width: 100px;
    height: 20px;
    background: pink;
    border: 10px solid blue;
    padding: 15px;
    white-space: pre;
    overflow: scroll;
  }
</style>
<div>My Div's very long content....
that
must
scroll</div>
<script>
  const div = document.querySelector('div');
  console.log('clientHeight', div.clientHeight);
  console.log('offsetHeight', div.offsetHeight);
  console.log('scrollHeight', div.scrollHeight);
</script>

Run

Results:

Spec

clientLeft : Number readonly

Spec

clientTop : Number readonly

Spec

clientWidth : Number readonly

The width of this in CSS pixels. Does not include this's border or scrollbar. Will be 0 for display: inline elements; use getBoundingClientRect() or getClientRects() instead. See also HTMLElement.offsetWidth and scrollWidth.

Example:

<style>
  div {
    width: 100px;
    height: 20px;
    background: pink;
    border: 10px solid blue;
    padding: 15px;
    white-space: pre;
    overflow: scroll;
  }
</style>
<div>My Div's very long content....
that
must
scroll</div>
<script>
  const div = document.querySelector('div');
  console.log('clientWidth', div.clientWidth);
  console.log('offsetWidth', div.offsetWidth);
  console.log('scrollWidth', div.scrollWidth);
</script>

Run

Results:

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

The height of the total scrollable region of this in CSS pixels. Will be the same as clientWidth if this does not scroll vertically. See also clientHeight and HTMLElement.offsetHeight.

Example:

<style>
  div {
    width: 100px;
    height: 20px;
    background: pink;
    border: 10px solid blue;
    padding: 15px;
    white-space: pre;
    overflow: scroll;
  }
</style>
<div>My Div's very long content....
that
must
scroll</div>
<script>
  const div = document.querySelector('div');
  console.log('clientHeight', div.clientHeight);
  console.log('offsetHeight', div.offsetHeight);
  console.log('scrollHeight', div.scrollHeight);
</script>

Run

Results:

Spec

scrollLeft : Number

Spec

scrollTop : Number

Spec

scrollWidth : Number readonly

The width of the total scrollable region of this in CSS pixels. Will be the same as clientWidth if this does not scroll horizontally. See also clientWidth and HTMLElement.offsetWidth.

Example:

<style>
  div {
    width: 100px;
    height: 20px;
    background: pink;
    border: 10px solid blue;
    padding: 15px;
    white-space: pre;
    overflow: scroll;
  }
</style>
<div>My Div's very long content....
that
must
scroll</div>
<script>
  const div = document.querySelector('div');
  console.log('clientWidth', div.clientWidth);
  console.log('offsetWidth', div.offsetWidth);
  console.log('scrollWidth', div.scrollWidth);
</script>

Run

Results:

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. See also clientWidth and clientHeight.

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). See also clientWidth and clientHeight.

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