سفارش تبلیغ
صبا ویژن

DOM چیست و چه کاربردی دارد؟

 

DOM عبارتی میباشد که بیشتر آنرا در لهجه جاوا اسکریپت می‌شنویم. در‌این نوشته‌ی‌علمی طراحی سایت در مشهد  میخواهیم به صورت مختصر و موثر بدین معنی بپردازیم.

 

 

شناخت با DOM

برای ادراک بهتر با یک نمونه استارت می کنیم، فرض فرمائید در یک ورقه اینترنت می خواهیم در زمان اجرای ورقه در عنصرها HTML تغییراتی تولید کنیم. برای مثال یک تگ (عنصر) را حذف کنیم و یا این که مختصات (Attribute) آنرا تغییر تحول دهیم.

 

همینطور در بخش اعظمی از مواقع برای تعامل با استفاده کننده به DOM نیاز داریم. مثلا می خواهیم هنگامی روی یک دکمه کلیک شد عنصر خاصی را به ورقه اضافه کنیم و یا این که پیامی را اکران دهیم.

 

خب برای همگی‌ی اینکار‌ها به بازنویسی کد‌های HTML نیاز داریم. یا این که همان دیگر به DOM نیاز داریم. حالا که متوجه کاربرد‌های آن شدید می توانیم درمورد خویش DOM و معنی آن کلام کنیم.

 

 

DOM چه میباشد؟

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

 

نکته: موادتشکیل دهنده HTML به عبارتی تگ‌های HTML می‌باشند.

 

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

 

تگ‌های (عنصرها) HTML را حذف، اضافه یا این که تغییر تحول دهد.

خصیصه‌های attribute) HTML) را حذف، اضافه یا این که تغییر تحول دهد.

استایل‌های CSS را حذف، اضافه یا این که تغییر و تحول دهد.

به روی داد‌های Event) HTML) عکس العمل نشان دهد.

اتفاق افتاد‌های HTML را حذف، اضافه یا این که تغییر تحول دهد.

 

 

برای جا افتادن این زمینه فرض نمائید یک ورقه اینترنت که دربردارنده کد‌های HTML پایین میباشد، داریم:

 

 

1

2

3

4

5

6

7

8

9

 

 

 

 

 

 My header

 

 My link 

 

 

 

زمانی شیت اینترنت بارگیری شد، مرورگر یک DOM: Document Object Model از برگه می‌سازد. که در واقع این سبک یک درخت شی ها (موادسازنده HTML باطن شیت) میباشد. برای فهم و شعور ریلکس خیس این مورد به صورت ذیل اعتنا فرمائید:

 

 

درخت شی ها تشکیل شده به وسیله مرورگر

 

همان گونه در تصویر بالا چشم میشود مجموع خصیصه‌ها و موادسازنده داخل یک تگ، تحت عنوان فرزندان آن تگ شناخته میگردند. همینطور مجموع شی ءها ، تحت تیم شئ Document میباشند.

 

این ساختار درختی در چنگ اپلیکیشن‌نویس جاوا اسکریپت میباشد تا بتواند هر تغییری درین ساختار ساخت و ساز نماید! به همین راحتی.