What are NodeLists in JavaScript? 📃

[@BroCodez]

// NodeList = Static collection of HTML elements by (id, class, element)
// Can be created by using querySelectorAll()
// Similar to an array, but no (map, filter, reduce)
// NodeList won't update to automatically reflect changes
// ---------- CREATE A NODELIST ----------
let buttons = document.querySelectorAll(".myButtons");
// ---------- ADD HTML/CSS PROPERTIES ----------
buttons.forEach(button => {
button.style.backgroundColor = "green";
button.textContent += "😁";
});
// ---------- CLICK event listener ----------
buttons.forEach(button => {
button.addEventListener("click", event => {
event.target.style.backgroundColor = "tomato";
});
});
// ---------- MOUSEOVER + MOUSEOUT event listener ----------
buttons.forEach(button => {
button.addEventListener("mouseover", event => {
event.target.style.backgroundColor = "hsl(205, 100%, 40%)";
});
});
buttons.forEach(button => {
button.addEventListener("mouseout", event => {
event.target.style.backgroundColor = "hsl(205, 100%, 60%)";
});
});
// ---------- ADD AN ELEMENT ----------
const newButton = document.createElement("button"); //STEP 1
newButton.textContent = "Button 5"; //STEP 2
newButton.classList = "myButtons";
document.body.appendChild(newButton); //STEP 3
buttons = document.querySelectorAll(".myButtons");
// ---------- REMOVE AN ELEMENT ----------
buttons.forEach(button => {
button.addEventListener("click", event => {
event.target.remove();
buttons = document.querySelectorAll(".myButtons");
});
});

[@anushkasingh9470]

So lucky to find your channel, been watching your videos since past 2-3 weeks. Bro you really made JS easy for me, a true and catchy thumbnail. THANKSSS! Keep uploading!😃

[@mabblers]

Great lesson. Is there a js obj that can take on new value and save them without a db?

[@sebastienrteller]

Hey! My latest hyperfixation has been learning coding in react and I've been binging your videos for about 2 weeks now. I don't know if you've done anything about dependent dropdowns so far, but it has been driving me insane trying to figure it out. My personal use is a little more complicated with tons of dependencies, but I was wondering if you'll ever do a solid dropdowns and dependent dropdowns video in the future. Keep up the awesome work! Your videos are perfect for my brain to get it

[@shadow-k3k1g]

good job

[@sepiweb]

It was very useful❤️

[@acque-azzure]

The craziest thing is that i was just using this in an Project of mine

[@Abhishek_Fitness_work]

Hello bro I am from🇮🇳 India

[@BroCodez]

Hello from the USA

[@kvo6307]

Hey bro are you gonna upload the full course so I can watch in order?

[@BroCodez]

yes

[@khushansharora3383]

9:00