تغییر محتوای عناصر HTML
مدل DOM به JavaScript اجازه می دهد تا محتوای عناصر HTML را تغییر دهد.
دستور ()document.write
با JavaScript می توان، محتوای HTML داینامیک ایجاد کرد:
Date:
در JavaScript، با دستور ()document.write می توان بطور مستقیم، خروجی HTML چاپ کرد:
مثال (تغییر محتوای عناصر HTML)
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
خودتان امتحان کنید »<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
توجه: هرگز از دستور ()document.write بعد از اینکه صفحه بارگذاری شد استفاده نکنید. چون باعث بارگذاری مجدد صفحه می شود.
تغییر محتوای عناصر HTML
آسان ترین راه برای تغییر محتوای یک عنصر HTML، استفاده از خصوصیت innerHTML است.
نحوه استفاده:
document.getElementById(id).innerHTML=new HTML
در مثال زیر، محتوای عنصر با شناسه "p1" تغییر داده شده است:
مثال (تغییر محتوای عناصر HTML)
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
خودتان امتحان کنید »<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
در مثال زیر، محتوای عنصر با شناسه "header" تغییر داده شده است:
مثال (تغییر محتوای عناصر HTML)
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>
خودتان امتحان کنید »<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>
توضیح مثال:
- صفحه HTML بالا، شامل یک عنصر <h1> با شناسه "header" است.
- با استفاده از مدل DOM عنصر با شناسه "header" را پیدا کرده ایم.
- با استفاده از خصوصیت innerHTML در JavaScript محتوای عنصر را تغییر داده ایم.
تغییر خصوصیت عناصر HTML
نحوه استفاده:
document.getElementById(id).attribute=new value
مثال زیر، خصوصیت src عنصر <img> را تغییر داده است:
مثال (تغییر محتوای عناصر HTML)
<!DOCTYPE html>
<html>
<body>
<img id="image" src="/smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
خودتان امتحان کنید »<html>
<body>
<img id="image" src="/smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
توضیح مثال:
- صفحه HTML بالا، شامل یک عنصر <img> با شناسه "image" است.
- با استفاده از مدل DOM عنصر با شناسه "image" را پیدا کرده ایم.
- با استفاده از خصوصیت src در JavaScript آدرس عکس را از "smiley.gif" به "landscape.jpg" تغییر داده ایم.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 27666
دیدگاه‌ها
به نام خداوند بخشنده و مهربان ، سلام و عرض ادب
بین دستور
document.getEle mentById(id).at tribute=new value
و دستور
content.document.getEle mentById(id).at tribute=new value
چه تفاوتی وجود داره ؟
واینکه بفرمایید content دراینجا دقیقا به چه چیزی اشاره داره و چه کاری انجام میده؟
از راهنمایی های شما سپاسگزارم
سلام و عرض ادب
دوست عزیز فکر نمی کنم توی جاوااسکریپت شیء ای به نام content وجود داشته باشه. لا اقل من که ندیدم تا حالا. در جاوا اسکریپت شیء window رو داریم و بعدش شیء document است. این دستور را از کجا آوردید؟ لطفا منبع رو ارسال کنید. با تشکر
سلام این سایت خیلی مشتی اموزش میده و مشکل من رو از لحاظ جاوا اسکریپت حل کرده میخواستم ببینم اموزش جاوا نداره
هرچی گشتم جاوا نداشت:(
سلام، خدا رو شکر که آموزش JavaScript برای شما کارساز بوده ...
متأسفانه در بیاموز آموزش Java وجود ندارد.
خیلی خوب
فقط یک سوال؟آیا میشود خصوصیات css را در جاوا اسکریپت استفاده کرد؟
مثلاً من دیدم که خاصیت display در جاوااسکریپت وجود ندارد بجاش خاصیت Hidden است ؛نمی دونم شاید من اشتباه می کنم.
در beyamooz.com/javascript/185-dom/576 به سوال شما پاسخ داده شده و از display برای مخفی کردن استفاده شده است.