Real Time Web Analytics پرسش و پاسخ Elam

جاوااسکریپت

DOM چیست؟

تاریخ انتشار:
12:54:53 1396-05-05
چگونه صفحات وب و JavaScript در کنار یکدیگر کار و تعامل می کنند و چگونه آن ها می توانند با یکدیگر ارتباط برقرار می کنند.

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

جواب این سوال مدل شی اسناد (Document Object Model) یا به اصلاح همان DOM می باشد.

DOM صفحات وب را سازمان دهی می کند و امکان راه یابی بین صفحات را  ممکن می سازد،این مدل از گره ها (nodes) ساخته شده است. گره ها به صورت سلسه مراتبی از هزاران ساختار درختی تشکیل شده است. ما می توانیم هر صفحه HTML را دریافت کنیم و به این شکل نمایش دهیم.

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

 

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

این بسیار مهم است که کدهای CSS و JavaScript به صورت مجزت از DOM باشند و می توانند DOM را دستکاری کنند در عوض این که داخل آن ساکن شوند.

استفاده مجدد از کدها

چرا کدهای منبع (Source Code) برای صفحات وب اینگونه مدیریت می شوند؟

جواب این سوال دو علت اساسی دارد:

  1. قرار دادن JavaScript در فایل های مجزا ،استفاده مجدد از کدها را راحت تر می کند.
  2. JavaScript در یک فایل مجزا قرار میگیرد که این کار صفحات مختلف وب که شامل محتوی مختلف می باشد را خوانا تر و فهم آن را آسان تر می کند

گره های DOM

گره هایی که ما ایجاد و کنترل می کنیم منحصر به HTML و پشتیبان مرورگرها می باشد. برای همین علت است که  HTML5’s المان های سطح بالایی که مهم بود را اختراع  کرد.

برای اهداف ما،مهم ترین مدل گره ها عبارت است از:

  • Element
  • Attribute
  • Text

استفاده از Script برای ایجاد گره در DOM

در اینجا به شما نمایش می دهیم که چطور یک JS قدرتمند با استفاده از پایه و اساس صفحات وب ایجاد کنید:

  • HTML Snippet

 

  • JavaScript Snippet
//declare a new variable to hold a new h1 element

var newHeading = document.createElement("h1");

//add the text node to the document

var h1Text = document.createTextNode("Heading Level 1");

//make it a child node of the new heading

newHeading.appendChild(h1Text);

//append this as a child of element defined as "bt"
document.getElementById("bt").appendChild(newHeading);

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

برچسب ها:
مقالات مشابه