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

DOM در جاوا اسکریپت

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

جاوا اسکریپت چیست

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

طراحی سایت با جاوا اسکریپت

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

برای مثال همین وجود “DOM در JavaScript”  خودش به خودی خود نشان می دهد که چرا هنوز هم از این زبان برنامه نویسی بر پایه متن در طراحی سایت استفاده می شود. پس بد نیست که بخواهیم بیشتر با مفهوم DOM آشنا بشویم و موشکافانه تر ماهیت آن را بررسی کنیم.

DOM چیست؟

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

-المان های HTML به عنوان آبجکت

-جزئیات و عملکرد های المان های HTML

-روش های دسترسی به المان های HTML

به مکان های المان ها اصطلاحا Node گفته می شود. فقط هم المان ها دارای nodes نیستند اما Attribute ها و متن، ناد جداگانه خودشان را می گیرند.

چگونه با DOM در جاوا اسکریپت کار کنیم؟

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

چند نمونه از کارکرد های DOM در جاوا اسکریپت

دریافت المان با ID توسط DOM

روش getElementById() برای این است که شما یک المان خاص را با هویت آن المان تعریف کنید:

برای مثال به این کد دقت کنید:

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

همانطور که می بینید ما المان عنوان هدر را بدست آوردیم و آن را در یک متغیر ذخیره کردیم.

دریافت المان ها با نام کلاس با DOM در جاوا اسکریپت

حال می توانیم به جای گرفتن یک آبجکت، یک گروه از آبجکت های یک کلاس را با دستور getElementsByClassName() دریافت کنیم:

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

حال ما تمامی آیتم ها را با کلاس List Items دریافت کردیم و آن ها را در یک متغیر ذخیره ساختیم.

روش Queryselector در DOM

دستور querySelector() روشی است که بوسیله آن اولین المانی که با یک CSS Selector خاص مرتبط می شود را با کوئری مرتبط می کند. این موضوع به این معناست که شما می توانید المان ها را با آی دی، کلاس، تگ و دیگر سی اس اس سلکتور ها دریافت کنید.

مثلا شما می توانید چند تا از این موارد را در زیر مشاهده کنید:

دریافت با آی دی:

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

دریافت با کلاس:

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

دریافت با تگ:

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

تغییر المان های HTML

DOM اچ تی ام ال این اجازه را به ما می دهد که محتوا و استایل یک HTML را با تغییر دادن ویژگی های آن المان، تغییر دهیم.

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

حال قصد داریم که بیشتر درباره ماهیت و ضروری بودن استفاده DOM در جاوا اسکریپت صحبت کنیم و بفهمیم که چرا دقیقا انقدر وجود این کارکرد در جاوا اسکریپت و به طور کلی طراحی سایت لازم و ضروری است. پس در ادامه با ما همراه باشید.

چرا به DOM نیاز داریم

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

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

به فرض مثال جاوا اسکریپت تگ های <h1> را در HTML متوجه نمی شود اما همان تگ را اگر در DOM به جاوا نشان دهیم، بلافاصله متوجه آن می شود و در نتیجه می تواند به آبجکت ها دیگر کارکرد های مختلف سایت دسترسی پیدا کند.

ساختار DOM در جاوا اسکریپت به چه شکل است؟

DOM در جاوا اسکریپت را می شود یک جنگلی از درختان تصور کرد. در واقع DOM نمونه درختی ساختار یک برنامه است. این DOM مثل یک درخت شاخ و برگ دارد و از ساقه های متعددی تشکیل می شود که هرکدام از بخش های آن به بخش های کوچکتر تقسیم بندی می شوند. به تمامی این بخش ها هم به اصطلاح آبجکت (Object) می گویند که معمولا شامل موارد زیرمی شوند:

-Window Object

-Document Object

-Form Object

-Link Object

-Anchor Object

-Form Control Elements

نتیجه گیری

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

منابع:

Geekforgeeks

Gabrieltanner

Hackreactor