Basic JavaScript - Document-Object Model (DOM)

This post corresponds to notes taken while reading Eloquent JavaScript.

HTML tags are organized in a tree object called DOM in order to be accessible from JavaScript code. The links in the tree are properties of node:

• parentNode property refers to the object container of the current node
• childNodes property refers to a pseudo-array that stores the children of the node
• firstChild and lastChild refers to the first and last child, or null where there are no children.
• nextSibling and previousSibling refers to the nodes sitting next or before the current node, these nodes have same parent node as the current one.

Example:

console.log(document.body);
console.log(document.body.parentNode);
console.log(document.body.childNodes.length);
console.log(document.documentElement.firstChild);
console.log(document.documentElement.lastChild);
console.log(document.body.previousSibling);
console.log(document.body.nextSibling);

There are two types of nodes: HTML tags and simple text. Node type can be found by checking the nodeType property which may has different values:
- 1 for regular nodes
- 3 for text nodes
- 9 for document object
Example:

function isTextNode(node) {
 return node.nodeType == 3;
}
console.log(isTextNode(document.body));

Regular nodes have the nodeName property (which is always capitalized, e.g. "IMG") to store the HTML tag type, while text nodes have the nodeValue that contains the text content.

The innerHTML property gives the HTML text inside the node without the node tag, while the outerHTML property (supported by some browsers) include the node itself.
Example:

document.body.firstChild.innerHTML = "bla bla";

An alternative to access a node via tree traversal is to use the document object property getElementById and indicating the node identifier (value of the 'id' attribute), or call it directly with $. In addition, all DOM nodes have the getElementsByTagName property that returns an array of all nodes with a given tag name.
Example:

var picture1 = document.getElementById("picture1");
var picture2 = $("picture2");
console.log(document.body.getElementsByTagName("H1")[0]);

Nodes can be created dynamically thanks to the document methods createElement to create regular node and createTextNode to create text node. All nodes have an appendChild method to add an element to a node. To insert a node before another one use the parent insertBefore mehod. To replace a node with another one or remove it from its parent use replaceChild and removeChild methods.
Example:

var secondHeader = document.createElement("H1");
var secondTitle = document.createTextNode("Chapter 2: Deep magic");
secondHeader.appendChild(secondTitle);
document.body.appendChild(secondHeader);

New attributes can be added to a node by using its method setAttribute or directly as a node property. Node's attribute can be accessedd as a property of the DOM node or via getAttribute.
Example:

var newImage = document.createElement("IMG");
newImange.setAttribute("src", "img/Alto.png");
document.body.appendChild(newImage);
console.log(newImage.getAttribute("src"));

The style property refers to the CSS style object of a node. Example:

$("picture").style.borderColor = "green";
$("picture").style.display = "none";
$("picture").style.position = "absolute";
$("picture").style.width = "400px";
$("picture").style.height = "200px";