Javascript Document - 24 Methods (Reference)

Tech:
Javascript
Since:
1 year ago
Views:
2

The HTML DOM Document is the root node of the document tree. This document object represents the entire web page. Document object provides methods for accessing the elements and creating new nodes.

Contents:

adoptNode()

The adoptNode() method takes a node from another document and adds it to the current document.

var frame = document.getElementsByTagName("IFRAME")[0];
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.importNode(h);
document.body.appendChild(x);

importNode()

The importNode() method takes a node from another document and adds it to the current document.

var frame = document.getElementsByTagName("IFRAME")[0];
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.importNode(h, true);
document.body.appendChild(x);

createAttribute()

The createAttribute() method creates a new attribute node.

var x = document.createAttribute("id");
x.value = "id_name";

createComment()

The createComment() method creates a new comment node.

var x = document.createComment("some comment");

createElement()

The createElement() method creates a new element node.

var x = document.createElement("span");
var x = document.createElement("div");

createDocumentFragment()

The createDocumentFragment() method creates a new document fragment. It creates dummy fragment for DOM operations.

var fragment = document.createDocumentFragment();
var text = document.createTextNode("AAA");
fragment.appendChild(text);

document.getElementById("id_name").appendChild(fragment);

createTextNode()

The createTextNode() method creates a new text node.

var x = document.createTextNode("Some text");

createRange()

The createRange() method creates a new range object by selecting child nodes from start to end.

// creating range of nodes
var el = document.getElementById("test");

var range = document.createRange();
range.setStart(el, 0);
range.setEnd(el, 3);

exitPointerLock()

This method exits pointer lock.

var x = document.exitPointerLock();

hasStorageAccess()

The hasStorageAccess() method returns true if the browser has access to the user's storage.

// Storage API
document.hasStorageAccess().then(hasAccess => {
  if (hasAccess) {
    // storage access has been granted already.
  } else {
    // storage access hasn't been granted already;
    // should call requestStorageAccess().
  }
});

requestStorageAccess()

The requestStorageAccess() method requests access to the user's storage.

// Storage API
document.requestStorageAccess().then(
  () => {
    console.log("access granted");
  },
  () => {
    console.log("access denied");
  }
);

getElementById()

The getElementById() method returns the element with the specified ID.

// Get element with id
var x = document.getElementById("id_name");

getElementsByClassName()

The getElementsByClassName() method returns a list of elements with the specified class name.

// Get all elements by class
var x = document.getElementsByClassName("class_name");

// Get first element by class
var x = document.getElementsByClassName("class_name")[0];

// Get all elements of both classes
var x = document.getElementsByClassName("class_name1 class_name2");

// Get all elements inside id by class
var x = document.getElementById("id_name").getElementsByClassName("class_name");

getElementsByTagName()

The getElementsByTagName() method returns a list of elements with the specified tag name.

// Get all span elements
var x = document.getElementsByTagName("span");

// Get all div elements
var x = document.getElementsByTagName("div");

// Get all div elements inside the id
var x = document.getElementById("id_name");
var x = a.getElementsByTagName("div");

getElementsByName()

The getElementsByName() method returns a list of elements with the specified name.

var x = document.getElementsByName("name_attr_val");

open()

The open() method opens a document for writing.

document.open();

write()

The write() method writes text to a document.

document.write();

writeln()

The writeln() method writes text to a document and adds a newline.

document.writeln();

close()

The close() method closes a document.

document.close();

hasFocus()

The hasFocus() method returns true if the document has focus.

var x = document.hasFocus();
// true or false

getAnimations()

The getAnimations() method returns a list of animations. It returns an array of all Animation objects.

var x = document.getElementById("some_id");
var y = x.getAnimations();

var x = document.getAnimations();

getSelection()

The getSelection() method returns the current selection.

var x = document.getSelection();

elementFromPoint()

The elementFromPoint() method returns the element that is under the given point. It get first element within the viewport coordinates.

var x = document.elementFromPoint(horizontal X, vertical Y);
var x = document.elementFromPoint(10, 20);

elementsFromPoint()

The elementsFromPoint() method returns a list of elements that are under the given point. It returns an array of all elements within the viewport coordinates.

var x = document.elementsFromPoint(horizontal X, vertical Y);
var x = document.elementsFromPoint(10, 20);
More Articles
Javascript Number - 10 Methods and 5 Properties (Reference)
2 years ago
1
Javascript Statements - 16 Statements (Reference)
2 years ago
6
Javascript matchMedia - 2 Methods and 2 Properties (Reference)
2 years ago
1
Javascript Object - 21 Methods (Reference)
1 year ago
3
Javascript Document - 24 Methods (Reference)
1 year ago
2