تغییر محتوای عناصر 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" تغییر داده ایم.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 26955