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!
Top comments (9)
IDs are still useful so be careful with sweeping statements like “avoid IDs altogether”.
Especially important in accessibility for WAI-ARIA for example to associate controls with each other.
I agree with the sentiment of preferring classes over IDs, just thought I would add some clarity as people take things at face value!
Me too I prefer classes :)
Thank you a lot!
It is not recommended, but you can use ID´s without any selector at all:
This is a common standard on all browsers that all ID´s are defined as global variables, so they can be accessed directly or as a property of the window-object ( -> window.myhead.textContent = "test"). It is not recommended to use this method, as the definition only works as long as there is no conflicting definition in the source. This script gives you an error:
--> "ReferenceError: Cannot access 'myhead' before initialization"Maybe it´s woth to know...
Never heard about that, Thank you so much for the information!
Have a nice day!
Yes, it is a bit strange feature you should not rely on. There is a global variable for every ID - as long as it is not conflicting with something. In the example above, it is conflicting with a variable, there might be ohter names like classnames etc.. In any case you can access the ID with getElementById without those conflicts.
In my opinion, I agree with this statemen 👇🏻
"IDs are perfectly fine. How to improve it is just personal opinion. IDs and classes have their separate usage areas, which in some cases overlap. For automated testing, and CSS, ID's are extremely useful. Never be afraid to use them!"
I agree with you
Absolutely true, I have mentioned that querySelector is used to return the first element that matches the giving CSS selector.
Thank you and have a nice day!
Thank you so much