0

بلاگ

امیر رسولیبلاگمقالاتdom در جاوا اسکریپت

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

21 بهمن 1401
ارسال شده توسط
مقالات
124 بازدید
مقدمه ای در مورد DOM

Document Object Model (DOM) نمایش داده‌های اشیایی است که ساختار و محتوای یک سند را در وب تشکیل می‌دهند. در این راهنما به بررسی اینکه DOM چیست خواهیم پرداخت و به نحوه نمایش DOM یک سند HTML در حافظه و نحوه استفاده از API ها برای ایجاد محتوای وب و برنامه‌های کاربردی نگاهی خواهیم کرد.

DOM چیست؟

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

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

به عنوان مثال، DOM مشخص می کند که متد querySelectorAll در این قطعه کد باید فهرستی از تمام عناصر

در سند را به ما برگرداند:


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

تمام ویژگی ها، روش ها و رویدادهای موجود برای ویرایش و ایجاد صفحات وب در اشیاء سازماندهی شده اند. برای مثال، شیء سند که خود سند را نشان می‌دهد، هر شیء جدولی که رابط HTMLTableElement DOM را برای دسترسی به جداول HTML پیاده‌ سازی می‌کند، و … ، همگی شی هستند.

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

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

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

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

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

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

DOM به گونه ای طراحی شده که مستقل از هر زبان برنامه نویسی خاصی باشد و نمایش ساختاری سند را از یک API سازگار در دسترس قرار دهد. با اینکه اکثر توسعه دهندگان وب، فقط از DOM با استفاده از جاوا اسکریپت استفاده می کنند، پیاده سازی های DOM را می توان برای هر زبانی اجرا کرد، در مثال پایین از 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 لازم نیست کار خاصی انجام دهید. شما از API مستقیماً در جاوا اسکریپت از درون چیزی که اسکریپت نامیده می شود استفاده می کنید.

هنگامی که یک اسکریپت ایجاد کنید، چه به صورت درون خطی در عنصر <script> یا گنجانده شده در صفحه وب، می‌توانید فوراً از API برای سند یا اشیاء پنجره برای ویرایش خود سند یا هر یک از عناصر مختلف در صفحه وب استفاده کنید. برنامه نویسی DOM شما ممکن است چیزی به سادگی مثال زیر باشد که با استفاده از تابع console.log() پیامی را در کنسول نمایش می دهد:

<body onload=”console.log(‘Welcome to my home page!’);”>

  …

</body>

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

به عنوان مثال، تابع زیر یک عنصر <h1> جدید ایجاد می کند، متنی را به آن عنصر اضافه کرده و سپس آن را به در سند ثبت می کند:

<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

انواع داده های DOM

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

شرح نوع داده (رابط)
وقتی یک عضو یک شی از نوع سند را برمی گرداند (به عنوان مثال، ویژگی مالک Document یک عنصر، سندی را که به آن تعلق دارد برمی گرداند)، این شی، خود شی سند ریشه است. مرجع سند DOM شی سند را توصیف می کند سند
هر شی که در یک سند قرار دارد نوعی گره یا نود است. در یک سند HTML، یک شی می تواند یک گره عنصر باشد یا یک گره متن یا گره ویژگی باشد. NODE
نوع ELEMENT بر اساس گره است. به یک عنصر یا یک گره از نوع عنصر اشاره دارد که توسط یکی از اعضای DOM API بازگردانده شده است. به جای اینکه بگوییم، برای مثال، متد document.createElement() یک مرجع شی را به یک گره بر می گرداند، فقط می گوییم که این متد عنصری را که به تازگی در DOM ایجاد شده است برمی گرداند. اشیاء عنصر رابط DOM Element و همچنین رابط اصلی Node را پیاده سازی می کنند که هر دو با هم در این مرجع گنجانده شده اند. در یک سند HTML، عناصر توسط رابط HTMLElement API HTML DOM و همچنین سایر رابط‌ هایی که قابلیت‌ های انواع خاصی از عناصر را توصیف می‌کنند (به عنوان مثال، HTMLTableElement برای عناصر ) بیشتر می‌شوند. ELEMENT
یک nodeList، آرایه ای از عناصر است، مانند نوعی که توسط متد document.querySelectorAll () برگردانده می شود. آیتم‌های موجود در nodeList به یکی از دو روش از طریق ایندکس قابل دسترسی هستند: List.item و list این دو معادل هستند. در مورد اول، item() تنها متد روی شی nodeList است. دومی از نحو آرایه معمولی برای واکشی مورد دوم در لیست استفاده می کند.
هنگامی که یک attribute توسط یک عضو برگردانده می شود (به عنوان مثال، توسط متد ()createAttribute)، یک مرجع شی است که یک رابط خاص (هر چند کوچک) برای ویژگی ها را نشان می دهد. ویژگی‌ها گره‌هایی در DOM هستند، درست مانند عناصر، اگرچه ممکن است به ندرت از آنها استفاده کنید. Attr
یک namedNodeMap مانند یک آرایه است، اما آیتم‌ها با نام یا نمایه قابل دسترسی هستند، اگرچه این مورد اخیر صرفاً یک راحتی برای شمارش است، زیرا ترتیب خاصی در لیست ندارند. یک namedNodeMap دارای متد item() برای این منظور می باشد و همچنین می‌توانید آیتم ها را از یک namedNodeMap اضافه و حذف کنید. NamedNodeMap

همچنین برخی از ملاحظات و اصطلاحات رایج وجود دارد که باید آنها را در نظر داشت. به عنوان مثال، به هر گره Attr به عنوان یک ویژگی اشاره می شود و به آرایه ای از گره های DOM به عنوان یک nodeList اشاره می شود. این اصطلاحات و سایر اصطلاحات را خواهید دید که باید در طول مستندات معرفی و استفاده شوند.

رابط های DOM

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

رابطه های DOM

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

رابط ها و اشیاء (Interfaces and objects)

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

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

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 مشاهده خواهید کرد، ارائه خواهیم کرد.اشیاء سند و window، اشیایی هستند که معمولاً از رابط آنها در برنامه نویسی DOM استفاده می شوند. به عبارت ساده، شی window چیزی شبیه مرورگر را نشان می دهد، و شی سند ریشه خود سند است. عنصر از روابط عمومی Node به ارث می‌رسد و این دو رابط با هم بسیاری از روش‌ها و ویژگی‌ هایی را که در عناصر جداگانه استفاده می‌کنید ارائه می‌ کنند. این عناصر همچنین ممکن است واسط های خاصی برای برخورد با نوع داده ای که آن عناصر نگهداری می کنند داشته باشند. در زیر لیست مختصری از 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
  • Window.onload
  • ()window.scrollTo

مثال های DOM دام

مثال های DOM

تنظیم محتوای متنیاین مثال از یک عنصر

تنظیم محتوای متنی

این مثال از یک عنصر <div> حاوی یک <textarea> و دو عنصر <button> استفاده می کند. وقتی کاربر اولین دکمه را کلیک می کند، متنی را در <textarea> تنظیم می کنیم. وقتی کاربر روی دکمه دوم کلیک می کند، متن را پاک می کنیم. برای این کار از موارد زیر استفاده می کنیم:

  • 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;

}

JAVASCRIPT

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 در جاوا اسکریپت بسیار پرکاربرد می باشد و شما می توانید با استفاده از این ابزار، فعالیت های مختلف را در صفحات انجام دهید.

در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
Created by potrace 1.14, written by Peter Selinger 2001-2017
در آپارات
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

نصب گیت هاب

آموزش نصب گیت هاب

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

دیدگاهتان را بنویسید