The 3 most commun DOM selectors

Hello, on this amazing day, we'll discuss the 3 most common Javascript selectors.

getElementById

getElementById is used to return an element using his id. If there is no element with the giving id, it returns null.

<h1 id="logo">Aya Bouchiha</h1><script>    const logo = document.getElememntById('logo');    const img  = document.getElementById('img'); // null</script>

querySelector

querySelector is used to return the first element that matches the giving CSS selector.

<input type="search" placeholder="search" /><script>const searchInput = document.querySelector("[type='search']");</script>

querySelectorAll

querySelectorAll is used to return all elements (as a NodeList object) that matche the giving css selector.

<div>Hi</div><div>Bonjour</div><div>Salam</div><button onclick="changeColor()">To Blue</button><script>const changeColor = () => {  document.querySelectorAll("div").forEach(div => div.style.color="blue")}</script>

Summary

• getElementById: for selecting an element using his Id
• querySelector: for getting the first element that matches the giving css selector
• querySelectorAll: for returning as a NodeList object All elements that matche the giving css selector.

Happy codding!