dom چیست ؟

DOM مخفف Document Object Model به معنی “مدل شیء‌گرای سند” است. این مفهوم، ساختاری از صفحه وب را به‌صورت یک درخت (Tree) نمایش می‌دهد که در آن هر بخش از HTML مثل تگ‌ها، متن‌ها و ویژگی‌ها به‌عنوان یک شیء (Object) در نظر گرفته می‌شوند.

به زبان ساده، وقتی یک صفحه وب بارگذاری می‌شود، مرورگر آن را به یک ساختار درختی تبدیل می‌کند که برنامه‌نویس می‌تواند از طریق جاوا اسکریپت آن را دستکاری کند.

ساختار کلی DOM

 Document → ریشه‌ی اصلی که کل سند را شامل می‌شود.

 Element → هر تگ HTML مثل <div>، <p>، <h1> و …

 Attribute → ویژگی‌های المان‌ها مثل class، id و …

 Text → متنی که داخل یک المان قرار دارد.

تفاوت بین HTML و DOM چیه؟

 HTML فقط یک سند است که شامل تگ‌ها و محتوا می‌شود.

 DOM نمایشی از HTML در حافظه مرورگر است که می‌توان آن را تغییر داد.

 مثال: وقتی یک صفحه HTML باز می‌کنی، مرورگر اون رو به DOM تبدیل می‌کنه. اگر با جاوا اسکریپت مقدار یک <p> رو تغییر بدی، این تغییر روی DOM اعمال می‌شه، نه مستقیماً روی فایل HTML!

دسترسی به عناصر DOM در جاوا اسکریپت

برای کار با DOM در جاوا اسکریپت، از روش‌های زیر استفاده می‌کنیم:

 روش getElementById()

let myElement = document.getElementById("myID");

 این روش برای گرفتن یک المان خاص با id مشخص استفاده می‌شه.

 روش getElementsByClassName()

let items = document.getElementsByClassName("myClass");

 این روش همه‌ی المان‌های دارای کلاس مشخص رو به‌صورت یک مجموعه (Collection) برمی‌گردونه.

 روش querySelector() و querySelectorAll()

let firstElement = document.querySelector(".myClass"); // اولین المان با این کلاس
let allElements = document.querySelectorAll(".myClass"); // همه المان‌های دارای این کلاس

 این روش‌ها انعطاف‌پذیرتر و مدرن‌تر هستن و شبیه CSS Selector عمل می‌کنن.

تغییر محتوای عناصر در DOM

بعد از گرفتن یک عنصر، می‌تونیم محتوای اون رو تغییر بدیم:

 تغییر متن با innerText

document.getElementById("myID").innerText = "متن جدید!";

 فقط متن داخل المان رو تغییر میده.

 تغییر HTML داخلی با innerHTML

document.getElementById("myID").innerHTML = "<strong>متن جدید!</strong>";

 هم متن و هم تگ‌های HTML رو تغییر میده.

تغییر استایل عناصر با DOM

می‌تونیم با استفاده از جاوا اسکریپت، استایل‌های CSS رو تغییر بدیم:

document.getElementById("myID").style.color = "red";
document.getElementById("myID").style.fontSize = "20px";

 با این روش میشه استایل هر عنصری رو تغییر داد.

اضافه و حذف کردن عناصر در DOM

گاهی لازمه که به صفحه المان اضافه کنیم یا المان‌های اضافی رو حذف کنیم.

 اضافه کردن یک المان جدید

let newElement = document.createElement("p");
newElement.innerText = "یک پاراگراف جدید!";
document.body.appendChild(newElement);

 این کد یک <p> جدید به انتهای body اضافه می‌کنه.

 حذف کردن یک المان

let element = document.getElementById("myID");
element.remove();

 این کد المانی که id=”myID” داره رو حذف می‌کنه.

کار با رویدادها در DOM

با استفاده از رویدادها (Events) می‌تونیم به کلیک‌ها، حرکت ماوس، تایپ کردن و … واکنش نشون بدیم.

 رویداد click

document.getElementById("myButton").addEventListener("click", function() {
    alert("روی دکمه کلیک شد!");
});

 وقتی روی دکمه کلیک بشه، یه پیام نمایش داده می‌شه.

ویژگی‌های پیشرفته DOM

DOM قابلیت‌های زیادی داره، از جمله:

 کار با کلاس‌ها:

document.getElementById("myID").classList.add("newClass");
document.getElementById("myID").classList.remove("oldClass");

 کار با ویژگی‌های المان‌ها:

document.getElementById("myLink").setAttribute("href", "https://example.com");

 این کد مقدار href یک لینک رو تغییر میده.

بهترین روش‌ها برای کار با DOM

 همیشه از querySelector() و querySelectorAll() برای دسترسی به المان‌ها استفاده کن.

 تا جایی که ممکنه، تغییرات DOM رو به‌صورت گروهی انجام بده تا سرعت افزایش پیدا کنه.

 از رویدادهای Delegation برای عملکرد بهتر استفاده کن.