DOM manipualte

Using appendChild() and insertBefore() to Add Node Objects to the DOM

The appendChild() and insertBefore() node methods allow us to insert JavaScript node objects into the DOM tree.

The appendChild() method will append a node (or multiple nodes) to the end of the child node(s) of the node the method is called on. If there is no child node(s), the node being appended is appended as the first child.

<div id="A">A</div>

var element = document.getElementById('A');  
var strong = document.createElement('strong');  
var text = document.createTextNode('1');  

We use insertBefore() to control the node beyond append them to the end of the nodes

The insertBefore() method requires two parameters: the node to be inserted and the reference node in the document before which you would like the node inserted.

If you do not pass a second parameter to the insertBefore() method, then it functions just like appendChild().

Using removeChild() and replaceChild() to Remove and Replace Nodes

Removing a node from the DOM,you need to select the Node you want to remove
you need to gain access to its parent element, typically by using the parentNode property. It’s on the parent node that you invoke the removeChild() method, passing it the reference to the node to be removed.

document.getElementById('p').parentNode.removeChild(document.getElementById('p')); document.getElementById('p').parentNode.replaceChild(element,document.getElementById('p'));

replaceChild() and removeChild() return the replaced and removed node, respectively. Basically, the node is not gone just because you replace or remove it. These actions simply take the node out of the current live document. You still have a reference to it in memory.

Using cloneNode() to Clone Nodes

Using the cloneNode() method, it’s possible to duplicate a single node or a node and all its child nodes.

var cloneB = elementB.cloneNode();  

To clone a node and all its child nodes, you pass the cloneNode() method a parameter of true.

var cloneB = elementB.cloneNode(true);  
console.log(cloneB.innerHTML);//"1<div id='A'>A<strong></strong></div>"

When cloning an Element node, all of its attributes and their values (including in-line events) are cloned as well. Anything added with addEventListener() or node.onclick is not cloned.

Getting a List/Collection of All Immediate Child Nodes

Using the childNodes property produces an array-like list of the immediate child nodes.

console.log(cloneB.childNodes);//[text, div#A]

Converting a NodeList or HTMLCollection to a JavaScript Array

To convert an array-like list to a true JavaScript array we pass the array-like list to call() or apply(), in which the call() or apply() is calling a method that returns an unaltered true JavaScript array.;

Traversing Nodes in the DOM

  • parentNode
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Using the following properties we can traverse the DOM, while ignoring text and comment nodes:

  • firstElementChild
  • lastElementChild
  • nextElementChild
  • previousElementChild
  • children(it will return HTMLCollection, all child nodes including text nodes)
  • parentElement

Verifying a Node Position in the DOM Tree with contains() and compareDocumentPosition()

It’s known whether a node is contained inside another node by using the contains() node method.


compareDocumentPosition() are confusing

| Number code returned from compareDocumentPosition() | Number code information | | | --- | --- | --- | | 0 | Elements are identical. | 1 | DOCUMENTPOSITIONDISCONNECTED Set when selected node and passed-in node are not in the same document | 2 | DOCUMENTPOSITIONPRECEDING Set when passed-in node is preceding selected node. | 4 | DOCUMENTPOSITIONFOLLOWING Set when passed-in node is following selected node. | 8 | DOCUMENTPOSITIONCONTAINS Set when passed-in node is an ancestor of selected node. | 16,10 | DOCUMENTPOSITIONCONTAINED_BY (16, 10 in hexadecimal) Set when passed-in node is a descendant of selected node.

Determining Whether Two Nodes Are Identical

two nodes are equal if and only if the following conditions are satisfied:

  • The two nodes are of the same type.
  • The following string attributes are equal: nodeName, localName, namespaceURI, prefix, and nodeValue. That is, they are both null, or they have the same length and are identical character for character.
  • The attributes NamedNodeMaps are equal. That is, they are both null, or they have the same length and for each node that exists in one map, there is a node that exists in the other map and is equal, although not necessarily at the same index.
  • The childNodes NodeLists are equal. That is, they are both null, or they have the same length and contain equal nodes at the same index. Note that normalization can affect equality; to avoid this, nodes should be normalized before being compared.

Calling the isEqualNode() method on a node in the DOM will ask if that node is equal to the node that you pass it as a parameter.