This guide is not intended to be all comprehensive. It is only
including Node constructor methods that are cross browser
compatible.
-
The DOM Node interface is an abstract base class upon which many
other DOM API objects are based, thus letting those object types
to be used similarly and often interchangeably. As an abstract
class, there is no such thing as a plain Node object. All
objects that implement Node functionality are based on one of
its subclasses. Most notable are Document, Element, and
DocumentFragment.
-
In addition, every kind of DOM node is represented by an
interface based on Node. These include Attr, CharacterData
(which Text, Comment, CDATASection and ProcessingInstruction are
all based on), DocumentType, Notation, Entity, and
EntityReference.
-
In some cases, a particular feature of the base Node interface
may not apply to one of its child interfaces; in that case, the
inheriting node may return null or throw an exception, depending
on circumstances. For example, attempting to add children to a
node type that cannot have children will throw an exception.
-
In addition to the properties below, Node inherits properties
from its parent, EventTarget.
-
In the past, DOM manipulation was accomplished mainly with
jQuery. There are many articles written recently about how you
can use native Javascript instead, such as
http://youmightnotneedjquery.com/
The Node.appendChild() method adds a node to the end of the list
of children of a specified parent node. If the given child is a
reference to an existing node in the document, appendChild() moves
it from its current position to the new position (there is no
requirement to remove the node from its parent node before
appending it to some other node).
Syntax:
element.appendChild(aChild)
Example:
// Create a new paragraph element, and append it to the end of the document body
let p = document.createElement("p");
document.body.appendChild(p);
The Node.cloneNode() method returns a duplicate of the node on
which this method was called.
Syntax:
let newClone = node.cloneNode([deep])
Example:
let p = document.getElementById("para1")
let p_prime = p.cloneNode(true)
The Node.compareDocumentPosition() method reports the position of
the given node relative to another node in any document — not just
the given node’s document.
Syntax:
compareMask = node.compareDocumentPosition(otherNode)
Example:
const head = document.head;
const body = document.body;
if (head.compareDocumentPosition(body) & Node.DOCUMENT_POSITION_FOLLOWING) {
console.log('Well-formed document');
} else {
console.error('head is not before body');
}
The Node.contains() method returns a Boolean value indicating
whether a node is a descendant of a given node, i.e. the node
itself, one of its direct children (childNodes), one of the
children's direct children, and so on.
Syntax:
node.contains( otherNode )
Example:
This function checks to see if an element is in the page's body.
As contains is inclusive and determining if the body contains
itself isn't the intention of isInPage this case explicitly
returns false.
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}
The Node.hasChildNodes() method returns a Boolean value indicating
whether the given Node has child nodes or not.
Syntax:
bool = node.hasChildNodes();
Example:
let foo = document.getElementById('foo');
if (foo.hasChildNodes()) {
// Do something with 'foo.childNodes'
}
The Node.insertBefore() method inserts a node before a reference
node as a child of a specified parent node. If the given node
already exists in the document, insertBefore() moves it from its
current position to the new position. (That is, it will
automatically be removed from its existing parent before appending
it to the specified new parent.)
Syntax:
let insertedNode = parentNode.insertBefore(newNode,
referenceNode);
The Node.isDefaultNamespace() method accepts a namespace URI as an
argument and returns a Boolean with a value of true if the
namespace is the default namespace on the given node or false if
not.
Syntax:
result = node.isDefaultNamespace(namespaceURI);
The Node.isEqualNode() method tests whether two nodes are equal.
Two nodes are equal when they have the same type, defining
characteristics (for elements, this would be their ID, number of
children, and so forth), its attributes match, and so on. The
specific set of data points that must match varies depending on
the types of the nodes.
Syntax:
var isEqualNode = node.isEqualNode(otherNode);
The isSameNode() method for Node objects tests whether two nodes
are the same (that is, whether they reference the same object).
Syntax:
const isSameNode = node.isSameNode(otherNode)
The Node.lookupPrefix() method returns a DOMString containing the
prefix for a given namespace URI, if present, and null if not.
When multiple prefixes are possible, the result is
implementation-dependent.
The Node.lookupNamespaceURI() method accepts a prefix and returns
the namespace URI associated with it on the given node if found
(and null if not).
Syntax:
var namespace = node.lookupNamespaceURI(prefix);
The Node.normalize() method puts the specified node and all of its
sub-tree into a "normalized" form. In a normalized sub-tree, no
text nodes in the sub-tree are empty and there are no adjacent
text nodes.
Syntax:
element.normalize();
The Node.removeChild() method removes a child node from the DOM
and returns the removed node.
Syntax:
node.removeChild(child);
The Node.replaceChild() method replaces a child node within the
given (parent) node. Note the idiosyncratic argument order (new
before old). ChildNode.replaceWith() may be easier to read and
use.
Syntax:
let oldChild = parentNode.replaceChild(newChild, oldChild);
Information on this page is taken from
MDN