π¨βπ©βπ§βπ¦1. Going downwards: children νμ
const h1 = document.querySelector("h1");
console.log(h1.querySelectorAll(".highlight"));
console.log(h1.children);
h1.firstElementChild.style.color = "orange";
π©βπ§βπ¦2. Going upwards: parents νμ
- closest: finds parents (upwards)
- querySelector: finds children (downwards)
console.log(h1.parentNode);
console.log(h1.parentElement);
h1.closest(".header").style.background = "var(--gradient-secondary)";
h1.closest("h1").style.background = "var(--gradient-primary)";
π¬3. Going sideways: siblings (only direct siblings) νμ
console.log(h1.previousElementSibling);
console.log(h1.nextElementSibling);
console.log(h1.parentElement.children);
[...h1.parentElement.children].forEach(function (el) {
if (el !== h1) {
el.style.transform = "scale(0.5)";
}
});