Skip to content
CPSC-1520-DG

Finding DOM Elements

In JavaScript, we are often interested in manipulating some part of our web page. But how do you find elements?

Searching the DOM for one or more elements can be achieved by several methods. As you practice using these methods, you will discover that getting a reference to a particular DOM element can be done in more than one way. Use whichever one that seems best for your situation.

Starting Points

The DOM is a tree-like structure of HTML elements. At the very root of that structure is an object called document. It represents the entire HTML page that has been loaded and rendered by the browser. The DOM search methods identified below are part of that document object. Here’s an example of its use:

let myTag = document.querySelector('h2');
console.log(myTag); // <h2>ACME - <i>A Company Making Everything</i></h2>

When we use the document object with the .querySelector() method, we are starting our search from the very beginning (or root) of our document.

We don’t always have to start from the root document to find the element(s) we want. If we have a reference to some other HTMLElement in our DOM, then we can search from just within that part of our web page.

let main = document.querySelector('main');
let myTag = main.querySelector('h2');
console.log(myTag); // <h2>On This Page</h2>

DOM Query

By far the most versatile way to find DOM elements is to use .querySelector() or .querySelectorAll(). Both of these methods take a single parameter - a selector - which identifies the path to the DOM elements. The object on the left of the dot can be either the root document or some other HTMLElement on the page. Central to using these methods is a clear understanding of selector strings.

Selector Strings

If you’ve written CSS, you are probably familiar with selectors. They are the combination of tag names, id names and/or class names which identify what parts of the DOM should be rendered with the CSS Styles. In the following sample, html body is the selector.

html body {
    display: grid
;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    min-height: 100vh;
}

We use a selector string in JavaScript when calling .querySelector() and .querySelectorAll(). Selector strings build on three basic kinds of names.

  • Type selectors identify a DOM element by its tag name, such as <h2>. These selectors use the name of the tag (without the < and > symbols).
  • Class selectors identify a DOM element by the name used in the class or className attribute of the tag. Class selectors are prefixed with a period (.) before the name, such as .active.
  • ID selectors identify a DOM element by the name used in the id attribute of the tag. ID Selectors are prefixed with a hashtag symbol (#) before the name, such as #intro.

We can expand on these type names with certain patterns to identify complex paths through the DOM. Here are some examples.

  • details > summary - Look for <summary> tag directly under a <details> tag.
  • header #tag-line - Look for an id='tag-line' attribute on any element within the <header> tag.
  • nav li:nth-last-child - Look for last <li> tag within a <nav> tag.
  • header > nav li.active - Look for an <li> tag with the class .active anywhere under the <nav> tag; the <nav> tag must be an immediate child (>) of the <header> tag.

.querySelector()

The .querySelector() method is used to find a single DOM element based on the supplied selector. It always returns the first item that matches the selector pattern. Here are some samples.

  • document.querySelector('main h1') - Finds the <h1>Acme Corp</h1> element.
  • document.querySelector('.active') - Finds the <li class="active"><a href="#">About</a></li> element.
  • document.querySelector('main .active') - Finds the <a href="#" class="active">About</a> element.
  • document.querySelector('#tag-name') - Finds the <h2 id="tag-line">ACME - <i>A Company Making Everything</i></h2> element.

.querySelectorAll()

The .querySelectorAll() method is used to find all the DOM elements that match the supplied selector. Here’s an example.

let items = document.querySelectorAll('main aside nav li');

This returns all the sidebar navigation links for the page. The result of this method is a NodeCollection of DOM elements. Node collections are similar to arrays in that you can use an index position to identify a specific item in the collection. Here’s the result of running the JavaScript code above.

  • <li><a href="#">Our Company</a></li>
  • <li><a href="#">Our People</a></li>
  • <li><a href="#">Our Values</a></li>

If you wanted to get the second item in the collection, you could reference it with an array indexer.

console.log(items[1]);

Other DOM Search Methods

.getElementById()

The .getElementById() method is used to find a single DOM element with a specific id attribute value. This method takes one parameter: the name of the id value as a string (without the hashtag symbol). This method is only available on the document object. For example.

document.getElementById('tag-line')

This returns the following element in our DOM.

<h2 id="tag-line">ACME - <i>A Company Making Everything</i></h2>

.getElementsByClassName()

document.getElementsByClassName('active')

This returns a collection of two elements in our sample DOM.

  • <li class="active"><a href="#">About</a></li>
  • <a href="#" class="active">About</a>

.getElementsByName()

.getElementsByTagName()

.getElementsByTagNameNS()

Author TODO:

MDN Resource Links:

  • Basic CSS selectors gives an introduction to selectors in CSS, beginning with identifying the basic kinds of selectors.
  • CSS selectors is a reference page for all the selector patterns; it contains links to specific parts of the selector syntax
  • CSS selectors and combinators gives a short set of simple samples of CSS selectors
  • CSS selector structure gives an overview of the patterns used in assembling CSS selectors