سبد (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" تغییر داده ایم.

آموزش صوتی JavaScript

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

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

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