How to Get Nodes from & Query the DOM with JavaScript

,

You can think of The Document Object Model (DOM) as a tree with branches of nodes. The DOM is what the browser creates to display the content on your screen. There are 12 different types of nodes and they may have children nodes of their own.

Once you know how to grab parts of the DOM using JavaScript, you can start manipulating those nodes in many ways. Let’s look at some examples of getting DOM nodes using Javascript.

How to see the DOM in the Console

To see the DOM, you can:

  1. Right-click and inspect any webpage inside your browser.
  2. Click on the Console tab of your browser.
  3. Type document into the console text field.

You’ll be presented with a line that says “document” with a dropdown arrow that you can click on to clearly see the document object and see the precise structure of the page. It’ll look something like this:

Get Nodes in the DOM with JavaScript

IDs are unique identifies that only appear in the DOM once per page, while classes and tags can appear multiple times. We can use JavaScript to grab nodes by its ID, class, and tag.

Get By ID

For example, if we inspect theme Skelementor, the header area has the id #site-header and we can grab it using JavaScript in the Console like this:

document.getElementById('site-header')

Get By Class

Say I want to grab any image that’s rounded with the class .is-style-rounded I can grab all of those images by class using:

document.getElementsByClassName('is-style-rounded')

Get By Tag

If I wanted to get all the blog posts titles on my homepage, you can do the same by grabbing them all by tag names. So if I wanted to grab all my h2s on a page could use:

document.getElementsByTagName('h2');

Assign queried nodes to a variable

Above, you can see that you can get nodes by their ID, class, and tag name, so now, let’s look at assigning and storing the nodes to a variable so we can return it (and manipulate it).

We know that IDs are singular, so when we return them, they’ll only be one specific nodes, whereas classes and tags can be multiples. We’ll look at two examples, ID and Tags.

Return by ID

Earlier, we got the header area of Skelementor by ID; let’s look at another example on WordPress.org’s homepage and get the ID #main, and assign it to a variable named mainContent:

var mainContent = document.getElementById('main')

Now, if we type mainContent into the Console, we’ll be returning that main content node by its ID like this:

Return by Tag

Now let’s see the difference if we assign all the h2 tags on the homepage of my site and return them to the Console:

var secondaryHeaders = document.getElementsByTagName('h2')

Now, if we type, secondaryHeaders into the Console, we’ll get an HTML collection of h2 nodes, with an index similar to arrays, as you can see from the screenshot below.

If I wanted to get the third H2 in that HTML collection I could type secondaryHeaders[2] to grab the third, and it will return that single node as the ID did earlier, instead of the whole collection.

Cycle through an HTML collection:

So we know how to query the dom to get an HTML collection and how to get individual nodes by typing in the variable name and each of their individual indexes, but we can also loop through that HTML collection of seven h2 nodes and display them all like so:

for(i=0; i < secondaryHeaders.length; i++){
  console.log(secondaryHeaders[i]);
}

You can see that this is excellent since eventually, you may have 100s of blog posts, and typing in each index would be a pain.

Query selectors

With the query selector, you can get nodes by ID, tag, or class like before:

document.querySelector("#site-title");

That’s great, but what if we have multiple nodes on the page that don’t have their own ID? In those cases, we’ll need to be super specific and drill down into the DOM to grab those nodes, and that’s where the query selector comes in handy.

For example, let’s look at my site’s navigation and the goal is to grab the second menu label “Blog” between the “Home” and “Contact” links. I can grab “Blog” like this:

document.querySelector("ul.wp-block-navigation__container li:nth-child(2) > a > span > strong");

As you can see, we’ve grabbed that single navigation node, even though it didn’t have any specific ID and the other menu links had very similar classes.

There’s also querySelectorAll() which can be used to grab a collection of specific nodes. You might want to use this method if there is a footer and header navigation on the page, and you wanted to grab all the menu items in only one of those navigations.

So that’s a little look at getting nodes from the DOM with JavaScript. Here are some additional resources:


Leave a Reply

Your email address will not be published. Required fields are marked *