Document Object Model (DOM)

The Document Object Model is a map of the HTML document. Elements in an HTML document can be accessed, changed, deleted, or added using the DOM. The document object is globally available in the browser. It allows to access and manipulate the DOM of the current web page.

DOM Access

Selecting Nodes from the DOM

getElementById() and querySelector() return a single element.
getElementsByClassName(), getElementsByTagName(), and querySelectorAll() return a collection of elements.

Javascript
// By Id
var node = document.getElementById('id');

// By Tag Name
var nodes = document.getElementsByTagName('tag');

// By Class Name
var nodes = document.getElementsByClassName('class');

// By CSS Query
var node = document.querySelector('css-selector');
var nodes = document.querySelectorAll('css-selector');

Manipulating the DOM

Manipulating a node's attributes

It's possible access and change the attributes of a DOM node using the dot notation.

// Changing the src of an image:
var image = document.getElementById('id');
var oldImageSource = image.src;
image.src = 'image-url';

//Changing the className of a DOM node:
var node = document.getElementById('id');
node.className = 'new-class';

Manipulating a node's style

It's possible to access and change the styles of a DOM nodes via the style property. CSS property names with a - must be camelCased and number properties must have a unit.

body {
    color: red;
    background-color: pink;
    padding-top: 10px;
}

var pageNode = document.body;
pageNode.style.color = 'red';
pageNode.style.backgroundColor = 'pink';
pageNode.style.paddingTop = '10px';

Manipulating a node's contents

Each DOM node has an innerHTML attribute. It contains the HTML of all its children.

var pageNode = document.body;
console.log(pageNode.innerHTML);

// Set innerHTML to replace the contents of the node:
pageNode.innerHTML = "<h1>Oh, no! Everything is gone!</h1>";

// Or add to innerHTML instead:
pageNode.innerHTML += "P.S. Please do write back.";

To change the actual text of a node, textContent may be a better choice:

innerHTML:

• Works in older browsers
• More powerful: can change code
• Less secure: allows cross-site scripting (XSS)

textContent:

• Doesn't work in IE8 and below
• Faster: the browser doesn't have to parse HTML
• More secure: won't execute code

Reading Inputs From A Form

In page.html:

<input type="" id="identifier" value="">

In script.js:

var formNode = document.getElementById("Identifier");
var value = formNode.value;

Creating & Removing DOM Nodes

The document object also allows to create new nodes from scratch.

// create node
document.createElement('tagName');
document.createTextNode('text');

domNode.appendChild(childToAppend);  // insert childTaAppend after domNode

// insert node before domNode
domNode.insertBefore(childToInsert, domnode);
domNode.parentNode.insertBefore(childToInsert, nodeAfterChild);

// remove a node
domNode.removeChild(childToRemove);
node.parentNode.removeChild(node);

Example:

var body = document.body;

var newImg = document.createElement('img');
newImg.src = 'http://placekitten.com/400/300';
newImg.style.border = '1px solid black';

body.appendChild(newImg);

var newParagraph = document.createElement('p');
var newText = document.createTextNode('Squee!');

newParagraph.appendChild(newText);

body.appendChild(newParagraph);

Creating DOM Nodes with Constructor Functions

function Node(params) {
    this.node = document.createElement("tag");

    this.node.attribute = value;

    // operations on the node

    return this.node;
}

var node = Node(params);
domElement.appendChild(node);