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…


This content originally appeared on DEV Community and was authored by Aya Bouchiha

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!


This content originally appeared on DEV Community and was authored by Aya Bouchiha


Print Share Comment Cite Upload Translate Updates
APA

Aya Bouchiha | Sciencx (2021-07-16T23:46:59+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 ,<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 ]. 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 . 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: ]
rf:citation
» The 3 most commun DOM selectors | Aya Bouchiha | Sciencx | https://www.scien.cx/2021/07/16/the-3-most-commun-dom-selectors/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts