Lựa chọn và duyệt trên cây DOM

// Chọn phần tử đầu tiên khớp
const firstParagraph = document.querySelector("p");

// Chọn tất cả phần tử khớp
const allParagraphs = document.querySelectorAll("p");
allParagraphs.forEach((p) => console.log(p.textContent));

const header = document.getElementById("main-header");

const paragraphs = document.getElementsByTagName("p");
const highlights = document.getElementsByClassName("highlight");

const element = document.querySelector("p");
const parent = element.parentNode; // Nút cha (bất kỳ loại nút)
const parentElement = element.parentElement; // Phần tử cha

const container = document.querySelector(".container");
const children = container.childNodes; // NodeList của các nút con
const elementChildren = container.children; // HTMLCollection của các phần tử con

const first = container.firstChild; // Nút con đầu tiên
const firstElement = container.firstElementChild; // Phần tử con đầu tiên
const last = container.lastChild; // Nút con cuối cùng
const lastElement = container.lastElementChild; // Phần tử con cuối cùng

const element = document.querySelector("p");
const prev = element.previousSibling; // Nút anh em trước
const prevElement = element.previousElementSibling; // Phần tử anh em trước
const next = element.nextSibling; // Nút anh em tiếp theo
const nextElement = element.nextElementSibling; // Phần tử anh em tiếp theo

const container = document.querySelector(".container");
const button = document.querySelector("button");
if (container.contains(button)) {
  console.log("Button is inside container");
}

const position = nodeA.compareDocumentPosition(nodeB);

const listItem = document.querySelector("li");
const list = listItem.closest("ul");

const element = document.querySelector("p");
if (element.matches(".active")) {
  console.log("Element has active class");
}