YouTip

Selecting Elements

let el = document.getElementById("main");
let items = document.querySelectorAll(".item");
let first = document.querySelector(".item");

Modifying

el.textContent = "New text";
el.innerHTML = "<strong>Bold</strong>";
el.style.color = "red";
el.classList.add("active");
el.setAttribute("data-id", "1");

Events

el.addEventListener("click", (e) => {
    console.log("Clicked!", e.target);
});

Creating Elements

let div = document.createElement("div");
div.textContent = "New element";
document.body.appendChild(div);

Summary

• querySelector/querySelectorAll select elements
• addEventListener handles events
• createElement + appendChild adds new elements