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;
- Right click anywhere on a websites page and click inspect
2. Then use the hover button at the top right off the Dev tools.
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;
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;
And finally by Tag Name;
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
So to find the element using an ID you would use the following;
And for class name the ‘.’ syntax is used;
And for tag 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.
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 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;
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!