The Document Object Model
What can you do with the DOM?
HTML DOM Tree
A good way to visualize the HTML DOM is through an inverted tree of elements, attributes, texts and other node types. At the root we have the document itself, which then branches off to the head and body elements.
Node Types of a DOM Tree
As you can see from the tree above, nodes make up our tree. There are four main types of nodes - document, element, attribute and text nodes.
1) Document node
The document node is the root, and is the starting point of all elements. All other nodes start at the document node.
2) Element nodes
Element nodes are the HTML tags that act as the backbone to the page. When viewing a page's HTML source, this includes all HTML tags embedded within brackets (
3) Attribute nodes
HTML elements can have attributes. For example, in the
<a href="http://google.com">Google</a> element, the attribute is the
href value. Other common attributes include
id, which can be changed to trigger new rules.
One important aspect of attribute nodes is that they are not children of the elements that contain them. If you look back at the diagram, notice that the attribute nodes are on the side of their elements, not below.
4) Text nodes
Text nodes are children of elements that contain text. Text nodes do not include other elements, so if there exists an element within another, it becomes a child of the parent element.
Document properties and models
Here are a list of document properties. In order to call these, use the dot notation with the document object (eg.
- Title of the document.
- Date at which document was last modified.
- URL of current document.
- The domain of the current document.
- Write text to the document.
- Obtain the element by the id attribute.
- List all elements that match a CSS selector query.
- Create a new element.
- Create a new text node.
Retrieving a single element and DOM traversal
When selecting elements from the DOM, we can either select one or many nodes. Let's start with retrieving a single element.
The most efficient way to obtain an element is through its
id attribute. We may do this with the
getElementById() method, in which we simply pass in the name of the
id. Since we know that no two elements can share the same
id, we are ensured that the browser terminates right after finding the first
id, resulting in quickness and responsivity.
var firstItem = document.getElementById('first')
This command will store the reference to the element with an
first within the
Another way to select just one element is through a query selector. Given a CSS selector, this returns only the first matched item.
firstParagraph = document.querySelector('p') # First
tag. document.querySelector('.item') # First element with a class "item"
Traversing the DOM - single elements
Once we have selected a single element, we may access the nodes around it through these properties:
- Select parent of current node.
- Select the previous sibling node.
- Select the next sibling node.
- Select the first child of current element.
- Select last child of current element.
Selecting multiple elements NodeLists
Selecting on element at a time is great for when you want to add a simple interactive feature, but many times you'll want to manipulate multiple elements. There are a few methods that we may use to select multiple elements, which we will see here.
The objects that act as a container to hold several node references are known as NodeLists. There are two types of NodeLists: live and static.
Live vs. Static
One thing we should mention before we begin is whether the NodeList is live or static. In a live NodeList, elements within the NodeList are updated, as scripts are run. A NodeList that is static does not change even after elements are updated on the DOM.
3 ways to access NodeLists
Note that if a method can return a NodeList, it always will. Even if it returns just one item, it is to be treated as a NodeList of size one. Let's now look at the three ways we can obtain a nodelist.
1) Getting elements by class
querySelector() function, we were only able to select the very first element it approached. To access all the elements of a certain class, we use
var allItems = getElementsByClassName('item')
2) Selecting elements by tag
Another way to perform a similar function as above is to select an element by its HTML tag. For example, if you were to select all list elements
var allListItems = getElementsByTagName('li')
3) Getting elements matching a CSS selector
To obtain even more power and flexibility, we can use the
querySelectorAll() function, which matches elements that match a CSS selector query. This method returns a static NodeList. The following selects all links that are external (or exit the domain).
Traversing the DOM - multiple elements
Another way we may traverse the DOM list is by getting all child nodes of a certain element. We may access an element's child nodes through its
var list = querySelector('ol') var orderedListItems = list.childNodes
orderedListItems will always be a NodeList.
Let's now learn how to handle a NodeList. Recall that NodeLists are a type of collection - a special object that has array-like syntax but object-like capabilities.
Accessing each node
There are two ways we can access a node within a NodeList - the array-like and the object-like way. Since NodeLists use a zero-based index, we are choosing the first item in this example:
Try accessing through the array method, as this is easier to type out, and faster to process.
You can also use the firstItem property, which has the same function as above.
Oftentimes you'll want to loop through all the nodes and apply some property to everything. Since we can access each node with its index and know the NodeList's length, we may access and apply a function to all elements.
for (var i = 0; i < myNodeList.length; i++) // Apply things here. myNodeList.item(i)
Shortcuts to grabbing multiple elements
<a>elements with a name attribute.
- All the form elements within a document.
- All link elements with an href attribute.
Modifying Text and Attributes Fields
Let's now talk about accessing and updating text nodes and attribute fields.
Accessing and updating text nodes
First we must select the element that contains the particular text node we want to edit. We can store its reference into a variable, and use the
firstChild property to access its text element. Any text within any of our element's children will not be included.
The text of the text node can be accessed using its only property,
nodeValue. Through this variable, we may access or update the text node.
var item = querySelector('li'); itemText = item.firstChild; itemText.nodeValue;
nodeValue property simply returns the content of the node.
Another approach is the use
innerHTML, which obtains all the text and markup inside of an element. This will access all child elements and the text content within.
innerHTML should not be used, as it is not considered a standard by the W3C.
The standard way to accessing text is through the
Setting this node will remove all child elements within, and replace it with the given text.
textContent is more powerful than
innerHTML, since HTML elements are not parsed; this allows you to to write HTML character within an element.
Accessing and updating attributes
As you should recall, attributes are the properties given to an HTML element. For example, the anchor tag (
<a href=""></a>) should always have an
href attribute. Let's now look at the methods that are used to access, modify and update these attributes.
- True if the element contains the attribute
a, otherwise False.
- Return value of the attribute
- Set the attribute value
- Removes the
aattribute from the element.
Creating and Deleting Elements
We've looked at how to access the current elements on the DOM, so now let's learn how to create and delete them.
To create an element, use the
createElement() method, which takes in an element type. We then store this reference into a variable, and use the methods we learned in the previous lessons to add attributes and text nodes.
var newElement = document.createElement("p"); body.appendChild(newElement); body.newElement.removeChild(newElement);
To set attributes to our newly created element Now we can just set the ID.
Creating a text node
We may also create a text node by using the
createTextNode() method. Simply attach this node to our element.
var myTextNode = document.createTextNode("text here"); newElement.appendChild(myTextNode);
Adding the element to the DOM
To append the element to the DOM, we use the
appendChild() method. This takes in the variable that holds a reference to your newly created element. You can then attach it to any pre-exiting element.
To remove a node, simply use the
var elementRemoval = document.getElementById("removeMe"); document.body.removeChild(elementRemoval);