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

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

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

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

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

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

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

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

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

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

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

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

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

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

شما برای دسترسی به استایل های یک المنت (بصورت 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 چند متد برای دسترسی به اتربیوت های المنت وجود دارد که در ادامه به این متد ها می پردازیم:

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

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

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

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

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

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

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

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

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

سخن پایانی

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

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

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

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