👋 Hey All,
Today, I'm gonna show you 15 DOM methods in JavaScript that I believe are essential for every JS developer to know.
These methods will help you in a variety of ways and are very helpful to have in your toolbelt when building applications with JavaScript.
The Methods
getElementById
The getElementById method allows you to select a DOM element by its Id as the name suggests:
document.getElementById("fun");
This code will select the DOM element with an ID of fun.
You would probably want to store this in a variable so you can use it multiple times without repeating yourself:
const fun = document.getElementById("fun");
querySelector
The querySelector method allows you to select a DOM element by a CSS selector:
document.querySelector("#fun");
This code will also select the DOM element with an ID of fun however querySelector can be used with any CSS selector.
For example, by class:
document.querySelector(".cool-class");
By element:
document.querySelector("p");
Or any other CSS selector.
Another cool aspect of this method is that it can be called on a parent element to select a child that matches the query.
For example, if you have got a paragraph with a class of text inside of a div, you can select it with the following code:
const div = document.querySelector("div");
const paragraph = div.querySelector("#text");
querySelectorAll
The querySelectorAll method is very similar to the querySelector however it returns a NodeList with all elements it found rather than just a single node.
For example, to select all paragraph elements on a page:
const paragraphs = document.querySelectorAll("p");
It is also important to know that a NodeList is different to an Array so you can't call array methods on it. However, you can convert a NodeList to an Array using the spread operator:
const arr = [...paragraphs];
Now you can use methods like 'forEachon thearr` variable since its now an array.
createElement
We know how we can select elements that already exist in the DOM. But how can we create them? For that, the createElement method can be used.
const div = document.createElement("div");
This code simply creates a div. However, the element won't be found on the page because we haven't inserted it yet. For that, we can use the appendChild method.
appendChild
The appendChild allows us to append a Node into the dom:
document.body.appendChild(div)
This code will append the div we just created inside of the body element.
It is important to know that the appendChild element only appends nodes and not text.
removeChild
The removeChild method allows us to remove a child from the DOM.
For example, lets insert a paragraph inside of the div we just created:
const div = document.createElement("div");
const paragraph = document.createElement("p");
div.appendChild(paragraph);
document.body.appendChild(div);
We can then remove the paragraph element:
div.removeChild(paragraph);
This method can also be used to remove an element that was already in the DOM, not one you just inserted. For instance:
document.body.removeChild(document.querySelector("#someElement"));
This code will remove the element with an ID of someElement from the body.
textContent
The textContent method lets us change the text in an element. For instance, lets change the text of a paragraph element with an ID of text:
document.querySelector("#text").textContent = "I'm loving this article :)";
This will change the text of the element with an ID of text. This method can be called on any node so we can use it to add text to elements we create.
For example, lets create a paragraph and change its text, then append it to the body:
const paragraph = document.createElement("p");
paragraph.textContent = "This is a cool paragraph!";
document.body.appendChild(paragraph);
innerHTML
The innerHTML method lets us change the HTML inside of an element. For example, we can add a div inside of the body:
document.body.innerHTML += "<div>My Div</div>"
The key difference between innerHTML and textContent is that innerHTML lets us change the HTML as well as whatever text we want inside, while textContent only lets us change the text.
getAttribute
The getAttribute method lets us retrieve the value of any attribute on an element.
For example, we can select the href of an a tag:
document.querySelector("a").getAttribute("href");
This method can be used to retrieve any attribute on any element.
setAttribute
The setAttribute method lets us set the value of an attribute on an element.
For example, lets change the href of an a tag:
document.querySelector("a").setAttribute("href", "/somewhere-else" );
The first argument is the attribute name and the second is the value.
addEventListener
The addEventListener method is used to run a function when an event is triggered.
For example, lets log something to the console when a button is clicked:
const btn = document.querySelector("button");
const logFunction = () => {
console.log("Button was clicked");
}
btn.addEventListener("click", logFunction);
The first argument is the event name (there are plenty of them, do a quick google search to see them all) and the second is the function we want to run. It is best to store the function in a variable as we have done rather than use an anonymous function so that the event listener can be removed in the future if we wish.
removeEventListener
The removeEventListener method lets us remove an event listener.
For example, to remove the click event listener we added to the button above:
btn.removeEventListener("click", logFunction)
Now, when the button is clicked logFunction will no longer run.
classList (add(), remove(), contains())
Finally, lets discuss the classList property which contains 3 methods:
- The
add method
- The
remove method
- & The
contains method
The classList property exists on all nodes and returns a DOMTokenList of all classes on the particular element.
document.querySelector("h1").classList;
This code retrieved all classes on the h1 element.
add()
We can call the add method on the classList to add a class to an element:
document.querySelector("h1").classList.add("myClass");
We can also pass in multiple classes to add multiple classes at once:
document.querySelector("h1").classList.add("myClass", "anotherClass", "thirdClass");
remove()
We can call the remove method on the classList to remove a class from an element:
document.querySelector("h1").classList.remove("myClass");
We can also pass in multiple classes to remove multiple classes at once:
document.querySelector("h1").classList.remove("myClass", "anotherClass");
contains()
We can call the contains method on the classList to see if an element has a certain class:
document.querySelector("h1").classList.contains("myClass");
This methods return a boolean and can be used in conditional statements as well as.
Take Away
This was a very long article with a lot of information. We've covered plenty of DOM methods that will really up your JavaScript developed skills. I recommend you play around these methods to get a better grasp of their use cases and why they are useful.
👌 Thanks for reading this article!
If you like what I do and would love to see more related content, follow me on my other social platforms:
GitHub: Blake-K-Yeboah
LinkedIn: Blake Yeboah
Twitter: Blake Yeboah
You can also show your support by buying me a coffee 😃
