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!
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.
document.getElementById(ID) - returns the element with the ID
document.getElementsByTagName(name) - returns an array of all the elements with the 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.
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.
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 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.
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)
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.
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.
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.
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.
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.