Getting started with the DOM

What is DOM?

Document Object Model (DOM) is a programming interface for HTML documents. It connects web pages (HTML files) to scripts/programming languages (Javascript, Python, etc.) by representing the HTML file with a logical tree containing nodes and objects. The nodes and objects can be modified with a scripting language to behave how you want them to. We will take a look at the 2 of the most common actions when modifying the DOM, selecting the object, and performing an action on the selected object.

a sample DOM tree

Before we begin, let’s take a quick look at the diagram tree above to get a better understanding of the DOM. In our diagram, HTML is the root node, the top node of the tree, which has no parent node. HTML’s child nodes are head and body, which also makes HTML the parent node for the head and body node. Due to the relationships, head and body nodes are considered sibling nodes. As you travel down the tree, the same concept applies, each node has a parent node and can have multiple child nodes.

a sample HTML file for the DOM tree mentioned above

Using DOM methods to select an element

Looking at the HTML file above, we will grab the <h3> node with the text “Jimmy Kimmel” using various DOM methods. One thing to keep in mind is, there is no one way to do a certain thing. So, don’t get discouraged if you see someone else is doing it differently. Results are what matter. A

5 different ways to get the <h3> node with the text “Jimmy Kimmel”

I have listed 5 different ways above to get the <h3> element with id = “jimmy” attribute.

1. The first line, getElementById method takes in an id attribute, it looks for an element that has the id attribute with the value “jimmy” and returns the matching element in the DOM.
2. The second line, getElementsByTagName method takes in a tag argument, it returns a list of all <h3> elements in the DOM. Since we know the placement for the <h3> element we want, we append a [0] to the method, which returns the first item on the list.
3. The third line, querySelector method takes in a selector, the h3 tag, and returns the first matching <h3> element. Similar to the 2nd line, unless we know where the element is or know that it is the only element in the whole document, this method comes in handy.
4. Similar to the second method, querySelectorAll takes in an element attribute and returns a nodelist with all matching element nodes with the <h3> attribute in the DOM. We can then append [0] to it because we want the first node in the list.
5. Lastly, we can use the querySelector method by giving in the id attribute. As you can see, we add a # in front of the id attribute value to let the method know its an id attribute.

All 5 of these methods, return the same element:

Let’s make magic happen

Continuing with the Jimmy Kimmel element, we will add some events which will change the HTML as we move the mouse around. We will add an event listener to the Jimmy Kimmel element. We will use the format below to make changes to the Jimmy Kimmel text. Element is the object you want to perform an action on. We will use age variable, which we defined above to grab the element Jimmy Kimmel.

1. I would like to change the color of the text to red and replace “Jimmy Kimmel” with “Conan O’Brien” when the mouse cursor hovers over it. Thus, the event listener listens for the event “mouseover”. When it does, the method runs the callback function which does 2 things. It changes the text color to red with some CSS magic. The second line inside the call back function grabs the text in the <h3> element, and replaces it with “Conan O’Brien”.

a mouseover event listener

2. Now, if you were to move your cursor away from, we notice that the text and the color does not revert back to the original content and style. Which leads us to the event “mouseout”, which gets triggered when your cursor is no longer hovering over the element. We replace the event with “mouseout” and make changes to the function to revert to the original.

a mouse out event listener

3. Lastly, one of the most common website events is the mouse click which triggers events in the background. The event we are listening to is “click”. When it is triggered, you display a pop-up, with the message “Jimmy Kimmel Rules”. The pop-up will appear anytime you click on “Jimmy Kimmel”.

a click event listener

With these basic DOM methods, the front-end world is your oyster. There is no limit to how you manipulate the HTML document via DOM. To learn more about DOM, visit MDN web docs.