High-speed DOM operations

In order to deal with the DOM efficiently, we need to understand its nature. The DOM is a tree structure that represents the document that is open in the browser. Every element of the DOM is an object that is called node.

Every node being an object has properties and methods (https://developer.mozilla.org/en/docs/Web/API/Node). There are different types of node. In the preceding image, you can see a document node, element nodes, and text nodes. In reality, the tree may also contain specific node types such as comment nodes, doctype nodes, and others. To illustrate the relationships within the tree, we can say that HTML has two child nodes HEAD and BODY, which relate to each other as siblings. Obviously, HTML is the parent node to HEAD and BODY. We can use these relations that are accessible via node properties to navigate through the tree:

var html = document.documentElement;
console.log( html.nodeName ); // HTML

var head = html.childNodes[0];
console.log( head...