DOM چیست ؟

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

تعریف DOM 

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

DOM به برنامه نویس این اجازه را می‌دهد که :

1. خصیصه‌های attribute) HTML) را حذف، اضافه یا تغییر دهد. 
2. تگ‌های (عناصر) HTML را حذف، اضافه یا تغییر دهد. 
3. به رویداد‌های Event) HTML) واکنش نشان دهد. 
4. رویداد‌های HTML را حذف، اضافه یا تغییر دهد.
5. استایل‌های CSS را حذف، اضافه یا تغییر دهد. 

سطوح DOM

سطح 0: مجموعه ای از رابط های سطح پایین را ارائه می دهد. 

سطح 1: ابن سطح را می توان در دو بخش CORE و HTML وضیح داد.

 COREرابط های سطح پایینی را ارائه می دهد که می تواند برای نمایش هر سند ساختاری استفاده شود. HTML رابط های سطح بالایی را ارائه می دهد که می توانند برای نشان دادن اسناد HTML استفاده شوند.

سطح 2: شامل شش ویژگی CORE2، VIEWS، EVENTS، STYLE، TRAVERSAL و RANGE است. CORE2: عملکرد CORE مشخص شده توسط DOM سطح 1 را گسترش می دهد.

 VIEWS: به برنامه ها اجازه می دهد تا به صورت پویا به محتوای سند دسترسی پیدا کرده و آن را دستکاری کنند.

 EVENTS: رویدادها اسکریپت هایی هستند که در هنگام واکنش کاربر به صفحه وب توسط مرورگر اجرا می شوند.

 STYLE: به برنامه ها اجازه می دهد تا به صورت پویا به محتوای فایل های style  دسترسی داشته باشند و آن ها را دستکاری کنند.

 TRAVERSAL: این به برنامه ها اجازه می دهد تا به صورت پویا در document گردش داشته باشند. RANGE: این به برنامه ها اجازه می دهد تا به صورت پویا محدوده ای از محتوا را در document شناسایی کنند.

 سطح 3: شامل پنج ویژگی مختلف است: CORE3، LOAD و SAVE، VALIDATION، EVENTS و XPATH

CORE3: عملکرد CORE مشخص شده توسط DOM سطح 2 را گسترش می دهد.

 LOAD and SAVE: این به برنامه اجازه می دهد تا محتوای سند XML را به صورت پویا در سند DOM بارگذاری کند و با سریال سازی، سند DOM را در یک سند XML ذخیره کند.

 VALIDATION: این به برنامه اجازه می‌دهد تا محتوا و ساختار document را به‌صورت پویا به‌روزرسانی کند و در عین حال از معتبر ماندن document اطمینان حاصل کند. 

EVENTS: قابلیت رویدادهای مشخص شده توسط DOM Level 2 را گسترش می دهد.

 XPATH: یک زبان مسیر است که می توان از آن برای دسترسی به درخت DOM استفاده کرد.

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

اشیا document و window اشیایی هستند که معمولا از رابط آن ها در برنامه نویسی DOM استفاده می شود. به عبارت ساده تر, شی window چیزی شبیه مرورگر را نشان می دهد و شی document ریشه خود document است. عنصر از رابط Node عمومی به ارث می‌رسد و این دو رابط با هم بسیاری از متد‌ها و ویژگی‌هایی را که در المنت های جداگانه استفاده می‌کنید ارائه می‌کنند.

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

DOM Level 1 یک مدل کامل برای کل یک سند HTML یا XML، از جمله ابزارهایی برای تغییر هر بخشی از سند ارائه کرد.

 DOM Level 2 در اواخر سال 2000 منتشر شد. تابع getElementById و هم چنین یک مدل رویداد و پشتیبانی از فضاهای نام XML و CSS را معرفی کرد. 

DOM Level 3 که در آوریل 2004 منتشر شد، پشتیبانی از XPath و مدیریت رویدادهای صفحه کلید و هم چنین رابطی برای سریال سازی اسناد به عنوان XML اضافه کرد.

 DOM Level 4 در سال 2015 منتشر شد. یک نسخه از استاندارد WHATWG است.

کاربردهای DOM

یافتن عناصر HTML

اکنون که می‌دانیم DOM چیست، می‌توانیم المنت های HTML را دریافت و دستکاری کنیم. راه های مختلفی برای انجام این کار با استفاده از Javascript DOM وجود دارد که در این جا مهم ترین آن ها آورده شده اند:

دریافت المنت با Id 

متد getElementById برای بدست آوردن یک عنصر با Id آن استفاده می شود. بیایید به یک مثال نگاه کنیم:

var title = document.getElementById(‘header-title’);

در این جا المنتی را که Id آن header-title است دریافت می کنیم و آن را در یک متغیر ذخیره می کنیم.

دریافت المنت ها بر اساس نام کلاس

هم چنین می‌توانیم بیش از یک شی را با استفاده از متد ()getElementsByClassName دریافت کنیم که آرایه‌ای از المنت ها را برمی‌گرداند.

var items = document.getElementsByClassName(‘list-items’);

در این جا همه آیتم‌ها را با کلاس  list-items دریافت کرده و در یک متغیر ذخیره می‌کنیم.

دریافت المنت بر اساس نام تگ

با استفاده از متد ()getElementsByTagName می‌توانیم المنت ها را با نام تگ دریافت کنیم.

var listItems = document.getElementsByTagName(‘li’);

در این جا ما تمام تگ ها li را دریافت کرده و آن ها را در یک متغیر ذخیره می کنیم.

Queryselector

متد querySelector اولین المنتی را برمی گرداند که با selector (گزینشگر) CSS مشخص شده مطابقت دارد. این به این معنی است که می توانید المنت ها را بر اساس Id، کلاس، تگ و سایر گزینشگرهای CSS دریافت کنید. در اینجا فقط تعدادی از مهم ترین آن ها را آورده ایم:

دریافت با Id

var header = document.querySelector(‘#header’)

دریافت با class

var items = document.querySelector(‘.list-items’)

دریافت با تگ:

var headings = document.querySelector(‘h1’);

دریافت المنت های خاص

هم چنین می‌توانیم با استفاده از گزینشگرهای CSS، عناصر خاص‌تری را دریافت کنیم.

document.querySelector(“h1.heading”);

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

Queryselectorall

متد querySelectorAll کاملا مشابه querySelector است با این تفاوت که تمام عناصر متناسب با گزینش‌گر (selector) CSS را برمی گرداند.

var heading = document.querySelectorAll(‘h1.heading’);

در این مقاله به صورت پایه‌ای و به زبانی ساده به مفهوم DOM پرداختیم. «مدل شی‌گرای سند (DOM)، رابطی بین پلتفرمی و مستقل از زبان است که سند HTML را به عنوان یک ساختار درختی در نظر می‌گیرد و هر گره آن یک شی محسوب می‌شود. از طریق Dom و با استفاده از یک زبان برنامه نویسی مانند جاوا اسکریپت، می‌توان گره‌ها را پیمایش و عناصر موجود در سند HTML را دستکاری کرد. برای دستکاری عناصر، در ابتدا نیاز است که به آن‌ها دسترسی داشت که برای این کار، متدهای منحصر به‌فردی وجود دارند. سپس برای اعمال تغییرات مورد نظر، باید از ویژگی یا متد آن روش استفاده شود.

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