DOM و کاربرد آن

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

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

DOM چیست؟

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

یک مثال عملکردی :

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

با استفاده از جاوا اسکریپت و مدیریت DOM، می توانید تابعی ایجاد کنید که به صورت پویا یک فرم پاسخ را در زیر هر نظر ،  زمانی که کاربر روی دکمه “پاسخ” کلیک می کند، اضافه می کند. این فرم به کاربران اجازه می دهد تا پاسخ خود را وارد کرده و مستقیماً از صفحه وب ارسال کنند.

مفاهیم کلیدی :

گره ها:

گره ها بلوک های سازنده ساختار DOM هستند. انواع مختلفی از گره ها وجود دارد، از جمله گره های عنصر، گره های متنی، گره های ویژگی و غیره. گره های عنصر نشان دهنده عناصر HTML مانند <div>، <p> و <h1> هستند، در حالی که گره های متنی محتوای متن عناصر را نشان می دهند.

گره های والد و فرزند:

Nodes یا گره ها در اسکلت این معقوله در یک ساختار سلسله مراتبی سازماندهی می شوند که هر گره دارای یک گره والد و صفر یا چند گره فرزند است. گره والد گرهی است که شامل گره های دیگری میشوند، در حالی که گره های فرزند گره هایی هستند که درون گره های دیگر (والد) قرار دارند.

Traversal:

این خصوصیت به فرآیندامکانات و توانایی  DOM برای دسترسی به گره های مختلف اشاره دارد. شما می توانید  این مبحث را با استفاده از روش هایی مانند getElementById()، getElementsByClassName()، getElementsByTagName()، querySelector() و querySelectorAll() ایجاد و مدیریت نمایید .

مدیریت و کنترل:

این مورد شامل تغییر محتوا، ساختار یا سبک گره ها در  مبحث Document Object Model  است. می‌توانید این مورد را با استفاده از توابع ای مانند createElement()، appendChild()، removeChild()، setAttribute()، removeAttribute()، classList و موارد دیگر مدیریت و کنترل کنید.

مثال: ایجاد و مدیریت و کنترل عناصر DOM

بیایید یک مثال ساده را برای نشان دادن نحوه ایجاد و مدیریت و کنترل و استفاده از عناصر DOM با استفاده از جاوا اسکریپت  را با هم شروع و مرور کنیم:

در این مثال:

یک سند HTML شروع می کنیم که حاوی یک عنصر <div> با  شناسه container  و یک عنصر <h1> و <p> در داخل آن است.
از جاوا اسکریپت برای انتخاب عنصر ظرف با استفاده از getElementById() استفاده می کنیم.
ما یک عنصر <p> جدید را به صورت پویا با استفاده از createElement() ایجاد می کنیم و محتوای متنی آن را با استفاده از textContent تنظیم می کنیم.
پاراگراف جدید را با استفاده از appendChild به کانتینر اضافه می کنیم.
پاراگراف موجود را با استفاده از querySelector() انتخاب می کنیم و محتوای متنی آن را به صورت پویا به روز می کنیم.

نتیجه:

Document Object Model  یک مفهوم قدرتمند در توسعه وب است که به جاوا اسکریپت اجازه می دهد تا با اسناد HTML به صورت پویا تعامل داشته باشد و آنها را مدیریت و کنترل کند. با درک مفاهیم اولیه آن و نحوه استفاده و کاربرد آن با استفاده از جاوا اسکریپت، می توانید برنامه های وب پویا و تعاملی ایجاد کنید که به ورودی کاربر پاسخ می دهند و تجربه کاربری ویژه و زیبایی را ارائه می دهند. با توجه به مثال ارائه شده ، خودتان شروع کنید و تجربه لازم را بدست آورید  و سپس بیشتر  جستجو کنید تا درک خود را از استفاده و کاربرد DOM در توسعه وب عمیق تر نمایید.

•  Document Object Model    = DOM