JavaScript Document : Node

Spec

Instance Properties

activeElement : Element

Returns the currently focused element. If there is no focused element, returns this.body. See also hasFocus(), window.onblur, and window.onfocus.

Example:

<!-- Try tabbing around the elements in the example -->
<input value='input 1'><br>
<button>button</button><br>
<input value='input 3'>
<div>
  activeElement: <span id='activeElement'></span>
</div>
<script>
  var activeElementOutput = document.getElementById('activeElement');

  var onFocusChange = function() {
    activeElementOutput.textContent = document.activeElement.tagName;
  };

  window.addEventListener('focus', onFocusChange, true);
  window.addEventListener('blur', onFocusChange, true);
</script>

Run

Results:

body : HTMLBodyElement

characterSet : String

compatMode : String

contentType : String

cookie : String

Returns the cookies sent to the server when requesting resources. You can add additional cookies by setting 'key=value' strings to cookie. This will replace any existing value for the specified cookie but will not affect other cookies. You may append additional metadata for the cookie by adding ';metadata-key1=metadata-value1;metadata-key2=metadata-value2;...' to the end of the string when setting the cookie. See Set Cookie Syntax (on page 5) for more details on the supported metadata keys and values.

Example:

<script>
  var getCookies = function() {
    if (document.cookie.length === 0) {
      return {};
    }

    // Split on ';' followed by spaces
    var cookies = document.cookie.split(/;\s*/g);

    // Get the property/value pairs for each cookie
    var entries = cookies.map(function(cookie) {
      return cookie.split('=');
    });

    return Object.fromEntries(entries);
  };

  var clearCookies = function() {
    var cookies = getCookies();
    for (var key in cookies) {
      // Remove a cookie by setting its expires time in the past
      document.cookie = key + '=;expires=' + new Date(0).toUTCString();
    }
  };

  clearCookies();

  document.cookie = 'MyCookie=ChocolateChip';
  console.log(document.cookie);

  document.cookie = 'MyIceCream=Mint';
  console.log(document.cookie);

  var cookies = getCookies();
  console.dir(cookies)
</script>

Run

Results:

Spec

doctype : DocumentType readonly

Spec

documentElement : Element readonly

Usually a HTMLHtmlElement.

Spec

documentURI : String

Example:

<script>
  console.log(document.URL);
</script>

Run

Results:

Spec

fullscreenElement : Element readonly

The element that is currently fullscreen from a call to element.requestFullscreen().

Spec

fullscreenEnabled : Boolean readonly

true if the element.requestFullscreen() API is enabled.

Spec

implementation : DOMImplementation readonly

Spec

pointerLockElement : Element readonly

The element that currently has the pointer locked by a call to element.requestPointerLock().

Spec

readyState : String

Returns 'loading' while this is loading, 'interactive' when this has loaded but not all subresources are loaded, and 'complete' once this and all subresources are loaded.

Example:

<script>
  console.log('in script: ' + document.readyState);

  window.addEventListener('DOMContentLoaded', function() {
    console.log('in DOMContentLoaded: ' + document.readyState);
  });

  window.onload = function() {
    console.log('in onload: ' + document.readyState);
  };
</script>

Run

Results:

styleSheets : StyleSheetList

title : String

Sets the title of the window.

Example:

<button onclick="setTitle()">Set Title</button>
<script>
  var setTitle = function() {
    // Grab the parent of the example (ie, the
    // window) and set its title.
    var PUBLICWindow = window.parent;
    PUBLICWindow.document.title = 'foo';
  }
</script>

Run

Results:

URL : String

Instance Methods

adoptNode(source : Node) : Node

Spec

append(node0 : Node, [node1 : Node, [...]]) : undefined

createComment(data : String) : Comment

Spec

createDocumentFragment() : DocumentFragment

Spec

createElement(tagName : String, [typeExtension : String]) : Element

Spec

createElementNS(namespaceURI : String, qualifiedName : String, [typeExtension : String]) : Element

Spec

createEvent(eventInterfaceName : String) : Event

createNodeIterator(root : Node, [whatToShow : Number, [filter : NodeFilter]]) : NodeIterator

createProcessingInstruction(target : String, data : String) : ProcessingInstruction

Spec

createRange() : Range

createTextNode(data : String) : Text

Spec

createTreeWalker(root : Node, [whatToShow : Number, [filter : NodeFilter]]) : TreeWalker

exitFullscreen() : Promise<undefined>

Exits fullscreen mode. See also element.requestFullscreen().

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

exitPointerLock() : undefined

Releases the pointer locked with element.requestPointerLock().

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

getElementById(elementId : String) : Element

Returns the Element in the document that has Element.id equal to elementId.

Example:

<div id='foo'></div>
<script>
  var foo = document.getElementById('foo');

  foo.textContent = 'My Div';
</script>

Run

Results:

Spec

getElementsByClassName(classNames : String) : NodeList

Returns a NodeList containing the Elements in the document where the Element.className matches the specified classNames. classNames can contain multiple classes, separated by spaces, and the returned Elements must contain all the classes. The returned NodeList will update as the document changes.

Example:

<div class='foo bar'>div1</div>
<div class='foo'>div2</div>
<script>
  var foos = document.getElementsByClassName('foo');

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

  var fooBars = document.getElementsByClassName('bar foo');
  console.log('fooBars.length = ' + fooBars.length);

  // Adding the 'bar' class to div2 will update fooBars automatically
  foos[1].classList.add('bar');
  console.log('fooBars.length = ' + fooBars.length);
</script>

Run

Results:

getElementsByTagName(tagName : String) : NodeList

Returns a NodeList containing the Elements in the document that have the Element.tagName equal to tagName (case insensitive). The returned NodeList will update as the document changes.

Example:

<div>foo</div>
<div>bar</div>
<script>
  var divs = document.getElementsByTagName('div');

  console.log(divs.length);
  for (var i = 0; i < divs.length; i++) {
    console.log(divs[i].textContent);
  }
  console.log();

  // The divs NodeList will update automatically when you add
  // another div
  var baz = document.createElement('div');
  baz.textContent = 'baz';
  document.body.appendChild(baz);

  console.log(divs.length);
</script>

Run

Results:

Spec

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

Spec

hasFocus() : Boolean

Returns true if the document has keyboard focus. See also activeElement, window.onblur, and window.onfocus.

Example:

<!-- Click between this box and example to change focus -->
<input id='input'>
<div>
  Has focus: <span id='hasFocus'></span>
</div>
<script>
  var hasFocusElement = document.getElementById('hasFocus');

  var onFocusChange = function() {
    hasFocusElement.textContent = document.hasFocus();
  };

  window.addEventListener('focus', onFocusChange);
  window.addEventListener('blur', onFocusChange);
</script>

Run

Results:

importNode(importedNode : Node, deep : Boolean) : Node

Spec

prepend(node0 : Node, [node1 : Node, [...]]) : undefined

querySelector(selectors : String) : Element

Returns the first Element that matches the CSS selector.

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. Note that unlike getElementsByClassName() or getElementsByTagName(), the returned NodeList does not update as the document changes.

Example:

<span id='foo'>foo1</span>
<span class='bar'>
  <span class='baz'>baz1</span>
</span>
<span class='baz'>baz2</span>
<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

Instance Events

onabort / 'abort' event

listener(event : Event) : undefined

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

onload / 'load' event

listener(event : Event) : undefined

onpaste / 'paste' event

listener(event : ClipboardEvent) : undefined

Spec

onpointerlockchange / 'pointerlockchange' event

listener(event : Event) : undefined

Spec

onpointerlockerror / 'pointerlockerror' event

listener(event : Event) : undefined

Spec

onreadystatechange / 'readystatechange' event

listener(event : Event) : undefined

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