BEGINNERS GUIDE: Finding elements in the DOM (JavaScript)

Having recently moved across from Ruby, starting a new language was slightly tricky. It took me a few goes to get around finding elements in the DOM with JavaScript. There are a few different ways to do this and this blog will explain what I think is best practice.

If you are reading this blog, your probably aware that JavaScript can add functionality to elements on a webpage. As we can’t do anything to elements if we cant find them, finding them becomes very important. And you will be doing it a lot.

The first thing to start with would be to explain the DOM. However, this is a blog post in itself, so I will give a basic explanation and if you need more help I’ve added some other blogs below. The DOM (Document Object Model) is basically the section of code that is produced that makes up the website that we are looking at/ creating. It looks as if it is made up of HTML but it is actually slightly different and is language-independant. For the purposes of this blog all we need to know is that the DOM is a tree like structure. Which has different levels/ nodes that make up different parts or elements of the document.

If you want some additional reading on the DOM, here are some good blogs.

• https://medium.com/@timothyrobards/javascript-fundamentals-master-the-dom-part-1-82433084fb40
• https://medium.com/@thatisuday/understanding-basics-of-dom-265b73d958d1
• https://medium.com/@manuelro/understanding-the-dom-basics-1c0b35970d90

To start with, for finding where the element is located in the DOM you can use the Dev tools provided in Google Chrome.

For this code along I am going to use the BBC sport website for examples if you want to follow me the link is here; (https://www.bbc.co.uk/sport).

To open up the Chrome developer tools you are going to want to do the following;

1. Right click anywhere on a websites page and click inspect

right click and then choose select.

2. Then use the hover button at the top right off the Dev tools.

open the Dev tools and click the button in the top right that shows a cursor and a square.

Then you can see all the things the define that element, like its Class and Id. This will be helpful when we want to find it using code.

Finding elements using specific functions

The first way to find the element is to use a specific method just for what you need. This will be a function that already exists in Javascript, so for finding ID, you would use the following;

This will find an element by its ID.

All this is, is a function. By calling ‘document.’ first you just tell it to look through the whole document, i.e all of the DOM.

You could then do this for Class name;

This will find the first element with this class name.

And finally by Tag Name;

This will find the first element with this tag type.

Using querySelector

You can, and I suggest you do, use another function called .querySelector. Which allows you to use the CSS selectors as an argument to find elements. You will need to use it anyway, as it can be slightly changed to find all the instances of a specific element, rather than just the first one. I also find it is much less confusing to just have one way of finding something

I suggest you just use querySelector for everything.

So to find the element using an ID you would use the following;

This will find the element with this ID using the HASHTAG CSS selector.

And for class name the ‘.’ syntax is used;

This will find the first element with this Class using the DOT CSS selector.

And for tag you don’t need to add anything;

This will find the first element with this tag — querySelector will default to finding the tag so you don’t need to add anything.

Give this a go on a website, hover over something and find its ID. Then swap over to the console and try and find it using a querySelector. You should see that element returned.

Here is me hovering over the main heading of the BBC Sport Website. You can see it is highlighted in the DOM on the right and its class is “.sp-c-global-header__logo”

You can then type this class name into our querySelector in the console section of the Dev Tools. This will return the element that we are looking for.

Finding multiple elements in the DOM

All these examples only find the first instance of the element. If we use querySelectorAll then we can get all the instances of that element.

This would find all the elements in the document with that ID.

This works the same for all the CSS selectors, so I’m not going to write them all out again.

The answer will be given back to you as what looks like an array. It is not actually an array but we can treat it as if it is one.

Give that a got in your console and see if you can find multiple instances of something.

You can also group by adding more than one ID, Class name or tag type to the CSS selector. For this use the following code;

This will bring back all the elements that have an id of ‘ID1’ , ‘ID2’ and ‘ID3’

The next steps would be to look at things like ‘.innerText’ which will give you the….. you guessed it….inner text of the element, but I’ll leave that for someone else’s blog. Thanks and I hope this was useful to someone!