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

نوشته از محمدامین سعیدی راد
1400/01/10
کاربرد های DOM در جاوا اسکریپت چیست

سلام و عرض ادب و احترام به همراهان عزیز سبزلرن.

همان طور که می دانید جاوا اسکریپت یکی از زبان های برنامه نویسی سمت کلاینت است و امروزه با پیشرفت هایی که دارد، در سمت سرور، برنامه نویسی دسکتاپ، اپلیکیشن های موبایل و … استفاده می شود.

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

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

Dom در جاوا اسکریپت چیست؟

Dom چیست

کلمه DOM مخفف Document Object Model است که برای کار با تگ های سند Html، استایل ها و اطلاعات مربوط به آن ها استفاده می شود.

وقتی صفحه وب سایت شما در مرورگر ظاهر می شود، یک ساختار درخت مانند از عناصر صفحه شما ایجاد می شود که به آن Dom Tree (درخت دام) گفته می شود.

عکس زیر نمایی از Dom Tree است:

ساختار DOM

طبق همین ساختار شما می توانید به تمامی اطلاعات عناصر Html خودتون مثل استایل ها، اتربیوت ها، والد، فرزند ها و … دسترسی داشته و آن ها را تغییر دهید.

آموزش جاوا اسکریپت

آموزش رایگان جاوا اسکریپت از مقدماتی تا پیشرفته

دسترسی به عناصر وب سایت

در ادامه مقاله کاربرد های dom در جاوا اسکریپت به دسترسی به عناصر سایت اشاره می کنیم ، شما به کمک متد هایی که برای کار با DOM وجود دارند، می توانید المنت های موجود در Html وب سایتتان را انتخاب کنید.
برای این منظور متد های مختلفی وجود دارد که در ادامه به آن ها اشاره شده است(تمامی این متد ها برای انتخاب المنت یک ورودی دریافت می کنند):

متد توضیح مثال
getElementById انتخاب المنت با آیدی document.getElementById(‘ID’)
getElementsByClassName انتخاب المنت با کلاس document.getElementsByClassName(‘className’)
getElementsByTagNagme انتخاب المنت با اسم تگ document.getElementsByTagNagme(‘button’)
querySelector انتخاب المنت طبق سلکتور های Css document.querySelector(‘#ID’)
querySelectorAll انتخاب المنت طبق سلکتور های Css document.querySelectorAll(‘.className’)

متد های ذکر شده تفاوت هایی نیز دارند که برای درک بهتر کاربرد و تفاوت های آن ها، حتما ویدئوی مربوط به این مقاله را مشاهده نمایید.

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

شما برای دسترسی به استایل های یک المنت (بصورت inline) می توانید المنت مورد نظر را با متد های گفته شده در قسمت قبل انتخاب کرده و داخل متغیری با اسم دلخواه (مثلا myElem) ذخیره کنید و سپس به کمک ویژگی style به استایل های inline آن المنت دسترسی داشته باشید.

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

    <h1 id="title" style="color: red;">SabzLearn.ir</h1>

    <script>
      let webTitle = document.getElementById('title')
      console.log(webTitle.style.color) // red
    </script>

همان طور که مشاهده می کنید تونستیم به کمک elem.style.color به ویژگی color المت h1 دسترسی داشته باشیم. به همین ترتیب می توانید به بقیه استایل های Css هر المنت دسترسی داشته باشید.

این Property ها read only نیستند و  می توانید بسته به نیاز خود، هر ویژگی را تغییر دهید.

به شکل زیر:

    <h1 id="title" style="color: red;">SabzLearn.ir</h1>

    <script>
      let webTitle = document.getElementById('title')
      webTitle.style.color = 'blue'
      console.log(webTitle.style.color) // blue

دقت داشته باشید که هنگام اعمال یک ویژگی Css، مقدار مورد نظر شما باید String باشد.

دسترسی به اتربیوت (Property) های المنت ها

شما می توانید به کمک متد هایی که برای DOM وجود دارند، به اتربیوت های المنت ها دسترسی داشته باشید.

بعد از این که المنتی را انتخاب کرده و داخل متغیری با اسم دلخواه (مثلا Elem) ذخیره کردید، می توانید بعد از Elem یک نقطه (.) قرار داده و بعد از آن اسم اتربیوت (Property) مورد نظر خود را بنویسید.

به عنوان مثال کد زیر رو ببینید:

    <h1 id="title">SabzLearn.ir</h1>

    <script>
      let webTitle = document.getElementById('title')

      console.log(webTitle.id) // title

طبق کد بالا می توانیم به اتربیوت (Property) های یک المت دسترسی داشته باشیم.

پروپرتی های هر المنت دقیقا مثل استاایل های آن read only نیستند و می توانید هر کدام از آن ها را به دلخواه تغییر دهید.

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

    <h1 id="title">SabzLearn.ir</h1>

    <script>
      let webTitle = document.getElementById('title')
      webTitle.id = 'logo'
      console.log(webTitle.id) // logo

طبق کد بالا می توانید اتربیوت (Property) های یک المنت را تغییر دهید.

دسترسی به اتربیوت (Property) های المنت ها

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

متد توضیح مثال
getAttribute
دریافت اتربیوت مورد نظر یک المنت Elem.getAttribute(‘id’)
setAttribute
ست کردن (یا تنظیم کردن) یک اتربیوت برای یک المنت Elem.setAttribute(‘id’, ‘YourId’)

شما به این روش نیز میتوانید اتربیوت های المنت هاتون رو دریافت کرده یا آن ها را تغییر دهید.

اما این روش چه تفاوتی با روش قبلی داره؟ تو روش قبلی میتونستیم بدون هیچ متدی با اتربیوت های هر المنت کار کنیم.

تفاوت دو روش قبلی

همان طور که میدونین هر المنت یک Object به حساب میاد و شما میتونین به روش نقطه (.) به Property های هر المنت دسترسی داشته باشید. یعنی علاوه بر اتربیوت های اصلی هر المنت در Html، می توانید داخل Js هم برای هر المنت Property های مختلف و دلخواه تعیین کنینو

اما با متد های گفته شده در روش قبل، می توانید فقط با اتربیوت های از قبل تعیین شده در Html مثل id, href, type, name, href و … کار کنین.

برای درک بیشتر این موضوع، ویدئوی این مقاله را حتما مشاهده کنید.

چند قابلیت دیگر document

در جدول زیر نیز به چندین متد و Property از آبجکت document اشاره می کنیم:

Property یا Method توضیح
document.hidden آیا کاربر در مرورگر خودش، در تب وب سایت ما حضور دارد یا خیر
document.body دسترسی به المنت body
document.head دسترسی به المت head
document.forms دسترسی به فرم های صفحه Html
document.createElement ایجاد یک المنت دلخواه Html
document.write نوشتن یک متن دلخواه در صفحه وب سایت
document.createAttribute ایجاد یک اتربیوت
document.appendChild نسبت دادن یک المت بعنوان فرزند به document
document.removeChild حذف یک المنت از داخل document

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

آموزش جاوا اسکریپت

سخن پایانی

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

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

امیدوارم مقاله ی کاربرد های dom در جاوا اسکریپت براتون مفید واقع شده باشه. برای اطلاعات بیشتر ویدئوی مربوط به همین مقاله را مشاهده کنید و اگر سوال، انتقاد یا پیشنهادی داشتید در قسمت کامنت ها بهمون بگید.

تا مقاله بعدی خدانگهدار.

نظرات

ثبت نظر جدید

این مطلب هنوز هیچ نظری نداره، تو اولیش رو بنویس :)

آموزش جاوا اسکریپت