Mute Duck - Javascript

querySelector


const element = document.querySelector('.class-name'); // select the first element with class "class-name"
const element = document.querySelector('#element-id'); // select the element with ID "element-id"
const element = document.querySelector('div p'); // select the first <p> element within a <div>

querySelectorAll


const matches = document.querySelectorAll("p"); //get a NodeList of all of the <p> elements in the document
const matches = document.querySelectorAll("div.note, div.alert"); // get all <div> elements within the document with a class of either note or alert

Loop through querySelector results


const highlightedItems = matches.querySelectorAll(".highlighted");

highlightedItems.forEach((userItem) => {
    functionName(userItem);
});

Get selected querySelector item


const elements = document.querySelectorAll(".class-name");

elements.forEach(element => {
    element.addEventListener('click', function(event) {
        const clicked_element = event.target;
        console.log('Clicked element:', clicked_element);
    });
});