Learn JavaScript ELEMENT SELECTORS easy! 📑

#JavaScript #tutorial #course

00:00:00 introduction
00:00:36 getElementById()
00:02:55 getElementsClassName()
00:07:22 getElementsByTagName()
00:12:44 querySelector()
00:14:33 querySelectorAll()
00:16:49 conclusion

// 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)

[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. // HTML COLLECTION
// 3. // HTML COLLECTION
// 4. document.querySelector() // FIRST ELEMENT OR NULL
// 5. document.querySelectorAll() // NODELIST

// getElementById()

const myHeading =
= "yellow";
myHeading.style.textAlign = "center";

// getElementsByClassName()

const fruits =

=> {
fruit.style.backgroundColor = "yellow";
});

// getElementsByTagName()

const h4Elements =
const liElements =

=> {
= "yellow";
});

=> {
= "lightgreen";
});

// querySelector()

const element =

element.style.backgroundColor = "yellow";

// querySelectorAll()

const foods =

foods.forEach(food => {
food.style.backgroundColor = "yellow"
});

[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👍🏾👍🏾

[Daniel-copypaste]

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

[levon]

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!

[bruhboing]

loved your video, thanks for the explanation :)

[AmjadGD]

At 6:49 I think we could also do

fruits[0, 1, 2].style.backgroundColor = "yellow";

I suppose?

[mohamedshinaishin]

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

[xzex]

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

[xzex]

😂😂😂😂 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 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

value.style.backgroundColor = color[index]
}