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 بخشی از زبان جاوا اسکریپت نیست، بلکه یک وب 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
این صفحه سعی می کند اشیاء و انواع مختلف را به زبان ساده توصیف کند. اما تعدادی از انواع داده های مختلف در اطراف API وجود دارد که باید از آنها آگاه باشید. جدول زیر به طور خلاصه این نوع داده ها را توضیح می دهد.
همچنین برخی از ملاحظات و اصطلاحات رایج وجود دارد که باید آنها را در نظر داشت. به عنوان مثال، به هر گره Attr به عنوان یک ویژگی اشاره می شود و به آرایه ای از گره های DOM به عنوان یک nodeList اشاره می شود. این اصطلاحات و سایر اصطلاحات را خواهید دید که باید در طول مستندات معرفی و استفاده شوند.
رابط های DOM
این راهنما در مورد اشیا و چیزهای واقعی است که می توانید برای دستکاری سلسله مراتب DOM استفاده کنید. با توجه به اینکه نکات زیادی در دام وجود دارد، ممکن است کاربرد DOM کمی گیج کننده باشد. به عنوان مثال، شیئی که عنصر فرم HTML را نشان می دهد، ویژگی نام خود را از رابط HTMLFormElement دریافت می کند اما ویژگی className خود را از رابط HTMLElement دریافت می کند. در هر دو مورد، ویژگی مورد نظر شما در آن شیء است.
اما رابطه بین اشیاء و رابط هایی که آنها در 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 دام
تنظیم محتوای متنیاین مثال از یک عنصر
تنظیم محتوای متنی
این مثال از یک عنصر <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 در جاوا اسکریپت بسیار پرکاربرد می باشد و شما می توانید با استفاده از این ابزار، فعالیت های مختلف را در صفحات انجام دهید.
مطالب زیر را حتما مطالعه کنید
برنامه نویسی ربات
نقشه راه یادگیری هوش مصنوعی
ریکت React.js چیست؟
کتابخانه انگولار AngularJS چیست؟
نحوه نوشتن الگوریتم در زبان برنامه نویسی
دیدگاهتان را بنویسید