Document Object Model (DOM) نمایش داده های اشیایی است که ساختار و محتوای یک سند را در وب تشکیل می دهد. در این مقاله ، ما بطور مختصر DOM را معرفی خواهیم کرد. چگونه DOM نشان دهنده یک سند HTML یا XML در حافظه و نحوه استفاده شما از API ها برای ایجاد محتوای وب و برنامه ها را بررسی خواهیم کرد.

DOM چیست؟

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

صفحه وب یک سند است. این سند یا می تواند در پنجره مرورگر نمایش داده شود و هم به عنوان منبع HTML. اما در هر دو مورد یک سند است. Document Object Model (DOM) همان سند را نشان می دهد تا بتوان آن را دستکاری کرد. DOM نمایشی شی گرا از صفحه وب است ، که می تواند با یک زبان برنامه نویسی مانند جاوا اسکریپت اصلاح شود.

استانداردهای W3C DOM و WHATWG DOM در اکثر مرورگرهای مدرن پیاده سازی می شوند. بسیاری از مرورگرها استاندارد را افزایش می دهند ، بنابراین هنگام استفاده از آنها در وب که ممکن است اسناد توسط مرورگرهای مختلف با 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[0].nodeName);

همه خصوصیات ، روش ها و رویدادهای موجود برای دستکاری و ایجاد صفحات وب در اشیا سازماندهی شده اند (به عنوان مثال ، شی  document  که نشان دهنده خود سند است ، شی  table جدول که رابط HTMLTableElement  DOM ویژه برای دسترسی به جداول HTML را اجرا می کند ، و غیره) چهارم) این اسناد ارجاع شی به شی به DOM را فراهم می کند.

DOM مدرن با استفاده از چندین API ساخته شده است که با هم کار می کنند. هسته اصلی DOM اشیایی را تعریف می کند که اساساً یک سند و اشیا موجود در آن را توصیف می کنند. این مورد در صورت نیاز توسط سایر API ها که ویژگی ها و قابلیت های جدیدی به DOM اضافه می کنند ، گسترش می یابد. به عنوان مثال ، HTML DOM API پشتیبانی از نمایش اسناد HTML را به هسته اصلی DOM اضافه می کند.

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

مثال کوتاه بالا ، مانند تقریباً تمام مثالهای این مرجع ، جاوا اسکریپت است. به عبارت دیگر ، در جاوا اسکریپت نوشته شده است ، اما از DOM برای دسترسی به سند و عناصر آن استفاده می کند. DOM یک زبان برنامه نویسی نیست ، اما بدون آن ، زبان جاوا اسکریپت هیچ مدل یا مفهومی از صفحات وب ، اسناد HTML ، اسناد XML و اجزای تشکیل دهنده آنها (به عنوان مثال عناصر) را نخواهد داشت. هر عنصر در یک سند - به عنوان یک سند به عنوان یک کل ، head ، جداول داخل سند ، عناوین جدول ، متن در داخل سلول های جدول - بخشی از مدل DOM برای آن سند است ، بنابراین می توان با استفاده از DOM و یک زبان برنامه نویسی مانند جاوا اسکریپت.

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

API = DOM + جاوااسکریپت

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 لازم نیست کار خاصی انجام دهید. مرورگرهای مختلف پیاده سازی های مختلفی از DOM دارند و این پیاده سازی ها با استاندارد واقعی DOM مطابقت دارند (موضوعی که ما سعی می کنیم در این مقاله از آن اجتناب کنیم) ، اما هر مرورگر وب از برخی از مدل های سند استفاده می کند تا صفحات وب را از طریق جاوا اسکریپت در دسترس قرار دهد.

هنگامی که یک اسکریپت ایجاد می کنید چه به صورت درون خطی در عنصر <script>  باشد و چه با استفاده از دستورالعمل بارگذاری اسکریپت در صفحه وب موجود باشد - می توانید بلافاصله شروع به استفاده از API برای document  یا عناصر  window کنید تا خود سند را دستکاری کنید یا در فرزندان آن سند که عناصر مختلف موجود در صفحه وب هستند. برنامه نویسی DOM شما ممکن است مانند موارد زیر ساده باشد ، که با استفاده از تابع alert()  از شی  window پیام هشدار را نمایش می دهد ، یا ممکن است از روش های پیچیده تر DOM برای ایجاد محتوای جدید استفاده کند ، مانند مثال طولانی تر در زیر.

کد جاوا اسکریپت زیر یک هشدار را هنگام بارگذاری سند (و هنگامی که کل DOM برای استفاده در دسترس است) نمایش می دهد:

<body onload="window.alert('Welcome to my home page!');">

مثالی دیگر. این تابع یک عنصر H1 جدید ایجاد می کند ، متن را به آن عنصر اضافه می کند و سپس  H1  را برای این سند به درخت اضافه می کند:

<html>

  <head>

    <script>

       // run this function when the document is loaded

       window.onload = function() {

         // create a couple of elements in an otherwise empty HTML page

         const heading = document.createElement("h1");

         const heading_text = document.createTextNode("Big Head!");

         heading.appendChild(heading_text);

         document.body.appendChild(heading);

      }

    </script>

  </head>

  <body>

  </body>

</html>

انواع داده های اساسی

این مقاله سعی دارد اشیا و انواع مختلف را به زبان ساده توصیف کند. اما چندین نوع داده مختلف در اطراف API منتقل می شوند که باید از آنها آگاه باشید.

توجه: از آنجا که اکثر قریب به اتفاق کدهایی که از DOM استفاده می کنند ، حول دستکاری اسناد HTML می چرخند ، معمولاً مراجعه به گره های موجود در DOM به عنوان عناصر معمول است ، اگرچه به طور دقیق هر گره یک عنصر نیست.

جدول زیر به طور خلاصه این نوع داده ها را توصیف می کند.

برخی از ملاحظات اصطلاحات رایج نیز باید به خاطر داشته باشید. به عنوان مثال معمولاً مراجعه به هر گره Attribute  به عنوان  attribute و ارجاع به گره های DOM به عنوان  nodeList معمول است. شما می توانید این اصطلاحات و سایر اصطلاحات را در کل اسناد معرفی و استفاده کنید.

رابط های DOM

این مقاله درباره اشیا و موارد واقعی است که می توانید برای دستکاری سلسله مراتب DOM استفاده کنید. نکات بسیاری وجود دارد که درک اینکه چگونه این کارها می تواند گیج کننده باشد. به عنوان مثال ، شی نشان دهنده عنصر فرم HTML ویژگی name  خود را از رابط HTMLFormElement اما ویژگی className  خود را از رابط  HTMLElement دریافت می کند. در هر دو مورد ، ویژگی مورد نظر شما در سی فرم است.

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

رابط ها و اشیا

بسیاری از اشیا از چندین رابط مختلف وام می گیرند. برای مثال ، شی table یک رابط تخصصی  HTMLTableElement را پیاده سازی می کند ، که شامل روش هایی مانند createCaption  و insertRow است. اما از آنجا که این یک عنصر HTML است ، table  رابط Element را توصیف می کند و سرانجام ، از آنجا که یک عنصر HTML ، تا آنجا که به DOM مربوط می شود ، یک گره در درخت گره ها است که مدل شی را برای یک صفحه HTML یا XML تشکیل می دهد ، شی table همچنین رابط اصلی Node  را اجرا می کند ، از که Element  مشتق می شود.

هنگامی که به یک شی table  مراجعه می کنید ، مانند مثال زیر ، شما به طور معمول هر سه این رابط ها را به جای یکدیگر بر روی جسم استفاده می کنید ، شاید بدون اینکه بدانید.

const table = document.getElementById("table");

const tableAttrs = table.attributes; // Node/Element interface

for (let i = 0; i < tableAttrs.length; i++) {

  // HTMLTableElement interface: border attribute

  if(tableAttrs[i].nodeName.toLowerCase() == "border")

    table.border = "1";

}

// HTMLTableElement interface: summary attribute

table.summary = "note: increased border";

رابط های اصلی در DOM

این بخش برخی از رابط های متداول در DOM را لیست می کند. هدف این نیست که توصیف کند که این API ها در اینجا چه کار می کنند بلکه به شما ایده ای از انواع روش ها و خصوصیاتی می دهد که در هنگام استفاده از DOM اغلب مشاهده خواهید کرد.

اشیا  document و  window اشیایی هستند که شما معمولاً در برنامه نویسی DOM از رابط های کاربری استفاده می کنید. به زبان ساده ، شی  window چیزی شبیه به مرورگر را نشان می دهد و شی  document ریشه خود سند است. Element  از رابط عمومی Node  به ارث می برد و این دو رابط با هم بسیاری از روش ها و خصوصیاتی را که شما برای عناصر جداگانه استفاده می کنید ، فراهم می کند. این عناصر ممکن است برای برخورد با نوع داده ای که این عناصر نگهداری می کنند ، رابط های مشخصی داشته باشند ، مانند مثال شی  table در بخش قبلی.

در زیر لیستی مختصر از API های رایج در برنامه نویسی صفحه وب و XML با استفاده از DOM وجود دارد.

document.querySelector(selector)

document.querySelectorAll(name)

document.createElement(name)

parentNode.appendChild(node)

element.innerHTML

element.style.left

element.setAttribute()

element.getAttribute()

element.addEventListener()

window.content

GlobalEventHandlers/onload

window.scrollTo()

آزمایش DOM API

این مقاله برای هر رابطی نمونه هایی را ارائه می دهد که می توانید در توسعه وب خود استفاده کنید. در بعضی موارد ، نمونه ها صفحات کامل HTML هستند ، با دسترسی DOM در یک عنصر  <script> ، رابط (مثلا دکمه ها) لازم برای روشن کردن اسکریپت در یک فرم و عناصر HTML که DOM روی آنها به خوبی کار می کند در این صورت ، می توانید مثال را در یک سند HTML جدید برش داده و ذخیره کنید ، و مثال را از مرورگر اجرا کنید.

با این حال ، مواردی وجود دارد که مثالها مختصر ترند. برای اجرای نمونه هایی که فقط ارتباط اصلی رابط با عناصر HTML را نشان می دهد ، ممکن است بخواهید یک صفحه آزمایشی تنظیم کنید که در آن از اسکریپت ها به راحتی به رابط ها دسترسی پیدا کنید. صفحه وب بسیار ساده زیر عنصر  <script> را در سرصفحه فراهم می کند که در آن می توانید توابع آزمایش کننده رابط ، چند عنصر HTML با ویژگی هایی را که می توانید بازیابی ، تنظیم یا دستکاری کنید ، و رابط کاربری وب مورد نیاز برای این توابع را از طریق مرورگر فراخوانی کنید.

برای آزمایش رابط های DOM مورد علاقه خود و مشاهده نحوه کار آنها در بستر مرورگر ، می توانید از این صفحه آزمون استفاده کنید یا صفحه مشابه آن را ایجاد کنید. می توانید محتویات تابع test()  را در صورت لزوم به روز کنید ، دکمه های بیشتری ایجاد کنید یا عناصر را در صورت لزوم اضافه کنید.

برای آزمایش بسیاری از رابط ها در یک صفحه - به عنوان مثال "مجموعه ای" از خصوصیات که بر رنگ های یک صفحه وب تأثیر می گذارد - می توانید یک صفحه آزمایشی مشابه با یک کنسول کامل از دکمه ها ، زمینه های متنی و سایر عناصر HTML ایجاد کنید. تصویر زیر به شما ایده می دهد که چگونه می توان رابط ها را برای آزمایش گروه بندی کرد.

در این مثال ، منوهای کشویی این DOM را به صورت پویا به روز می کند - جنبه های قابل دسترسی صفحه وب به عنوان رنگ پس زمینه (bgColor) ، رنگ پیوندهای  (aLink) و رنگ متن (text). با این حال ، شما صفحات تست خود را طراحی می کنید ، آزمایش رابط ها هنگام خواندن در مورد آنها بخش مهمی از یادگیری نحوه استفاده موثر از DOM است.