The 3 most common 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!