The essentials of DOM scripting in 10 minutes

skip to transcript

The DOM – Unscrewing the Document

The Document Object Model is a representation of the whole document as nodes and attributes.

You can access each of these nodes and attributes and change or remove them.

You can also create new ones or add attributes to existing ones.

In other words: the document is yours!

The DOM Tree

And how the browser sees it.

A nested list of nodes, attributes and child nodes.

A node can be an element or a text or a comment or many more things.

The DOM Retrieval Methods

document.getElementById(ID) - returns the element with the ID

document.getElementsByTagName(name) - returns an array of all the elements with the name.

Retrieving Elements by Tag Name

As the result of getElementsByTagName() is an array you can access each of the elements by array counter.

You can also find out how many elements with this name are in the document by reading the length property of the array.

Previous and Next Siblings

Once you’ve reached an element you can use this element as a starting point.

You can retrieve elements on the same level with nextSibling and previousSibling

You can reach the element the current one is embedded in with parentNode.

Think of the Children!

If an element contains other elements then these elements are its children.

childNodes is a list of all the first-level child nodes of the element—it does not cascade down into deeper levels.

You can access a child element of the current element via the array counter or the item() method.

The shortcut properties yourElement.firstChild and yourElement.lastChild are easier versions of yourElement.childNodes[0] and yourElement.childNodes[yourElement.childNodes.length-1] and make it quicker to reach them.

You can check whether an element has any children by calling the method hasChildNodes(), which returns a Boolean value.

Node Properties

Once you’ve arrived at the node you wanted to reach you can read out its properties:

nodeType stores the type of the node (1 for element, 3 for text)

nodeName stores the name of the node (either the element name or #textNode)

nodeValue stores the value of the node (null for element nodes and the text for text nodes)

Changing The Value of Text Nodes

The nodeValue of text nodes can be read and changed.

When you change the nodeValue the text of the node changes.

It is a good idea to make sure that the node you try to change is a text node by checking that its nodeType is 3.

Reading and Changing Attributes

Element nodes have attributes that you can change.

node.getAttribute(attribute) returns the current value of the attribute.

node.setAttribute(attribute, value) sets the value of the attribute.

You don’t need to create the attribute before you set it

.

Creating New Nodes

You can create new nodes with three methods.

newNode=node.cloneNode(bool) creates newNode as a copy (clone) of node. If bool is true, the clone includes clones of all the child nodes of the original.

document.createElement(element) creates a new element node.

document.createTextNode(text) creates a new text node.

Adding New Nodes to the Document

Both methods create new nodes, and you can apply other DOM methods to them, but they don’t appear in the document yet.

To achieve this, you need to use the following methods.

Adding, Replacing and Removing Nodes

node.removeChild(oldNode)removes the child oldNode from node.

node.appendChild(newNode)adds newNode as a new (last) child node to node.

node.insertBefore(newNode, oldNode)inserts newNode as a new child node of node before oldNode.

node.replaceChild(newNode, oldNode) replaces the child node oldNode of node with newNode.