DOM چیست؟
در این فصل کمی از محیط کنسول فاصله گرفته و وارد محیط صفحات وب میشویم. البته همچنان برخی از برنامهها در محیط کنسول اجرا خواهند شد. اما از این فصل با کاربردهای عملیتر جاوا اسکریپت، یعنی تعامل با صفحات وب آشنا میشویم. موضوعی که در این فصل به آن میپردازیم DOM یا Document Object Model نام دارد. لازم به ذکر است که DOM جزئی از جاوا اسکریپت نیست و یک استاندارد مجزا است که در سایر زبانهای برنامهنویسی نیز میتوان از آن استفاده کرد. اما کاربرد اصلی DOM در جاوا اسکریپت است و برای هر برنامهنویس جاوا اسکریپت آشنایی با DOM ضروری است.
آنچه در این فصل میآموزید :- معرفی DOM
- انتخاب عناصر صفحهی وب
- حرکت در DOM
- دسترسی به صفات (Attributes) عناصر صفحهی وب و تغییر مقدار آنها
- ایجاد تغییرات در DOM و افزودن عناصر جدید در صفحات وب
- ایجاد تغییرات در CSS و سبکهای عناصر
معرفی DOM
فرض کنید یک صفحهی وب را با استفاده از HTML و CSS ایجاد کردهایم. حال قصد داریم با استفاده از جاوا اسکریپت بخشهایی از این صفحه را تحت شرایط خاصی تغییر دهیم. مثلاً پس از کلیک کاربر بر روی یک دکمه، بخشی از صفحه مخفی شود و یا متن موجود در یکی از تگهای HTML تغییر کند. در اینجا چندین سوال میتوان مطرح کرد. روش دسترسی به تگهای HTML و محتویات آنها چیست؟ چگونه میتوان این محتویات را تغییر داد؟ آیا میتوان برخی از تگهای HTML را از صفحه حذف کرد؟ چگونه میتوان سبکهای CSS اعمال شده به عناصر صفحه را تغییر داد؟
پاسخ تمام سوالات فوق در DOM است. در واقع DOM یا Document Object Model روشی برای دسترسی به عناصر صفحات وب و اعمال تغییرات بر روی آنهاست. در این روش هر یک از تگهای HTML (که از این بعد آنها را عناصر صفحهی وب مینامیم) به عنوان یک شئ جاوا اسکریپت در نظر گرفته میشوند. این اشیاء مانند سایر اشیاء جاوا اسکریپت دارای تعدادی خاصیت و متد هستند. همچنین این اشیاء دارای یک ساختار سلسله مراتبی هستند. یعنی هر یک از عناصر صفحه میتواند تعدادی عنصر فرزند (Child) و یک عنصر والد (Parent) داشته باشد.
ارتباط بین عناصر صفحه را میتوان به صورت یک ساختار درختی مدلسازی کرد. میدانیم که در اسناد HTML تمام تگها داخل یک تگ اصلی به نام <html> تعریف میشوند. بنابراین ریشهی این ساختار درختی همان تگ <html> خواهد بود که معمولا دو فرزند به نامهای <head> و <body> دارد. در مدل DOM کل این ساختار درختی به عنوان فرزند شئ دیگری به نام document در نظر گرفته میشود. به همین دلیل این مدل را Document Object Model مینامند. برای درک بهتر موضوع، سند HTML زیر را در نظر بگیرید.
<html>
<head>
<title>Test Title</title>
</head>
<body>
<h1>Test Heading</h1>
<p>
This paragraph has a <a href="#">link</a> to google.com
</p>
</body>
</html>
این سند HTML را در مدل DOM میتوان به صورت ساختار درختی زیر در نظر گرفت. به هر یک از اجزای این درخت اصطلاحاً یک گره یا Node گفته میشود. توجه کنید که گرههای این درخت انواع متفاوتی دارند. به همین دلیل با رنگهای متفاوت نمایش داده شدهاند.
در شکل فوق گرههای آبی رنگ، همان تگهای HTML هستند. میدانیم که هر تگ HTML میتواند حاوی تگهای HTML دیگر، محتویات متنی و تعدادی صفت (یا خاصیت) یا Attribute باشد. در درخت DOM هر سه مورد به عنوان فرزندان یک گره در نظر گرفته میشوند. مثلاً تگ <p> موجود در سند HTML فوق، دارای سه فرزند است. فرزند اول از نوع متنی است که همان عبارت "This paragraph has a" میباشد. فرزند دوم یک تگ <a> است و فرزند سوم نیز از نوع متنی است که همان عبارت "to google.com" است. در شکل فوق گرههای متنی با رنگ سبز نشان داده شدهاند و برای سادگی، از نوشتن محتوای متنی در شکل خودداری شده است.
همچنین تگ <a> نیز دارای دو فرزند است. یکی از نوع متنی که همان عبارت "link" است. و دیگری از نوع صفت (Attribute) است که در شکل فوق با رنگ نارنجی نشان داده شده است. گرهی document نیز با رنگ قرمز نشان داده شده است که در هر درخت DOM تنها یک گره از این نوع میتواند وجود داشته باشد که ریشهی کل ساختار DOM است.
توجه کنید که فقط گرههای آبی (تگهای HTML) و گرهی document میتوانند فرزند داشته باشند و سایر گرهها نمیتوانند فرزندی داشته باشند. در استاندارد DOM در مجموع ۱۲ نوع گرهی مختلف تعریف شده است. اما در این کتاب (و تقریباً همیشه) آشنایی با همین ۴ نوع گرهی معرفی شده کافی است. هر یک از این ۱۲ نوع گره دارای یک نام و یک کد عددی هستند که نام و کد ۴ نوع گرهی معرفی شده به شرح زیر است.
نام | کد عددی | توضیح |
---|---|---|
Element | 1 | تگهای HTML که مهترین نوع گرهها هستند |
Attr | 2 | صفات تگهای HTML |
Text | 3 | متن داخل تگهای HTML |
Document | 9 | عنصر ریشهی درخت DOM |
یک نکتهی بسیار مهم در رابطه با گرههای متنی این است که فضاهای خالی بین تگهای HTML نیز یک گرهی متنی به حساب میآیند. مثلاً در سند HTML فوق، گرهی <head> دارای ۳ فرزند است. اما در شکل برای سادگی فقط یکی از این فرزندان نمایش داده شده است. در واقع فضای خالی بین تگ شروع <head> و تگ شروع <title> یک گرهی متنی است. همینطور فضای خالی بین تگ پایان </title> و تگ پایان </head> نیز یک گرهی متنی است. معمولاً در ترسیم درخت DOM از فضاهای خالی صرف نظر میشود. اما باید توجه کنید که این گرههای متنی وجود دارند و در زمان استفاده از متدهای مرتبط با DOM باید به این نکته توجه شود. البته میتوان تگهای HTML را به صورت کاملاً متصل و در یک خط نوشت و هیچ فضای خالی بین آنها قرار نداد. در این صورت دیگر هیچ فضای خالی وجود نخواهد داشت که به صورت یک گرهی متنی در نظر گرفته شود. اما معمولاً برای خوانایی کدها، این فضاهای خالی در کدهای HTML قرار داده میشوند.
در این بخش یک معرفی اولیه از مفهوم DOM ارائه شد. در بخشهای بعدی این فصل با جزئیات بیشتری از DOM آشنا خواهید شد و با روشهای مختلف تعامل با عناصر صفحات وب به وسیلهی DOM و متدهای آن آشنا خواهید شد.