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”>Ay…

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!


Print Share Comment Cite Upload Translate
APA
Aya Bouchiha | Sciencx (2024-03-29T05:32:39+00:00) » The 3 most commun DOM selectors. Retrieved from https://www.scien.cx/2021/07/16/the-3-most-commun-dom-selectors/.
MLA
" » The 3 most commun DOM selectors." Aya Bouchiha | Sciencx - Friday July 16, 2021, https://www.scien.cx/2021/07/16/the-3-most-commun-dom-selectors/
HARVARD
Aya Bouchiha | Sciencx Friday July 16, 2021 » The 3 most commun DOM selectors., viewed 2024-03-29T05:32:39+00:00,<https://www.scien.cx/2021/07/16/the-3-most-commun-dom-selectors/>
VANCOUVER
Aya Bouchiha | Sciencx - » The 3 most commun DOM selectors. [Internet]. [Accessed 2024-03-29T05:32:39+00:00]. Available from: https://www.scien.cx/2021/07/16/the-3-most-commun-dom-selectors/
CHICAGO
" » The 3 most commun DOM selectors." Aya Bouchiha | Sciencx - Accessed 2024-03-29T05:32:39+00:00. https://www.scien.cx/2021/07/16/the-3-most-commun-dom-selectors/
IEEE
" » The 3 most commun DOM selectors." Aya Bouchiha | Sciencx [Online]. Available: https://www.scien.cx/2021/07/16/the-3-most-commun-dom-selectors/. [Accessed: 2024-03-29T05:32:39+00:00]
rf:citation
» The 3 most commun DOM selectors | Aya Bouchiha | Sciencx | https://www.scien.cx/2021/07/16/the-3-most-commun-dom-selectors/ | 2024-03-29T05:32:39+00:00
https://github.com/addpipe/simple-recorderjs-demo