DOM (Document Object Model) یک مدل برنامه‌نویسی برای دسترسی و تغییر عناصر HTML و ساختار صفحه وب است.
با DOM می‌توان متن، استایل، ساختار و رویدادهای عناصر را به صورت دینامیک مدیریت کرد.

🔹 1. دسترسی به عناصر

با getElementById

let title = document.getElementById("myTitle");
console.log(title.innerText);

با getElementsByClassName

let items = document.getElementsByClassName("item");
console.log(items[0].innerText);

با querySelector و querySelectorAll

let firstItem = document.querySelector(".item"); // اولین عنصر
let allItems = document.querySelectorAll(".item"); // تمام عناصر

🔹 2. تغییر محتوای عناصر

• متن عناصر: innerText یا textContent

let title = document.getElementById("myTitle");
title.innerText = "Hello World";

• HTML داخلی: innerHTML

let container = document.getElementById("container");
container.innerHTML = "<p>New Paragraph</p>";

🔹 3. تغییر استایل عناصر

let box = document.getElementById("box");
box.style.backgroundColor = "red";
box.style.width = "200px";

🔹 4. مدیریت Attributes

let link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
link.getAttribute("href"); // "https://example.com"
link.removeAttribute("target");

🔹 5. ایجاد و حذف عناصر

// ایجاد عنصر
let newDiv = document.createElement("div");
newDiv.innerText = "Hello";
document.body.appendChild(newDiv);

// حذف عنصر
let oldDiv = document.getElementById("oldDiv");
oldDiv.remove();

🔹 6. مدیریت کلاس‌ها

let box = document.getElementById("box");

// اضافه کردن کلاس
box.classList.add("active");

// حذف کلاس
box.classList.remove("active");

// بررسی کلاس
console.log(box.classList.contains("active"));

// تغییر کلاس
box.classList.toggle("active");

🔹 7. مدیریت رویدادها (Events)

let btn = document.getElementById("myBtn");

// روش قدیمی
btn.onclick = function() {
  alert("Button clicked!");
};

// روش استاندارد
btn.addEventListener("click", () => {
  alert("Button clicked with addEventListener!");
});

• رویدادهای رایج: click, mouseover, mouseout, keydown, submit, load

✅ خلاصه

• DOM → مدل دسترسی و مدیریت عناصر HTML

• روش‌های دسترسی: getElementById, getElementsByClassName, querySelector, querySelectorAll

• تغییر محتوا: innerText, innerHTML

• تغییر استایل: style.property

• مدیریت Attributes: setAttribute, getAttribute, removeAttribute

• مدیریت کلاس‌ها: classList.add/remove/toggle/contains

• مدیریت رویدادها: addEventListener