DOM: دستکاری صفحه

مرورگر HTML را به درختی از اشیا به نام DOM تبدیل می‌کند که با JS می‌خوانی و تغییر می‌دهی.

انتخاب عناصر

document.getElementById("main")
document.querySelector(".card")        // اولین تطابق (مثل CSS)
document.querySelectorAll(".item")     // همه (NodeList)

تغییر محتوا و استایل

el.textContent = "متن جدید";
el.innerHTML = "<b>HTML</b>";    // مراقب XSS با ورودی کاربر!
el.style.color = "#22d3ee";
el.classList.add("active");
el.classList.toggle("hidden");
el.setAttribute("href", "/x");

ساخت و افزودن عنصر

const li = document.createElement("li");
li.textContent = "آیتم جدید";
document.querySelector("ul").appendChild(li);

حذف

el.remove();

پیمایش DOM

el.parentElement
el.children
el.nextElementSibling

⚠️ با innerHTML + ورودی کاربر، خطر XSS داری؛ برای متن از textContent استفاده کن.