دام (DOM) یک شیوه یا مدل استاندارد ، برای دسترسی به کلیه عناصر درون یک سندHTML را ارائه می دهد . مدل DOM مخفف عبارتDocument Object Model است.در هنگام کار با جاوا اسکریپت ، برای تغییر هر چیزی بر روی صفحه ، برنامه نیاز دارد تا به آن عنصر خاص دسترسی داشته باشد.
برای مثال ما می خواهیم اندازه قلم یک پاراگراف را در صفحه تغییر دهیم ، در حالی که در درون صفحه پاراگراف های زیادی وجود دارد که باید بدون تغییر باقی بمانند.در این هنگام ما ابتدا باید به پاراگراف مورد نظر دسترسی داشته باشیم و سپس آن را تغییر دهیم.این امکان دسترسی به عناصر در یک صفحه HTML به همراه تمام متدهای آن برای تغییر ، حذف و اضافه کردن عناصر به وسیله مدل DOM فراهم شده است.
مفهوم و نحوه عملکرد مدل DOM
مدل DOM برای دسترسی به اشیا و عناصر موجود در یک صفحه HTML از یک درخت سلسه مراتبی استفاده می کند.این درخت از شی WINDOW به عنوان عنصر مادر یک صفحه HTML شروع شده و به ترتیب به عناصر رده پایین تر ادامه می یابد،تا به پایین ترین رده عناصر یعنی متن و نوشته برسد.
جاوا اسکریپت با استفاده از مدل شی گرای DOM ,یک صفحه HTML داینامیک یا پویا ایجاد می کند.
با استفاده از DOM میتوان:
معرفی مدلDOM (Document Object Model)
عناصر موجود در Body زیر را در نظر بگیرید:
<div>
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
</div>
<h1> EXAMPLE </h1>
<p> DOM in JavaScript </p>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
در زبان برنامه نویسی Html یک ساختار درختی با نام DOM و جود دارد، در این ساختار تگ های داخل یک صفحه دارای والد و فرزندی هستند.
برای مثال در عناصری که بالا ایجاد کردیم همین ساختار وجود دارد. عنصر div دارای والدی به نام body است و همین عنصر فرزندی به نام img دارد.در بحث ساختارDOM عناصر میتوانند همزاد باشند، در بالا تگ div با تگp همزاد است چرا که در یک رده قرار گرفته اند و هر دو فرزند body میباشند.
پیدا کردن عناصر در صفحه:
از ایجاد این ساختار هدفی وجود دارد که چگونه میتوان یک عنصر را حذف کرد یا اینکه اضافه کرد.که با استفاده از زبان برنامه نویسی جاوا اسکریپت در بحث DOM ممکن میشود.برای کار کردن با DOM از کلاس Document استفاده میکنیم با استفاده از این کلمه ما میتوانیم به همه اشیاء داخل صفحه دسترسی پیدا کینم.
حال برای اینکه به یک عنصر در صفحه دسترسی پیدا کینم از کلمه کلیدی .getElementById() بعد از document استفاده میکنیم که برای دسترسی نیاز به id عنصر مورد نظر دارد.
document.getElementById("id");
در ادامه بعد از اینکه عنصر مورد نظر را پیدا کرد درون یک متغییر قرار میدهیم و تغییراتی را بر روی آن متغییر اعمال میکنیم.
var element=document.getElementById("img1");
element.style.border="1px solid #ffff00";
در صفحاتhtml گاهی به وجود می‌آید که به چندین عنصر در صفحه دسترسی پیدا کنیم.در این صورت از.getElementsByClassName() استفاده میکنیم.در این روش برای پیدا کردن نام کلاسی را میخواهد که عناصر دیگر هم آنرا دارا باشند و بعد از اینکه عناصر هم کلاسی را پیدا کرد باید با استفاده از حلقه for به همه دسترسی پیدا کرد و تغییراتی را بر روی آنها انجام داد.
var elemens=document.getElementsByClassName("img");
for (let index = 0; index < elemens.length; index++) {
const element = elemens[index];
element.style.border="1px solid #ff00ff"
}
در روش دیگر برای دسترسی به چندین تگ یا عنصر میتوانیم از نام تگ‌ها استفاده کنیم.
var elemens2=document.getElementsByTagName("tag name");
for (let index = 0; index < elemens2.length; index++) {
const element = elemens2[index];
element.style.border="1px solid #ff00ff";
}
اضافه کردن عنصر به صفحه:
موضوع بعدی اضافه کردن تگ html با زبان جاوا اسکریپت به صفحه html است.در بخشScript به کمک متد زیر ابتدا تگhtml مورد نظرمان را ایجاد میکنیم و درون یک متغییر قرار میدهیم.
var tag=document.createElement("Tag name");
حال برای اینکه تگ ما دارای محتوای متنی باشد از متد زیر استفاده کرده و درون یک متغییر قرار میدهیم.
var text=document.createTextNode("your text");
حال با استفاده از متد appendChild متغییر متنی را درون متغییر از نوع tag قرار میدهیم.
tag(text);
و در ادامه به کمک متد بالا به صورت زیر متغییر از نوع tag را به body اضافه میکنیم.
document.body(tag);
حذف کردن عنصر در صفحه:
برای حذف کردن عکس در صفحه ابتدا با استفاده از id آنها را پیدا میکنیم و درون یک متغییر قرار میدهیم.
var item=document.getElementById("img1");
حال با استفاده از نام عنصر،والد این عنصر را هم پیدا میکنیم.
var div=document.getElementsByTagName("div");
با استفاده از شماره خانه تگ div مورد نظر عکس را حذف میکنیم.
div[0].removeChild(img1);
پیدا کردن عناصر HTML در جاوا اسکریپت
تغییر عناصر HTML در جاوا اسکریپت
جدول زیرمتد ها و ویژگی های مربوز به تغییر عناصرHTML در جاوا اسکریپت را توضیح داده است:
حذف و اضافه کردن عناصر HTML
