DOM Methods توابعی هستند که برای دسترسی، ایجاد، تغییر یا حذف عناصر HTML و مدیریت محتوای صفحه استفاده می‌شوند.
با استفاده از این متدها می‌توان صفحه وب را به صورت دینامیک تغییر داد و تعامل کاربر را مدیریت کرد.

🔹 1. انتخاب عناصر

getElementById

• انتخاب یک عنصر با id

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

getElementsByClassName

• انتخاب همه عناصر با یک class

let items = document.getElementsByClassName("item");
console.log(items.length);

getElementsByTagName

• انتخاب همه عناصر با یک tag

let divs = document.getElementsByTagName("div");
console.log(divs.length);

querySelector

• انتخاب اولین عنصری که با سلکتور مطابقت دارد

let firstItem = document.querySelector(".item");

querySelectorAll

• انتخاب تمام عناصری که با سلکتور مطابقت دارند

let allItems = document.querySelectorAll(".item");

🔹 2. ایجاد و اضافه کردن عناصر

createElement

let newDiv = document.createElement("div");
newDiv.innerText = "Hello World";

appendChild

• اضافه کردن عنصر به پایان والد

document.body.appendChild(newDiv);

insertBefore

• اضافه کردن عنصر قبل از عنصر دیگر

let container = document.getElementById("container");
let reference = document.getElementById("refDiv");
container.insertBefore(newDiv, reference);

🔹 3. حذف و جایگزینی عناصر

remove

let oldDiv = document.getElementById("oldDiv");
oldDiv.remove();

replaceChild

let newDiv = document.createElement("div");
newDiv.innerText = "New Content";
let oldDiv = document.getElementById("oldDiv");
oldDiv.parentNode.replaceChild(newDiv, oldDiv);

🔹 4. مدیریت محتوا

innerText و textContent

let title = document.getElementById("myTitle");
title.innerText = "New Text";        // متن قابل مشاهده
title.textContent = "Another Text";  // متن خام

innerHTML

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

outerHTML

• جایگزینی کل عنصر شامل خود آن

title.outerHTML = "<h2>Replaced Title</h2>";

🔹 5. مدیریت Attributes

getAttribute

let link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

link.setAttribute("href", "https://example.com");

removeAttribute

link.removeAttribute("target");

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

• classList.add("className") → اضافه کردن کلاس

• classList.remove("className") → حذف کلاس

• classList.toggle("className") → اضافه/حذف کلاس

• classList.contains("className") → بررسی وجود کلاس

let box = document.getElementById("box");
box.classList.add("active");
box.classList.toggle("highlight");
console.log(box.classList.contains("active")); // true

🔹 7. مدیریت رویدادها

addEventListener

let btn = document.getElementById("myBtn");
btn.addEventListener("click", () => {
  alert("Button clicked!");
});

removeEventListener

btn.removeEventListener("click", handlerFunction);

✅ خلاصه

• DOM Methods → توابعی برای دسترسی، ایجاد، تغییر و حذف عناصر HTML

• دسته‌بندی اصلی:

  1. انتخاب عناصر → getElementById, querySelector, ...

  2. ایجاد و اضافه کردن → createElement, appendChild, insertBefore

  3. حذف و جایگزینی → remove, replaceChild

  4. مدیریت محتوا → innerText, innerHTML, outerHTML

  5. مدیریت Attributes → getAttribute, setAttribute, removeAttribute

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

  7. مدیریت رویدادها → addEventListener, removeEventListener