HTML DOM - تغییر محتوای HTML
پرش به ناوبری
پرش به جستجو
HTML DOM این اجازه را به جاوا اسکریپت می‌دهد که محتوی عناصر HTML ای را تغییر دهد. [۱]
تغییر جریان خروجی HTML
جاوا اسکریپت می‌تواند محتوای HTML پویا تولید کند:
در جاوا اسکریپت، از متد document.write() می‌توان برای نوشتن متن به صورت مستقیم در جریان خروجی HTML استفاده کرد:
مثال
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <script>
6 document.write(Date());
7 </script>
8
9 </body>
10 </html>
هرگز از متد
document.write() بعد از بارگذاری سند استفاده نکنید. این امر موجب بازنویسی سند می‌شود.تغییر محتوای HTML
راحت‌ترین راه برای تغییر محتوای یک عنصر HTML استفاده از ویژگی innerHTML است.
برای تغییر محتوای یک عنصر HTML، از شیوه نوشتار (به انگلیسی: syntax) زیر استفاده کنید:
document.getElementById(id).innerHTML = new HTML
این مثال محتوای عنصر <p> را تغییر می‌دهد:
مثال
1 <html>
2 <body>
3
4 <p id="p1">Hello World!</p>
5
6 <script>
7 document.getElementById("p1").innerHTML = "New text!";
8 </script>
9
10 </body>
11 </html>
توضیح مثال:
- سند HTML فوق، یک عنصر
<p>با id برابر با "p1" دارد. (id="p1")
- ما از HTML DOM برای دریافت عنصری با id برابر با "p1" استفاده می‌کنیم. (
id="p1")
- جاوا اسکریپت محتوای (ویژگی
innerHTML) عنصر را به متن "New text!" تغییر می‌دهد
این مثال محتوای عنصر <h1> را تغییر می‌دهد:
مثال
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h1 id="id01">Old Heading</h1>
6
7 <script>
8 var element = document.getElementById("id01");
9 element.innerHTML = "New Heading";
10 </script>
11
12 </body>
13 </html>
توضیح مثال:
- سند HTML بالا یک عنصر
<h1>با id برابر با "id01" دارد. (id="id01")
- ما از HTML DOM برای دریافت عنصری با id برابر با "id01" استفاده می‌کنیم. (
id="id01")
- جاوا اسکریپت محتوا (ویژگی
innerHTML) آن کنترل را به متن "New Heading" تغییر می‌دهد
تغییر محتوای یک خاصیت (به انگلیسی: Attribute)
برای تغییر محتوای یک خاصیت HTML از شیوه نوشتار (به انگلیسی: syntax) زیر استفاده کنید:
document.getElementById(id).attribute = new value
این مثال مقدار خاصیت src از یک عنصر <img> را تغییر می‌دهد:
مثال
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <img id="myImage" src="smiley.gif">
6
7 <script>
8 document.getElementById("myImage").src = "landscape.jpg";
9 </script>
10
11 </body>
12 </html>
توضیح مثال:
- سند HTML بالا یک عنصر
<img>با id برابر با "myImage" دارد (id="myImage")
- ما از HTML dom برای دریافت عنصری با id برابر با "myImage" استفاده می‌کنیم.
id="myImage"
- جاوا اسکریپت مقدار خاصیت
srcاز آن عنصر را از مقدار "smiley.gif" به "landscape.jpg" تغییر می‌دهد
تمرینات جاوا اسکریپت
ساخت نمونه مثال این بخش در دست اقدام است.
منابع آموزشی