سبد (0)

تبلیغات

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

مدل DOM به JavaScript اجازه می دهد تا محتوای عناصر HTML را تغییر دهد.


دستور ()document.write

Wiki

با JavaScript می توان، محتوای HTML داینامیک ایجاد کرد:

Date:

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

مثال (تغییر محتوای عناصر HTML)

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>
خودتان امتحان کنید »

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


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

Wiki

آسان ترین راه برای تغییر محتوای یک عنصر 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>
خودتان امتحان کنید »

در مثال زیر، محتوای عنصر با شناسه "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 بالا، شامل یک عنصر <h1> با شناسه "header" است.
  • با استفاده از مدل DOM عنصر با شناسه "header" را پیدا کرده ایم.
  • با استفاده از خصوصیت innerHTML در JavaScript محتوای عنصر را تغییر داده ایم.

تغییر خصوصیت عناصر HTML

Wiki

نحوه استفاده:

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 بالا، شامل یک عنصر <img> با شناسه "image" است.
  • با استفاده از مدل DOM عنصر با شناسه "image" را پیدا کرده ایم.
  • با استفاده از خصوصیت src در JavaScript آدرس عکس را از "smiley.gif" به "landscape.jpg" تغییر داده ایم.

دیدگاه‌ها  

+1 # دماوند 1395-10-04 20:03
به نام خداوند بخشنده و مهربان ، سلام و عرض ادب
بین دستور
document.getEle mentById(id).at tribute=new value
و دستور
content.document.getEle mentById(id).at tribute=new value
چه تفاوتی وجود داره ؟
واینکه بفرمایید content دراینجا دقیقا به چه چیزی اشاره داره و چه کاری انجام میده؟
از راهنمایی های شما سپاسگزارم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-10-05 10:35
سلام و عرض ادب
دوست عزیز فکر نمی کنم توی جاوااسکریپت شیء ای به نام content وجود داشته باشه. لا اقل من که ندیدم تا حالا. در جاوا اسکریپت شیء window رو داریم و بعدش شیء document است. این دستور را از کجا آوردید؟ لطفا منبع رو ارسال کنید. با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # ali 1394-03-02 13:14
سلام این سایت خیلی مشتی اموزش میده و مشکل من رو از لحاظ جاوا اسکریپت حل کرده میخواستم ببینم اموزش جاوا نداره
هرچی گشتم جاوا نداشت:(
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-03-03 22:30
سلام، خدا رو شکر که آموزش JavaScript برای شما کارساز بوده ...
متأسفانه در بیاموز آموزش Java وجود ندارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیرکیان 1393-12-16 13:07
خیلی خوب
فقط یک سوال؟آیا میشود خصوصیات css را در جاوا اسکریپت استفاده کرد؟
مثلاً من دیدم که خاصیت display در جاوااسکریپت وجود ندارد بجاش خاصیت Hidden است ؛نمی دونم شاید من اشتباه می کنم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مظاهر نصوحی 1393-12-16 13:46
در http://beyamooz.com/javascript/185-dom/576 به سوال شما پاسخ داده شده و از display برای مخفی کردن استفاده شده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی