Javascript Node - 21 Methods (Reference)

Tech:
Javascript
Since:
1 year ago
Views:
4

In JavaScript, Node is a reference to the HTML DOM element. A Node gives access to the various methods of the element.

Node Methods:

querySelector()

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

// Get first element by class
var x = document.body.querySelector(".class_name");

// Get first element by id
var x = document.body.querySelector("#id_name");

// Get first div element
var x = document.body.querySelector("div");

// Other examples
var x = document.body.querySelector("div.class_name_1.class_name_1");
var x = document.body.querySelector("div.class_name_1 .class_name_1");
var x = document.body.querySelector("div.class_name > p");
var x = document.body.querySelector(
  "div.class_name_1.class_name_2 input[attr='val']"
);
var x = document.body.querySelector(
  "div.class_name_1:not(.class_name_2) input[attr='val']"
);

querySelectorAll()

The querySelectorAll() method returns a NodeList of all elements that match the specified CSS selector(s) in the document.

// Get first element by class
var x = document.body.querySelectorAll(".class_name");

// Get first element by id
var x = document.body.querySelectorAll("#id_name");

// Get first div element
var x = document.body.querySelectorAll("div");

// Other examples
var x = document.body.querySelectorAll("div.class_name > p");
var x = document.body.querySelectorAll("div.class_name, div.class_name");
var x = document.body.querySelectorAll("div.class_name > p");
var x = document.body.querySelectorAll("iframe[data-src]");
var x = document.body.querySelectorAll("li[data-active='1']");

append()

It inserts a set of Node objects or DOMString objects after the last child of the ParentNode.

var x = document.createElement("span");
document.body.append(x);

prepend()

It inserts a set of Node objects or DOMString objects before the first child of the ParentNode.

var x = document.createElement("span");
document.body.prepend(x);

replaceChildren()

It replaces the existing children of a Node with a specified new set of children.

document.body.replaceChildren(old_el, new_el);

replaceWith()

It replaces this ChildNode in the children list of its parent with a set of Node or DOMString objects.

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

document.body.replaceWith(span);

remove()

It removes the object from the tree it belongs to. It remove all child nodes.

var x = document.getElementById("id_name");
x.remove();

before()

It inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just before this ChildNode.

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

document.body.before(x);

document.body.before("some text");

document.body.before(x, "some text");

after()

It inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just after this ChildNode.

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

document.body.after(x);

document.body.after("some text");

document.body.after(x, "some text");

appendChild()

It adds a node to the end specified parent node.

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

document.body.appendChild(x);

removeChild()

It removes a child node from the DOM and returns the removed node.

var x = document.body;

var y = document.body.removeChild(x);
document.body.removeChild(x);

replaceChild()

It replaces a child node within the given node.

var x = document.getElementById("id_name_one");
var y = document.getElementById("id_name_two");

document.body.replaceChild(x, y);
// replaceChild(new,old);

insertBefore()

It inserts a node before a reference node as a child of a specified parent node.

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

document.body.insertBefore(x, document.body.firstChild);

contains()

It returns a Boolean value indicating whether a node is a descendant of a given node.

var x = document.body;
var y = document.contains(x);
// true

hasChildNodes()

It returns a Boolean value indicating whether the given Node has child nodes.

var x = document.body.hasChildNodes();
// true

isEqualNode()

It tests whether two nodes are equal.

var x = document.getElementById("id_name_one");
var y = document.getElementsById("id_name_two");

var z = y.isEqualNode(x);
// true

isSameNode()

It tests whether two nodes are the same and whether they reference the same object.

var x = document.getElementById("id_name_one");
var y = document.getElementsById("id_name_two");

var z = y.isSameNode(x);
// true

cloneNode()

It returns a duplicate of the node on which this method was called.

var x = document.getElementById("id_name");
var y = x.cloneNode(true);

// If true, then node and its whole subtree copied

compareDocumentPosition()

It reports the position of the given node relative to another node in any document.

var x = document.head;
var y = document.body;

var z = head.compareDocumentPosition(body);

DOCUMENT_POSITION_DISCONNECTED  1
DOCUMENT_POSITION_PRECEDING 2
DOCUMENT_POSITION_FOLLOWING 4
DOCUMENT_POSITION_CONTAINS  8
DOCUMENT_POSITION_CONTAINED_BY  16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC   32

getRootNode()

It returns the context object's root which optionally includes the shadow root if it is available.

var x = document.body.getRootNode();
// #document

normalize()

It Clean up all the text nodes under the selected element. It removes empty Text nodes, and joins adjacent Text nodes.

document.body.normalize();
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