درس دوازدهم- ارتباط جاوا اسکریپت با اچ تی ام ال
آموزش این دوره تا به اینجا مربوط به مفاهیم پایه‌ای و شیوه برنامه نویسی در جاوا اسکریپت بوده است. در این درس می‌خواهیم به یک قابلیت دیگر جاوا اسکریپت یعنی ارتباط آن با برچسب‌های اچ تی ام ال بپردازیم.
اچ تی ام ال و جاوا اسکریپت (HTML DOM) Document Object Model
DOM در اصل یک استاندارد برای دسترسی به سندهای اچ تی ام ال تعریف می‌کند و آنها (برچسب‌های اچ تی ام ال) را به عنوان آبجکت در نظر می‌گیرد. وقتی یک برگه در وب بالا می‌آید مرورگر یک درخت از آبجکتهای واقع در آن (برچسب‌های اچ تی ام ال که به عنوان آبجکت در نظر گرفته شده‌اند) با نام «سند مدل آبجکت»ـی یا DOM می‌سازد. این مدل شبیه درختی است که در بالای آن آبجکتهای اصلی برگه قرار دارند و در زیر آن دیگر آبجکتهایی که برگه را می‌سازند. DOM در اچ تی ام ال قابل دسترسی با جاوا اسکریپت یا دیگر زبان‌های برنامه نویسی است. بوسیله استاندارد DOM جاوا اسکریپت می‌تواند به برچسب‌های اچ تی ام ال دسترسی پیدا کرده و حتی آنها را تغییر دهد.
تصویر بالا نمایش دهنده سند آبجکتی ساخته شده برای برچسب‌های اچ تی ام ال است که از تارنمای w3schools قرض گرفته شده است.
قابلیت‌های DOM شامل موارد زیر می‌شوند:
۱- تغییر همه برچسب‌های اچ تی ام ال واقع در یک صفحه
۲- تغییر همه ویژگی‌های اچ تی ام ال
۳- تغییر همه برچسب‌های شیوه دهی (سی اس اس)
۴- پاک کردن برچسب‌های اچ تی ام ال و ویژگی‌هایشان
۵- اضافه کردن برچسب‌های تازه اچ تی ام ال
۶- واکنش نشان دادن به رویدادهای مربوط به برچسب‌های اچ تی ام ال
۷- بوجود آوردن رویدادهای تازه برای اچ تی ام ال‌های واقع در صفحه
«سند آبجکتی» شامل دو فاکتور «متد‌ها» و «ویژگی‌ها»ی مربوط به هر آبجکت است. متد‌ها عمل‌هایی هستند که ما می‌توانیم بر روی برچسب‌های اچ تی ام ال انجام دهیم و ویژگی، مقدارهایی از برچسب‌های اچ تی ام ال هستند که ما می‌توانیم استفاده کنیم یا تغییر دهیم.
به نمونه زیر توجه فرمایید:
<html>
<body>
<p id="intro"> درود جهان </p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
در کدهای بالا ابتدا یک برچسب اچ تی ام ال (<p>) که دارای مقدار (دورد جهان) است تعریف کرده و سپس توسط جاوا اسکریپت و قابلیت DOM آن مقدار را درون متغیری ریخته‌ایم در آخر مقدار را چاپ نموده‌ایم.
document.getElementById("intro").innerHTML
در دستور بالا getElementById یک متد و innerHTML ویژگی تعریف شده در DOM است. این دستور مقدار درون برچسبی دارای شناسه (id) و ویژگی intro را بر می‌گرداند.
متد getElementById و ویژگی innerHTML
بهره بردن از متد getElementById و ویژگی innerHTML عمومی‌ترین راه برای دسترسی و دریافت مقدار یک برچسب از طریق شناسه (id) آن
برچسب است. به این ترتیب این متد و ویژگی از شناسه برچسب استفاده می‌کنند
تا مقدار آن را دریافت کنند، همانطور که در نمونه بالا این اتفاق افتاده
است.
متد getElementById عمل شناسایی برچسب را از طریق شناسه آن انجام داده و ویژگی innerHTMLمحتوای آن برچسب را دریافت می‌کند.
نکته: ویژگی innerHTML ساده‌ترین راه برای دریافت و جابجایی محتوای یک برچسب اچ تی ام ال است. این برچسب‌ها حتی میتوانند برچسب‌هایی مانند html یا body که از برچسب‌های اصلی اچ تی ام ال هستند، باشند.
معرفی صفحه وب توسط HTML DOM و آبجکت document
در بخش پیشین گفتیم که با استفاده از HTML DOM صفحه وب شما تبدیل به یک مدل سند آبجکت می‌شود. یعنی، این مدل سند آبجکتی است که صفحه وب شما را معرفی می‌کند و تمام برچسب‌های اچ تی ام ال از طریق این استاندارد به صورت یک آبجکت داخل
سند پنداشته می‌شوند. این پنداشت باعث می‌شود که شناسایی، دسترسی، تغییر و
جابجایی برچسب‌ها امکان پذیر گردد. به تعریف دیگر تمام برچسب‌های اچ تی
ام ال در اختیار سند آبجکتی قرار می‌گیرند. حال برای دسترسی به همهٔ آبجکتهای این سند از آبجکت document استفاده می‌شود، به این ترتیب که برای دسترسی به هر آبجکت ابتدا با بکار بردن کلمه «document» به
آن دسترسی پیدا کرده و بعد عملیات لازم را در روی آن انجام می‌دهیم. در
زیر فهرستی از متد‌ها و ویژگی‌هایی که توسط آنها به برچسب‌های اچ تی ام ال
دسترسی پیدا می‌کنیم آمده است.
پیدا کردن برچسب‌های اچ تی ام ال
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.forms[]
جابجایی برچسب‌های اچ تی ام ال
document.write(text)
document.getElementById(id).innerHTML=
document.getElementById(id).attribute=
document.getElementById(id).style.attribute=
اضافه کردن و پاک کردن برچسب‌های اچ تی ام ال
document.createElement()
document.removeChild()
document.appendChild()
document.replaceChild()
افزودن هدایت کننده رویداد‌ها
document.getElementById(id).onclick=function(){code}
همانطور که می‌بینید در ابتدای هر دستور از document استفاده شده است. در ادامه به شرح متد‌ها و ویژگی‌های یاد شده می‌پردازیم.
یافتن و تغییر برچسب‌های اچ تی ام ال
برای
ایجاد تغییر در برچسب‌های اچ تی ام ال ابتدا باید آن برچسب را پیدا کنیم.
برای این منظور می‌توانیم از راه‌های متفاوت زیر عمل کنیم:
۱- یافتن برچسب‌های اچ تی ام ال توسط شناسه برچسب (id)
۲- یافتن برچسب‌های اچ تی ام ال توسط نام برچسب
۳- یافتن برچسب‌های اچ تی ام ال توسط نام کلاس
۴- یافتن برچسب‌های اچ تی ام ال توسط مجموعه آبجکتها
یافتن برچسب‌های اچ تی ام ال توسط شناسه برچسب (id)
پیش از این گفتیم که ساده‌ترین راه یافتن برچسب‌های اچ تی ام ال استفاده از شناسه برچسب است. مانند:
<p id="intro"> درود جهان </p>
var x=document.getElementById("intro");
این نمونه کد محتوای داخل برچسب «p» را با شناسه «id» و ویژگی «intro» (id=intro) باز می‌گرداند. در این حالت اگر برچسب پیدا شود متد مورد استفاده برچسب را به شکل یک آبجکت در x باز می‌گرداند و اگر برچسب یافت نشود مقدار x هیچ (null) می‌شود. نمونه کدهای زیر این عمل را به وضوح نشان می‌دهند.
<!DOCTYPE html>
<html> <body>
<p id="intro"> درود جهان </p>
<script>
x=document.getElementById("intro");
document.write( x.innerHTML);
</script> </body> </html>
نکته: حتما متوجه شده‌اید که در این نمونه ویژگی inerHTML آبجکت document را جدا و در خط دستور دیگری نوشته‌ایم در صورتی که در نمونه پیشین ویژگی را بعد از متد و چسبانده به آن آوردیم. این شیوه، راه دیگری برای دسترسی به محتوای یک ویژگی است.
یافتن برچسب‌های اچ تی ام ال توسط نام برچسب
این حالت یافتن برچسب را با اشاره به نام آن انجام می‌دهد:
var y=x.getElementsByTagName("p");
دستور بالا برچسب را بر اساس نام آن (p) پیدا می‌کند.
<!DOCTYPE html>
<html> <body>
<p> درود جهان </p>
<div id="main">
<p> DOM کار با </p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write( y[0].innerHTML);
</script>
</body>
</html>
این نمونه ابتدا برچسب را بر اساس شناسه (main) پیدا کرده و سپس تمام برچسب‌های «p» درون آن را می‌یابد و در داخل آرایه «y» قرار می‌دهد y[0] نخستین مقدار آرایه را اشاره می‌کند.
یافتن برچسب‌های اچ تی ام ال توسط نام کلاس
متد getElementsByClassName تمام برچسب‌های با کلاس یکسان را پیدا می‌کند.
document.getElementsByClassName("intro");
یافتن برچسب‌های اچ تی ام ال توسط مجموعه آبجکتها
منظور از مجموعه آبجکتها، آبجکتهایست که مربوط به یک دسته یا گروه می‌باشند. بطور نمونه مجموعه آبجکتهای سازنده فرم (form) همه در زیر مجموعه مجموعه آبجکت «فرم» قرار می‌گیرند.
<!DOCTYPE html>
<html> <body>
<form id="frm1" >
نام: <input type="text" name="fname" value="پیمان"><br/ >
نام خانوادگی: <input type="text" name="lname" value="شهروز"><br/ >
<input type="submit" value="بفرست">
</form>
<p id="demo"></p>
<button onclick="myFunction()"> امتحان کنید </button>
<script>
function myFunction() {
var x = document.getElementById("frm1");
var txt = "";
for (var i = 0 ; i < x.length ; i++) {
txt = txt + x.elements[i].value + "<br/ >";
}
document.getElementById("demo").innerHTML = txt ;
}
</script> </body> </html>
نمونه بالا ابتدا یک فرم را توسط برچسب‌های اچ تی ام ال می‌سازد. سپس توسط یک تابع برچسب‌های فرم را با شناسه «frm1» شناسایی و تمام مقادیر -حتی نام برچسب بفرست- را چاپ می‌کند. هدف از این نمونه چگونگی شناسایی و چاپ تمام برچسب‌ها بوده است، بدیهی ست که در یک فرم نباید نام برچسب ارسال (بفرست) چاپ شود.
نکته: برای درک بیشتر عملکرد «یافتن برچسب‌های اچ تی ام ال توسط مجموعه آبجکتها» می‌باید از نمونه بالا بهره برده و خود شما فرم دلخواه خود را ساخته و خروجی آن را مشاهده فرمایید. همیشه بهترین راه یادگیری تغییر و ویرایش کدها و ساخت کدهای تازه است.
من به یه مشکلی برخوردم
متن یک عنصر و با innerHTML میگیرم ولی موقعی که میخوام نمایش بدم در خروجی undefined نمایش داده میشه
میشه بگید مشکل از چیه؟