Contribute via GitHub Feedback

Document : Node

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>

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>

Results:

doctype : DocumentType readonly

documentElement : Element readonly

Usually a HTMLHtmlElement.

documentURI : String

Example:

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

Results:

fullscreenElement : Element readonly

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

fullscreenEnabled : Boolean readonly

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

implementation : DOMImplementation readonly

pointerLockElement : Element readonly

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

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>

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
    // www.javascripture.com window) and set its title.
    var javascriptureWindow = window.parent;
    javascriptureWindow.document.title = 'foo';
  }
</script>

Results:

URL : String

Instance Methods

adoptNode(source : Node) : Node

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

createComment(data : String) : Comment

createDocumentFragment() : DocumentFragment

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

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

createEvent(eventInterfaceName : String) : Event

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

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

createRange() : Range

createTextNode(data : String) : Text

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>

Results:

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>

Results:

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>

Results:

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>

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>

Results:

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

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>

Results:

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

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>

Results:

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>

Results:

Instance Events

onabort / 'abort' event

listener(event : Event) : undefined

oncopy / 'copy' event

listener(event : ClipboardEvent) : undefined

oncut / 'cut' event

listener(event : ClipboardEvent) : undefined

onfullscreenchange / 'fullscreenchange' event

listener(event : Event) : undefined

onfullscreenerror / 'fullscreenerror' event

listener(event : Event) : undefined

onload / 'load' event

listener(event : Event) : undefined

onpaste / 'paste' event

listener(event : ClipboardEvent) : undefined

onpointerlockchange / 'pointerlockchange' event

listener(event : Event) : undefined

onpointerlockerror / 'pointerlockerror' event

listener(event : Event) : undefined

onreadystatechange / 'readystatechange' event

listener(event : Event) : undefined

ontouchcancel / 'touchcancel' event

listener(event : TouchEvent) : undefined

ontouchend / 'touchend' event

listener(event : TouchEvent) : undefined

Called when the user stops touching the element.

ontouchmove / 'touchmove' event

listener(event : TouchEvent) : undefined

Called when the user moves while touching the element.

ontouchstart / 'touchstart' event

listener(event : TouchEvent) : undefined

Called when the user begins touching the element.

home license contribute feedback toggle light/dark mode

Copyright © JavaScripture Contributors