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/
HARVARDAya 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/>
VANCOUVERAya 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