سلام دوستان گرامی و عزیز ، با مبحثی دیگر در زمینه جاوا اسکریپت با آموزش تغییر محتوای عناصر HTML- HTML DOM در خدمت شماهستم.مدل شی گرای سند HTML به جاوا اسکریپت این امکان را می دهد که محتویات المان ها را تغییر دهد.

تغییر stream(جریان) خروجی HTML

جاوا اسکریپت این قابلیت را دارد که محتوای پویا dynamic) HTML) ایجاد کند:

Date: Sun Jul 26 2015 12:37:06 GMT+0430 (Iran Daylight Time)

در جاوا اسکریپت می توان بطور مستقیم، خروجی HTML چاپ کرد. این کار با استفاده از متد document.write() امکان پذیر می باشد:

نمونه یک
?
۱

document.write(Date());

توجه: هیچگاه پس از اتمام بارگذاری صفحه (document)، از متد document.write() استفاده نکنید. این کار باعث می شود روی صفحه ی مورد نظر، بازنویسی (overwrite) صورت گیرد.

تغییر محتوای عناصر HTML

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

جهت مدیریت و اصلاح محتویات تگ HTML، کافی است از ساختار نگارشی (syntax) زیر استفاده کنید:

document.getElementById(id).innerHTML = new HTML

مثال زیر محتوای المان

را تغییر می دهد:

نمونه دو
?
۱
۲
۳

document.getElementById(“p1”).innerHTML = “New text!”;

The paragraph above was changed by a

این مثال محتویات (content) المان

را اصلاح می کند:

نمونه سه
?
۱
۲

var element = document.getElementById(“header”);
element.innerHTML = “New Header”;

تشریح مثال:

سند HTML مثال بالا، دربردانده ی یک المان

است که شناسه ی آن “header”می باشد.

با استفاده از HTML DOM المانی که شناسه ی آن “header” می باشد را بازیابی کردیم.

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

تغییر مقدار یک خصیصه (attribute value)

به منظور اصلاح مقدار یک خصیصه ی HTML، باید از ساختار نگارشی (syntax) زیر بهره جست:

document.getElementById(id).attribute=new value

این مثال مقدار خصیصه ی src المان را تغییر می دهد:

نمونه چهار
?
۱

document.getElementById(“image”).src = “index.jpg”;

شرح مثال:

سند HTML مثال فوق دارای یک المان با شناسه “myImage”است.

با بهره گیری از مدل شی گرای سند HTML ( (HTML DOM عنصری که شناسه ی آن “myImage”می باشد را بازیابی می کنیم.

کد جاوا اسکریپت خصیصه ی src المان مذکور را از “smiley.gif” به “landscape.jpg” تغییر می دهد.