When loading a web page, a browser creates a DOM of the page, which is an application programming interface (API) that represents an HTML, XHTML, or XML document as a tree structure. We’ll go into APIs in more depth later on, but an API is a set of clearly defined methods used to communicate among different components.
In the DOM, the contents of an HTML document are organized into a tree structure, called the DOM tree. The DOM tree consists of nodes, which can represent HTML elements, text, or comments. As a reminder, an HTML element typically consists of an opening tag, e.g., <p>; some content; and a closing tag, e.g., </p>.
To give a graphical example of a DOM tree, we’ll look at the tree example from w3. In this example, the HTML file is as follows:
<table> <tbody> <tr> <td>Shady Grove</td> <td>Aeolian</td> </tr> <tr> <td>Over the River, Charlie</td> <td>Dorian</td> </tr> </tbody> </table>
The DOM tree representation of the above HTML would look like this:
The topmost node in the DOM tree is always the document object. Therefore, “document” is the parent node to every other node. Similar to HTML, a child node is one that is nested inside its parent node. If a parent node has more than one child node, these children are considered siblings.
Now that we’ve gone over the basics of the DOM, let’s explore how we can start interacting with it. In order to create interactivity by changing HTML elements, we first need to be able to find the HTML elements we want to change. You can select the desired nodes in the DOM using two different types of selectors: CSS selectors and relational selectors.
As a refresher, CSS selector syntax is the notation used in style sheets to select which elements the given style should be applied to.
- Tag: The selector “p” finds elements with the <p></p> HTML tag.
- Class: The selector “.abc” finds all elements with
- ID: The selector “#xyz” finds the element with
id="xyz", which should be unique.
Relational selectors offer an alternative method of moving through the DOM tree using the relationships between nodes. These relationships are contained within the nodes as properties. For example, the following properties can be used to move through the DOM tree:
Accessing Nodes with CSS Selectors
Now that we’ve looked at different methods for selecting elements, we’ll learn how to apply these tools to access nodes. As a reminder, the document object is always the topmost node in the DOM tree. Therefore, to access any HTML element, you must always start by accessing the document object.
const firstContainer = document.querySelector(".container");
To return all of the elements that match a given selector, use the .querySelectorAll() method. For example, to return all of the div elements in a page:
const allDivElements = document.querySelectorAll("div");
Accessing Nodes with CSS-based Methods
First, the .getElementsbyTagName() method finds all of the elements that have the given HTML tag. For example, to return all of the div elements in a page, you can use the following statement. Note that this statement is equivalent to the statement above.
const allDivElements = document.getElementsbyTagName("div");
Second, the .getElementsbyClassName() method finds all of the elements that have the given class name. For example, to return all of the elements with the class “container”:
const allContainers = document.getElementsbyClassName("container");
Third, the .getElementbyID() method returns the single element with the given ID. Note that this method is intended to return only a single element by design because HTML IDs should be uniquely applied to only one element. For example, to return the element with the ID “intro”:
const intro = document.getElementbyID("intro");
Accessing Nodes with Relational Selectors
const firstTr = document.querySelector("tr"); let trChildNodes = firstTr.childNodes; let trChildNodesArray = Array.from(trChildNodes);
In addition to the childNodes property, all parent nodes also have the children property, which acts similar to childNodes but returns only element nodes, omitting nodes of other types like text or comments. This property also returns a node list, not an array.
- CSS selectors used with the
- specific CSS-based methods, such as the
- relational selectors, such as the