Accessing DOM Elements

Now that you are more comfortable with some programming fundamentals, we can take a deeper dive into the programming interface the browser provides to control the DOM using JavaScript.

Working with element nodes

Each element on your HTML page has an associated element node in the Document Object Model (DOM). The DOM can be accessed using JavaScript through the document object. document behaves like any other JavaScript object, and has many different properties and methods that are useful in accessing nodes in the DOM.

document.querySelector(selector)

Let’s start with an example:

document.querySelector() is a function that takes an element selector as an argument. These selectors are the same as those used to apply CSS styles to HTML elements. document.querySelector() will return the first element it finds with the selector provided. If no element is found using that particular selector, the function will return as null.

In the code above, we store the element node associated with the <h1> element in a variable named h1. However, as you may have noticed, this doesn’t result in anything meaningful when you run the code. The h1 element node is also a JavaScript object, meaning we can change properties of the object to dynamically change our page’s HTML. For instance, the innerHTML property stores the HTML contents stored between the <h1> opening and <​/h1> closing tags:

The above example clearly demonstrates JavaScript’s ability to manipulate HTML content using the DOM. Now it’s your turn!

Exercise

Store the <p> element below in a variable, then change the contents of the <p> element programmatically.

Element nodes have many different properties that can be used to modify the associated HTML. Let’s take a look at a few more properties.

Element.id

Use Element.id to return the value of the element node’s id attribute.

Element.outerHTML

Element.outerHTML returns a string-like value that contains both the content of the HTML element and its opening/closing tags.

There are a vast number of properties available on an individual element node to you, the programmer. A full list of those properties can be found here.

Though you don’t need to memorize this list, it will be helpful to get familiar with some key properties to make quick DOM manipulations easier.

document.getElementById(id)

If an element has an id attribute, we can access it by using the document.getElementById() function:

For reference, we could also use an id selector with document.querySelector() to achieve the same result.

Working with multiple element nodes

There are also functions that allow us to access a collection of element nodes.

document.querySelectorAll(selector)

Say we had an unordered list of to-do items. We could store all of the list’s items in a variable using document.querySelectorAll():

Once we have stored the element nodes, they can be accessed just like items in an array:

document.getElementsByTagName

The following function will also return an array-like object with all the elements that match the tag name you place in the argument:

Exercise

Given the following HTML, find all the elements with the class red, and change their color to blue.

Hint: An element’s color can be changed using the Element.style.color property. Set the property value as a string.