HTMLElement : Element

HTMLElement represents an element in the HTML document tree. HTMLElement is the base type for HTMLDivElement, HTMLSpanElement, HTMLImageElement, and many others.

Spec

Instance Properties

accessKey : String

accessKeyLabel : String readonly

classList : DOMTokenList readonly

An object that makes it easy to manipulate the class names applied to this element. See also className.

Example:

<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
</style>
<span id='foo' class='bar'>foo</span>
<script>
  var foo = document.getElementById('foo');
  console.log(foo.className);
  foo.classList.add('baz');
  console.log(foo.className);
</script>

Run

Results:

className : String

A space separated list of CSS class names for this element. Corresponds to the class attribute in HTML. See classList for an easier way to manipulate the classes.

commandChecked : Boolean readonly

commandDisabled : Boolean readonly

commandHidden : Boolean readonly

commandIcon : String readonly

commandLabel : String readonly

commandType : String readonly

contentEditable : String

contextMenu : HTMLMenuElement

dir : String

Spec

draggable : Boolean

dropzone : DOMSettableTokenList readonly

hidden : Boolean

innerHTML : String

Gets or sets the html content inside this element. The element itself is not modified. Compare to outerHTML.

Example:

<strong id='foo'>foo</strong>
<script>
  var foo = document.getElementById('foo');
  foo.innerHTML = '<em>bar</em>';
</script>

Run

Results:

isContentEditable : Boolean readonly

lang : String

Spec

offsetHeight : Number readonly

The height of this in CSS pixels. Includes this's border and scrollbar. See also Element.clientHeight and Element.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

offsetLeft : Number readonly

Spec

offsetParent : Element readonly

Spec

offsetTop : Number readonly

Spec

offsetWidth : Number readonly

The width of this in CSS pixels. Includes this's border and scrollbar. See also Element.clientWidth and Element.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

outerHTML : String

Gets or sets the html content inside this element. The element itself is replaced by the provided HTML. Compare to innerHTML.

Example:

<strong id='foo'>foo</strong>
<script>
  var foo = document.getElementById('foo');
  foo.outerHTML = '<em>bar</em>';
</script>

Run

Results:

spellcheck : Boolean

style : CSSStyleDeclaration readonly

Contains CSS styles directly set on this. Use window.getComputedStyle(element) to get the effective style including styles from CSS rules.

Example:

<style>
  .bar { font-weight: bold;  }
</style>
<span id='foo' class='bar' style='color: red'>foo</span>
<script>
  var foo = document.getElementById('foo');

  console.log('color:  ' + foo.style.color);
  console.log('weight: ' + foo.style.fontWeight);

  var computedStyle = window.getComputedStyle(foo);
  console.log('computed color:  ' + computedStyle.color);
  console.log('computed weight: ' + computedStyle.fontWeight);
</script>

Run

Results:

tabIndex : Number

title : String

Spec

Instance Methods

blur() : undefined

click() : undefined

focus() : undefined

insertAdjacentHTML(position : String, html : String) : undefined

Example:

<strong id='foo'>foo</strong>
<script>
  var foo = document.getElementById('foo');
  foo.insertAdjacentHTML('beforebegin', '1');
  foo.insertAdjacentHTML('afterbegin',  '2');
  foo.insertAdjacentHTML('beforeend',   '3');
  foo.insertAdjacentHTML('afterend',    '4');
</script>

Run

Results:

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

Spec

Instance Events

onabort / 'abort' event

listener(event : Event) : undefined

onblur / 'blur' event

listener(event : FocusEvent) : undefined

onchange / 'change' event

listener(event : Event) : undefined

onclick / 'click' event

listener(event : MouseEvent) : undefined

oncompositionend / 'compositionend' event

listener(event : CompositionEvent) : undefined

oncompositionstart / 'compositionstart' event

listener(event : CompositionEvent) : undefined

oncompositionupdate / 'compositionupdate' event

listener(event : CompositionEvent) : undefined

oncontextmenu / 'contextmenu' event

listener(event : Event) : undefined

ondblclick / 'dblclick' event

listener(event : MouseEvent) : undefined

ondrag / 'drag' event

listener(event : Event) : undefined

ondragend / 'dragend' event

listener(event : Event) : undefined

ondragenter / 'dragenter' event

listener(event : Event) : undefined

ondragleave / 'dragleave' event

listener(event : Event) : undefined

ondragover / 'dragover' event

listener(event : Event) : undefined

ondragstart / 'dragstart' event

listener(event : Event) : undefined

ondrop / 'drop' event

listener(event : Event) : undefined

onerror / 'error' event

listener(event : Event, source : String, line : Number, column : Number) : undefined

onfocus / 'focus' event

listener(event : FocusEvent) : undefined

onfocusin / 'focusin' event

listener(event : FocusEvent) : undefined

onfocusout / 'focusout' event

listener(event : FocusEvent) : undefined

oninput / 'input' event

listener(event : InputEvent) : undefined

Example:

<textarea id="ta"></textarea>
<script>
  var textarea = document.querySelector('#ta');
  textarea.addEventListener('input', function(event) {
    console.log('changed');
  });
</script>

Run

Results:

oninvalid / 'invalid' event

listener(event : Event) : undefined

onkeydown / 'keydown' event

listener(event : KeyboardEvent) : undefined

onkeypress / 'keypress' event

listener(event : KeyboardEvent) : undefined

onkeyup / 'keyup' event

listener(event : KeyboardEvent) : undefined

onload / 'load' event

listener(event : Event) : undefined

onloadeddata / 'loadeddata' event

listener(event : Event) : undefined

onloadedmetadata / 'loadedmetadata' event

listener(event : Event) : undefined

onloadstart / 'loadstart' event

listener(event : Event) : undefined

onmousedown / 'mousedown' event

listener(event : MouseEvent) : undefined

onmouseenter / 'mouseenter' event

listener(event : MouseEvent) : undefined

Called when the mouse enters the element or any of its descendant nodes. Note, unlike mouseover, mouseenter does not bubble and so it will only fire once as long as the mouse remains within this. See also mouseleave.

Example:

<div style="background: pink;">
  <span style="background: #DFD">foo</span>
  <span style="background: #DDF">bar</span>
</div>
<script>
  const div = document.querySelector('div');
  div.onmouseenter = (e) => {
    console.log('mouseenter');
  };
  div.onmouseleave = (e) => {
    console.log('mouseleave');
  };
</script>

Run

Results:

Spec

onmouseleave / 'mouseleave' event

listener(event : MouseEvent) : undefined

Called when the mouse leaves the element or any of its descendant nodes. Note, unlike mouseout, mouseleave does not bubble and so it will not fire while mouse remains within this. See also mouseenter.

Example:

<div style="background: pink;">
  <span style="background: #DFD">foo</span>
  <span style="background: #DDF">bar</span>
</div>
<script>
  const div = document.querySelector('div');
  div.onmouseenter = (e) => {
    console.log('mouseenter');
  };
  div.onmouseleave = (e) => {
    console.log('mouseleave');
  };
</script>

Run

Results:

Spec

onmousemove / 'mousemove' event

listener(event : MouseEvent) : undefined

Called when the mouse moves within the element.

onmouseout / 'mouseout' event

listener(event : MouseEvent) : undefined

Called when the mouse leaves the element by moving out of the bounds of this or by entering the bounds of a child of this. Note, unlike mouseleave, mouseout bubbles and will fire each time the mouse moves to a different child within this. See also mouseover.

Example:

<div style="background: pink;">
  <span style="background: #DFD">foo</span>
  <span style="background: #DDF">bar</span>
</div>
<script>
  const div = document.querySelector('div');
  div.onmouseover = (e) => {
    console.log('mouseover', e.target.tagName === 'SPAN' ? e.target.textContent : 'DIV');
  };
  div.onmouseout = (e) => {
    console.log('mouseout', e.target.tagName === 'SPAN' ? e.target.textContent : 'DIV');
  };
</script>

Run

Results:

onmouseover / 'mouseover' event

listener(event : MouseEvent) : undefined

Called when the mouse is directly over this. Note, unlike mouseenter, mouseover bubbles and will fire each time the mouse moves to a different child within this. See also mouseout.

Example:

<div style="background: pink;">
  <span style="background: #DFD">foo</span>
  <span style="background: #DDF">bar</span>
</div>
<script>
  const div = document.querySelector('div');
  div.onmouseover = (e) => {
    console.log('mouseover', e.target.tagName === 'SPAN' ? e.target.textContent : 'DIV');
  };
  div.onmouseout = (e) => {
    console.log('mouseout', e.target.tagName === 'SPAN' ? e.target.textContent : 'DIV');
  };
</script>

Run

Results:

onmouseup / 'mouseup' event

listener(event : MouseEvent) : undefined

onmousewheel / 'mousewheel' event

listener(event : MouseEvent) : undefined

onresize / 'resize' event

listener(event : UIEvent) : undefined

onscroll / 'scroll' event

listener(event : UIEvent) : undefined

onselect / 'select' event

listener(event : Event) : undefined

onunload / 'unload' event

listener(event : Event) : undefined

onwheel / 'wheel' event

listener(event : MouseEvent) : undefined

home license contribute feedback toggle light/dark mode