DOM در جاوا اسکریپت

DOM یا Document Object Model یک مفهوم اساسی در برنامه‌نویسی وب است که به برنامه‌نویسان این امکان را می‌دهد تا با ساختار و محتوای یک صفحه وب تعامل کنند و آن را تغییر دهند. DOM به صورت یک درخت تشکیل شده از اشیاء قابل تغییر به نام نود (Nodes) بوده و این اشیاء نماینده‌های مختلفی از محتوا و ویژگی‌های صفحه هستند. در این مقاله، به مفاهیم اصلی DOM در جاوا اسکریپت، نحوه کار با DOM در جاوا اسکریپت و کاربردهای آن خواهیم پرداخت. همچنین پیشنهاد می‌کنیم آموزش اشیا در جاوا اسکریپت را نیز مطالعه نمایید.

DOM در جاوا اسکریپت چیست؟

DOM مخفف Document Object Model است و یک نمایش سلسله‌مراتبی و ساختار یافته از محتوا و ویژگی‌های یک سند HTML یا XML را فراهم می‌کند. در واقع، DOM یک واسط برنامه‌نویسی است که به برنامه‌نویسان این امکان را می‌دهد تا به صورت دینامیک با عناصر مختلف صفحه وب تعامل کنند و آنها را تغییر دهند.

ساختار DOM

DOM یک درخت سلسله‌مراتبی از نودها است. هر نود نماینده‌ای از یک عنصر یا ویژگی در صفحه وب است. درخت DOM از چندین لایه تشکیل شده است:

1. سند (Document): درخت DOM با یک نود ریشه شروع می‌شود که نماینده‌ای از تمام محتوای مستند (صفحه وب) است.
2. عناصر (Elements): نودهایی که نماینده‌های عناصر HTML هستند. به عنوان مثال، <div> یا <p>.
3. متن (Text): نودهایی که متن یا محتوای متنی را نمایندگی می‌کنند.
4. ویژگی‌ها (Attributes): نودهایی که ویژگی‌های یک عنصر HTML را نمایندگی می‌کنند. به عنوان مثال، ویژگی class یا id.

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

برنامه‌نویسان با استفاده از جاوا اسکریپت می‌توانند به عناصر مختلف DOM دسترسی پیدا کنند و آنها را تغییر دهند. دسترسی به یک عنصر می‌تواند به چند روش انجام شود:

انتخاب با ID

let elementById = document.getElementById("element_id");

گزینش با نام تگ

let elementsByTagName = document.getElementsByTagName("tag_name");

انتخاب با کلاس

let elementsByClass = document.getElementsByClassName("class_name");

انتخاب با نام نود

let elementsByName = document.getElementsByName("name");

استفاده از Selector

let elementBySelector = document.querySelector("selector");

استفاده از Selector All

let allElementsBySelector = document.querySelectorAll("selector");

عملیات درخت DOM

با دسترسی به عناصر DOM، می‌توانید عملیات مختلف را اجرا کنید:

تغییر محتوا (innerHTML و textContent)

element.innerHTML = "New Content";
element.textContent = "New Text";

تغییر ویژگی‌ها

element.setAttribute("attribute_name", "value");

اضافه کردن کلاس

element.classList.add("class_name");

حذف کلاس

element.classList.remove("class_name");

تعیین یا دریافت ویژگی مخصوصیت CSS

element.style.property = "value";

رویدادها در DOM

DOM امکان اعلان و شنود eventها را نیز فراهم می‌کند. به عنوان مثال:

event کلیک

element.addEventListener("click", function() {
  // Code to execute for the click event
});

event ورود متن

element.addEventListener("input", function() {
  // Code to execute for changes in content
});

خلاصه DOM در جاوا اسکریپت

DOM یک ابزار قدرتمند در برنامه‌نویسی وب است که امکان تعامل با محتوای صفحه وب را فراهم می‌کند. با استفاده از جاوا اسکریپت و DOM، برنامه‌نویسان می‌توانند به صورت دینامیک عناصر را انتخاب کرده، آنها را تغییر و به eventها پاسخ دهند. این امکانات باعث می‌شود که تجربه کاربری در وبسایت‌ها بهبود یابد و صفحات وب با حرکت و تغییرات پویا بهتر شوند