دسترسی به عناصر موجود در صفحه در جاوا اسکریپت

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

نحوه استفاده

هنگامی که صفحه وب بارگذاری می شود، مرورگر اقدام به ساخت DOM می نماید. DOM یک ساختار سلسله مراتبی به ترتیب عناصر موجود در صفحه HTML می باشد بطوریکه در آن تگ Html به عنوان Root Element و تگ های head و body زیر مجموعه های آن محسوب می شوند و این سلسله مراتب به همین شکل ادامه می باید.

دسترسی به عناصر HTML در جاوا اسکریپت از طریق کلمه کلیدی document و به روش های مختلفی امکان پذیر است که سه روش پر کاربرد عبارتند از:

پیدا کردن عناصر به وسیله id

 توسط متد getElementById می توان عناصر را با استفاده از id آنها شنایی نمود.

<script>
  var mybox = document.getElementById('box1');
</script>

پیدا کردن عناصر به وسیله class

در این روش با استفاده از متد getElementsByClassName می توان عناصری که دارای کلاس مورد نظر می باشند را شناسایی نمود.

<script>
  var redBoxes = document.getElementsByClassName('redbox');
</script>

خروجی این متد از نوع آرایه می باشد. به عبارتی دیگر در مثال فوق متغیر redBoxes آرایه ای از divها می باشد.

پیدا کردن عناصر به وسیله نام تگ

متد مورد استفاده در این روش نیز getElementsByTagName می باشد که خروجی آن نیز از نوع آرایه می باشد.

<script>
  var imgList = document.getElementsByTagName('img');
</script>

استایل دهی

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

برای استایل دهی به عناصر HTML ابتدا باید عنصر مورد نظر را به یکی از روش های ذکر شده پیدا کنید. پس از یافتن عنصر و قرار دادن اطلاعات آن درون یک متغیر، می توانید با استفاده از خاصیت style، یک استایل برای آن تعیین نمایید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno academy | Javascript</title>
  </head>
  <body>
    <div id="box1"></div>
    <script>
      var mybox = document.getElementById('box1');
      mybox.style.width="200px";
      mybox.style.height="200px";
      mybox.style.border="1px solid red";
    </script>
  </body>
</html>

مشاهده می کنید که بعد از استفاده از خاصیت style، تمام خواصی که در CSS آموزش داده شد قابل استفاده می باشند.

نکته: در جاوا اسکریپت از روش نامگذاری camelCase استفاده می شود، به همین دلیل معادل خواصی مانند background-color در جاوا اسکریپت به شکل backgroundColor قابل استفاده می باشد.

برای انجام تمرینات بیشتر می توانید مقاله  انیمیشن سازی را مطالعه نمایید.