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

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

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

در این مقاله قصد دارم در مورد

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

و چه قابلیت هایی به شما می دهد صحبت کنم.

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

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

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

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

طبق همین ساختار شما می توانید به تمامی اطلاعات عناصر 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 آن المنت دسترسی داشته باشید.

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

    
SabzLearn.ir

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

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

به شکل زیر:

    
SabzLearn.ir