تابز مدیا | آموزش قدم به قدم برنامه نویسی

HTML DOM Document

شیء document در جاوااسکریپت نمایانگر کل صفحه HTML است و اصلی‌ترین نقطه ورود برای دسترسی و تغییر محتوا و عناصر DOM می‌باشد.
با استفاده از document می‌توان به عناصر، رویدادها، استایل‌ها و ساختار HTML دسترسی پیدا کرد.

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

`document.getElementById(id)`

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


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

`document.getElementsByClassName(className)`

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


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

`document.getElementsByTagName(tagName)`

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


let divs = document.getElementsByTagName("div");

`document.querySelector(selector)`

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


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

`document.querySelectorAll(selector)`

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


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

🔹 2. اطلاعات و خصوصیات Document

document.title → عنوان صفحه
document.URL → آدرس صفحه
document.domain → دامنه سایت
document.body → دسترسی به تگ <body>
document.head → دسترسی به تگ <head>


console.log(document.title);
console.log(document.URL);

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

document.createElement(tagName) → ایجاد عنصر جدید
document.createTextNode(text) → ایجاد متن
appendChild و insertBefore برای اضافه کردن به DOM


let newDiv = document.createElement("div");
let text = document.createTextNode("Hello Document");
newDiv.appendChild(text);
document.body.appendChild(newDiv);

🔹 4. مدیریت Attributes

document.getElementById("id").getAttribute("attr")
document.getElementById("id").setAttribute("attr", value)
document.getElementById("id").removeAttribute("attr")


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

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

classList.add/remove/toggle/contains


let box = document.getElementById("box");
box.classList.add("active");
box.classList.toggle("highlight");

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

document.addEventListener(event, handler)


document.addEventListener("DOMContentLoaded", () => {
  console.log("Document fully loaded!");
});

🔹 7. متدهای مفید Document

document.write() → نوشتن مستقیم در صفحه (کم استفاده، بهتر است از DOM Methods استفاده شود)
document.forms → دسترسی به فرم‌ها
document.images → دسترسی به تصاویر
document.links → دسترسی به لینک‌ها
document.scripts → دسترسی به اسکریپت‌ها


console.log(document.forms.length);
console.log(document.links.length);

✅ خلاصه

document → نقطه ورود به HTML DOM
دسترسی به عناصر: getElementById, getElementsByClassName, querySelector, ...
مدیریت محتوا و Attributes، کلاس‌ها و رویدادها از طریق document
اطلاعات مفید: document.title, document.URL, document.body, document.head
متدهای دیگر: forms, images, links, scripts