Learn JavaScript ELEMENT SELECTORS easy! 📑

[@BroCodez]

// element selectors = Methods used to target and manipulate HTML elements
// They allow you to select one or multiple HTML elements
// from the DOM (Document Object Model)
// 1. document.getElementById() // ELEMENT OR NULL
// 2. document.getElementsClassName() // HTML COLLECTION
// 3. document.getElementsByTagName() // HTML COLLECTION
// 4. document.querySelector() // FIRST ELEMENT OR NULL
// 5. document.querySelectorAll() // NODELIST
// ---------- getElementById() ----------
const myHeading = document.getElementById("my-heading");
myHeading.style.backgroundColor = "yellow";
myHeading.style.textAlign = "center";
// ---------- getElementsByClassName() ----------
const fruits = document.getElementsByClassName("fruits");
Array.from(fruits).forEach(fruit => {
fruit.style.backgroundColor = "yellow";
});
// ---------- getElementsByTagName() ----------
const h4Elements = document.getElementsByTagName("h4");
const liElements = document.getElementsByTagName("li");
Array.from(h4Elements).forEach(h4Element => {
h4Element.style.backgroundColor = "yellow";
});
Array.from(liElements).forEach(liElement => {
liElement.style.backgroundColor = "lightgreen";
});
// ---------- querySelector() ----------
const element = document.querySelector("li");
element.style.backgroundColor = "yellow";
// ---------- querySelectorAll() ----------
const foods = document.querySelectorAll("li");
foods.forEach(food => {
food.style.backgroundColor = "yellow"
});

[@alecrestorick]

Honestly the way you teach is extremely effective and enjoyable and you make it easy to follow as you explain. You explain everything so clearly and make it easy to understand the why's and how's and understanding is half the problem with coding. Your ability to teach is top quality for leaners, I actually enjoy listening to you and following along with your videos for several hours a day. Many other channels are just boring and yours is the opposite. Im sure you had a masterful teacher who imparted a masterful approach to learning and teaching on yourself. I look forward to following all your various code language tutorials. Thank you for doing what you do.

[@Salainganba-v6i]

The best fullstack teacher

[@Debelinka]

What a G! Thanks legend!

[@INSIGHT16]

This video is underrated

[@asitonph]

Well explained, thank you!

[@bruhboing3349]

loved your video, thanks for the explanation :)

[@PurplexSKyo]

Hello Bro Code
I love your videos, I try to learn C by looking your videos and its amazing
I know its a litter bit late for tell you this but can you please do a tutorial learn Lua please if its don't mind you
Thanks you for having the time to look the lines and keep continute
I love your videos👍🏾👍🏾

[@A_curious_chicken]

Great

[@martinmurithi2076]

BEST ON THIS TOPIC SOO FAR

[@ruquiaalam5546]

Thanks a ton!!! amazing tutorials

[@WebDevelop-w8x]

great explaining, some YT toturials got this whole wrong, good job.

[@Hellisfear]

This was super super useful. Thanks

[@amirrezaabbasi-k6p]

that was so good !
ty

[@MikeZane111]

lets goooooo

[@Daniel-copypaste]

really appreciate it bro , you made it easy for me thank you

[@ENDTIM3SPRODUCTIONS]

Do a Lua full course please!!!!!

[@levon9]

Very nice explanation. Could you elaborate a bit more on the difference between HTML collections and node lists? What does it mean that they (node lists) don't update? Thanks!

[@AmjadGD]

At 6:49 I think we could also do
fruits[0, 1, 2].style.backgroundColor = "yellow";
I suppose?

[@hunin27]

if you want to do like this you would need to iterate over every element inside of the array and change the background color

[@uddipta03]

in this approach it will only change style to the last ement only

[@theideadude]

excellent vid but onions are root vegetables!

[@mohamedshinaishin2822]

Bro you are terribly awesome , It's so sad we won't see you again

[@levon9]

What does that mean? He quit making videos?

[@mohamedshinaishin2822]

@@levon9 he did say so in one of his latest videos

[@levon9]

@@mohamedshinaishin2822 thanks, I must have missed it. Too bad, he's good. 👍

[@mohamedshinaishin2822]

@@levon9 yeah but he left a ton of videos for us to enjoy

[@panaskw]

he's still posting videos pretty much daily what do you mean

[@tee-hee9553]

Me first ❤

[@hamzagohar2048]

me 16,804 🥰🥰🥰🥰🥰🥰🥰

[@xzex2609]

still doesn't understand if the object that getElementsByClassName returns is not iterable how it is that you use for on that collection thing

[@amandateixeira6143]

I’m still learning JavaScript but I think it’s because arrays have specific methods that don’t work with HTML collections (like forEach).
But if you want to use the HTML collection in a for loop then it’s fine.

[@KhureshiAbraam9999]

No for inbuilt array methods it won't work for working we must typecast it to array.
For Directly using inbuilt methods querySelectorAll is used

[@PowerGumby]

what IDE is he using?

[@spanxcode05]

VS Code

[@manueldiegoalexander3879]

where's the style ?

[@xzex2609]

😂😂😂😂 if I just watched the video instead of follow along I never had this much trouble to ask this question and solve it by my self
I can not understand why this isn't working ? any help ?
for(const [index , fruit] of fruits.entries()){
const color = ['blue', 'yellow', 'green'];
fruit.style.backgroundColor = color[index]
}
how do I change the array like object that document.getElementsByClassName returns to an iterable Object ??
Answer : I searched and find that the collection is not an array and there is a method that can change it to an array ( amongst tons of other ways)
for(let [index,value] of Array.from(fruits).entries()){

value.style.backgroundColor = color[index]
}