برنامه نویسی و IT برنامه نویسی وب جاوا اسکریپت

آموزش dom در جاوا اسکریپت؛ راهنمای ساده و سریع

Dom مخفف عبارت Document object model به معنای مدل شی‌گرای سند است که در زبان برنامه‌نویسی جاوا اسکریپت کاربرد مخصوصی دارد. همان‌طور که می‌دانید جاوا اسکریپت javascript یکی از زبان‌های مشهور دنیا است که یکی از چندین کاربردهای آن، بهبود تعامل کاربران با وب‌سایت است. برای اینکه بتوان سایت را با کمک جی‌اس تغییر داد، لازم است بدانید که Dom چیست و چه کاربردی دارد. پس اگر علاقمند به کسب اطلاعات بیشتر پیرامون دام هستید، در ادامه آموزش dom در جاوا اسکریپت با ما همراه باشید.

Dom در جاوا اسکریپت چیست و چه کاربردی دارد؟

Dom دقیقاً همان تگ‌های Html است که در وب سایت شما وجود دارد و نقش بسیار پُررنگی در ایجاد تجربیات تعاملی و پویا در محیط وب ایفا می‌کند. در واقع، دام نوعی رابط برنامه‌نویسی است که ساختار اسناد HTML و XML را به مدل درختی به نمایش می‌گذارد و امکان کنترل و اصلاح المان‌های مختلف و تعامل با آن‌ها را به توسعه‌دهندگان می‌دهد. برنامه‌نویسان می‌توانند با آموزش dom در جاوا اسکریپت از آن به عنوان یک پل بین محتوای صفحه وب و زبان‌های اسکریپت مثل جاوا اسکریپت استفاده و تغییرات لازم را اعمال کنند.

دوره‌های آموزش جاوا اسکریپت

به‌عنوان مثال، Dom مشخص می‌کند که روش یا متد querySelectorAll در این قطعه کد باید لیستی از تمام المان‌های <p> را در سند برگرداند:

const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[۰].nodeName);

بنابراین، با آموزش دم در جاوا اسکریپت متوجه می‌شویم که Dom مجموعه‌ای از APIها به منظور مدیریت سند HTML و استایل‌دهی است که از شی سند یا Document Object بهره می‌برد. جاوااسکریپت می‌تواند صفحه HTML را با کمک دام پویاسازی کند؛ درواقع بدون آن نمی‌تواند کاری را پیش ببرد!

آموزش dom در جاوا اسکریپت

مثال قبلی که در رابطه با دام زده شد، نشان می‌دهد که کد به زبان جاوااسکریپت نوشته شده است اما از Dom برای دسترسی به سند و المان‌ها استفاده می‌کند. برای درک بهتر مفهوم dom باید بدانید که دام یک زبان برنامه‌نویسی نیست، اما بدون آن جاوا اسکریپت توانایی کافی برای دسترسی و اعمال تغییرات در صفحات وب، اسناد Html، اسناد SVG و اجزای آن‌ها نخواهد داشت. دام بخشی از زبان جاوا اسکریپت نیست، بلکه یک نوع API وب است که برای ساخت و اعمال تغییرات وب‌سایت‌ها مورد استفاده قرار می‌گیرد.

word image 39278 1 — آموزش dom در جاوا اسکریپت؛ راهنمای ساده و سریع ۸

علاوه‌بر این، اگر درحال آموزش جاوا اسکریپت پیشرفته هستید، خوب است بدانید که js در زمینه‌های دیگری نیز کارایی دارد. به عنوان مثال Node.js برنامه‌های جاوااسکریپت را روی یک کامپیوتر اجرا خواهد کرد، اما مجموعه‌ای متفاوت از APIها را ارائه می‌دهد و DOM API بخش اصلی از آن نیست.

مدل dom به طور مستقل از هر برنامه دیگری طراحی شده است. اگرچه اکثر برنامه‌نویسان از دام تنها برای جاوااسکریپت استفاده می‌کنند، اما امکان استفاده از این مدل در زبان‌های دیگر مثل پایتون نیز وجود دارد:

# Python DOM example
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para")

دسترسی به Dom

دسترسی به دام و استفاده از آن بسیار آسان است. برای دسترسی و استفاده از Dom تنها کافی است که script که یکی از تگ های javascript است را بنویسید. سپس، می‌توانید از این API برای شی document یا window استفاده کرده و تغییرات لازم را روی سند یا المان‌های موجود در صفحه وب اعمال کنید. استفاده از Dom می‌تواند به سادگی مثال زیر باشد که یک پیغام را با استفاده از کنسول console.log() نمایش می‌دهد:

<body onload="console.log('Welcome to my home page!');">
  …
</body>

توصیه می‌شود برای خوانایی بهتر و نوشتن منظم و تمیز کد، کدهای جاوا اسکریپت را از تگ‌های اچ‌تی‌ام‌ال جدا کنید. به عنوان مثال، تابع زیر یک تگ h1 می‌سازد، به آن یک متن و بعد آن را به درخت dom اضافه می‌کند:

<html lang="en">
  <head>
    <script>
      // run this function when the document is loaded
      window.onload = () => {
        // create a couple of elements in an otherwise empty HTML page
        const heading = document.createElement("h1");
        const headingText = document.createTextNode("Big Head!");
        heading.appendChild(headingText);
        document.body.appendChild(heading);
      };
    </script>
  </head>
  <body></body>
</html>

انواع داده‌های اصلی در آموزش dom در جاوا اسکریپت

انواع مختلفی از داده‌ها وجود دارد که باید در اموزش js آن‌ها را بشناسید. در ادامه این داده‌ها را به زبان ساده شرح خواهیم داد:

انواع داده	توضیح
Document	زمانی که عضوی یک شی از نوع Document را برگرداند، خودِ شی Document ریشه یا Root محسوب می‌شود. به‌عنوان مثال، خاصیت OwnerDocument از یک عنصر، Documentای را برمی‌گرداند که به آن تعلق دارد. ی
Node	هر شی که در سند وجود دارد، یک Node (گره) است. در یک سند اچ‌تی‌ام‌ال، هر شی می‌تواند یک Node از نوع عنصر، یک Node از نوع متن و یا یک Node از نوع ویژگی یا Attribute باشد.
Element	داده بعدی که باید در آموزش dom در جاوا اسکریپت بشناسید، Element مبتنی بر Node است. هر Element به یک عنصر یا Node از نوع Element که توسط عضوی از DOM API برگردانده شده است، اشاره می‌کند.
NodeList	آرایه‌ای از عناصر است و مثل متد document.querySelectorAll()‎ برگردانده می‌شود. آیتم‌هایی که در NodeList وجود دارند به دو روش list.item(1) list[1] از طریق شاخص یا Index قابل دسترسی هستند.
Attr	زمانی که یک Attribute توسط عضوی یا متدی برگردانده می‌شود(به عنوان مثال، متد createAttribute().)، آن عضو یک شی مرجع به حساب می‌آید که رابطی خاص را برای خصیصه‌ها نمایش می‌دهد.
NamedNodeMap	مشابه با یک آرایه است، با این تفاوت که به آیتم‌های آن از طریق نام یا اندیس می‌توان دسترسی داشت. NamedNodeMap یک متد ()item برای دسترسی به آیتم‌ها دارد. علاوه‌بر این می‌توانیم آیتم‌ها را از آن حذف یا به آن اضافه کنیم.

word image 39278 7 — آموزش dom در جاوا اسکریپت؛ راهنمای ساده و سریع ۹

آموزش dom در جاوا اسکریپت؛ رابط‌های اصلی Dom

بسیاری از اشیاء (objects) قادر به پیاده‌سازی چندین رابط مختلف هستند. به عنوان مثال شی جدول (table) یک رابط تخصصی HTMLTableElement را پیاده‌سازی می‌کند که شامل متدهایی مثل createCaption و insertRow می‌شود. به مثال زیر توجه کنید:

const table = document.getElementById("table");
const tableAttrs = table.attributes; // Node/Element interface
for (let i = ۰; i < tableAttrs.length; i++) {
  // HTMLTableElement interface: border attribute
  if (tableAttrs[i].nodeName.toLowerCase() === "border") {
    table.border = "۱";
  }
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";

در ادامه آموزش دام در جاوا اسکریپت می‌رسیم به برخی از رایج‌ترین رابط‌های استفاده شده در دام. اشیاء سند و Window از جمله آبجکت‌ها یا اشیایی هستند که عمدتاً از رابط آن‌ها در برنامه‌نویسی دام استفاده می‌شود. به بیان دیگر، شی Window چیزی مانند مرورگر و شی Document ریشه‌ای از خودِ سند را نمایش می‌دهد.

عنصر از رابط‌ Node عمومی به ارث می‌رسد و این دو رابط باهم‌دیگر متدها و ویژگی‌های مختلفی را ارائه می‌کنند و در عناصر منحصربه‌فردی مورد استفاده قرار می‌گیرند. در ادامه برخی از رایج‌ترین APIها در برنامه‌نویسی صفحات وب و XML با استفاده از DOM را به شما معرفی خواهیم کرد:

document.querySelector()‎
document.querySelectorAll()‎
document.createElement()‎
Element.innerHTML
Element.setAttribute()‎
Element.getAttribute()‎
EventTarget.addEventListener()‎
HTMLElement.style
Node.appendChild()‎
window.onload
window.scrollTo()‎

آموزش dom در جاوا اسکریپت؛ رابط‌های اصلی Dom — آموزش dom در جاوا اسکریپت؛ راهنمای ساده و سریع ۱۰

مثال‌های بیشتر برای درک بهتر DOM

برای درک بهتر نحوه کارکرد دام و آموزش dom در جاوا اسکریپت توجه شما را به مثال‌های زیر جلب می‌کنیم:

تنظیم محتوای متن در Html ،Css و Javascript

در این مثال یک المنت <div> داریم که شامل یک <textarea> و دو <button> می‌شود. زمانی که کاربر روی اولین دکمه کلیک کند، یک متن برای او نمایش داده می‌شود. زمانی که کاربر روی دکمه دوم کلیک کند، متن پاک می‌شود:

Document.querySelector: برای دسترسی به <textarea> و دکمه
EventTarget.addEventListener()‎: برای اجرای کلیک دکمه‌ها
Node.textContent: برای اضافه و حذف کردن متن

کد Html:

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Set text content</button>
  <button id="clear-text" type="button">Clear text content</button>
</div>

کد CSS:

.container {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

button {
  width: 200px;
}

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

const story = document.body.querySelector(".story");

const setText = document.body.querySelector("#set-text");
setText.addEventListener("click", () => {
  story.textContent = "It was a dark and stormy night...";
});

const clearText = document.body.querySelector("#clear-text");
clearText.addEventListener("click", () => {
  story.textContent = "";
});

خروجی نهایی به صورت زیر خواهد بود:

مثال آموزش دم در جاوا اسکریپت — آموزش dom در جاوا اسکریپت؛ راهنمای ساده و سریع ۱۱

اضافه کردن یک عنصر فرزند

در این مثال از آموزش dom در جاوا اسکریپت از یک <div> استفاده شده که شامل یک <div> دیگر و دو <button> است. زمانی که کاربر روی دکمه اول کلیک کند، یک المنت یا عنصر جدید ساخته می‌شود و به عنوان المنت یا عنصر فرزند <div> به آن اضافه خواهد شد. زمانی که کاربر روی دکمه دوم کلیک کند، المنت یا عنصر فرزند حذف می‌شود:

Document.querySelector()‎: برای دسترسی به <div> و دکمه‌ها
EventTarget.addEventListener()‎: برای اجرای کلیک‌های دکمه‌ها
Document.createElement: برای ساخت المنت
Node.appendChild()‎: برای اضافه کردن المنت فرزند
Node.removeChild()‎: برای حذف کردن المنت فرزند

کد اچ تی ام ال:

<div class="container">
  <div class="parent">parent</div>
  <button id="add-child" type="button">Add a child</button>
  <button id="remove-child" type="button">Remove child</button>
</div>

کد سی اس اس:

.container {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

button {
  width: 100px;
}

div.parent {
  border: 1px solid black;
  padding: 5px;
  width: 100px;
  height: 100px;
}

div.child {
  border: 1px solid red;
  margin: 10px;
  padding: 5px;
  width: 80px;
  height: 60px;
  box-sizing: border-box;
}

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

const parent = document.body.querySelector(".parent");

const addChild = document.body.querySelector("#add-child");
addChild.addEventListener("click", () => {
  // Only add a child if we don't already have one
  // in addition to the text node "parent"
  if (parent.childNodes.length > ۱) {
    return;
  }
  const child = document.createElement("div");
  child.classList.add("child");
  child.textContent = "child";
  parent.appendChild(child);
});

const removeChild = document.body.querySelector("#remove-child");
removeChild.addEventListener("click", () => {
  const child = document.body.querySelector(".child");
  parent.removeChild(child);
});

خروجی این مثال به صورت زیر است:

اضافه کردن یک المنت فرزند — آموزش dom در جاوا اسکریپت؛ راهنمای ساده و سریع ۱۲

آموزش جاوااسکریپت در مکتب خونه

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

آموزش طراحی وب سایت (Front-End)

۹۹۹,۰۰۰ ۳۹۹,۶۰۰ تومان

۶۰%

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

https://maktabkhooneh.org/mag/dom-in-javascript/

کامل بهرامی

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