ورود به کارتابل مشتریان وب مهراز
HTML DOM در JavaScript- تغییر HTML
یادگیری JavaScript
تعداد بازدید :
1609
تاریخ و ساعت انتشار :
یک شنبه 21 مرداد 1397 15:11
HTML DOM به جاوا اسکریپت برای تغییر محتوای عناصر HTML اجازه می دهد.
تغییر خروجی HTML
جاوا اسکریپت می تواند محتوای پویای HTML ایجاد کند
در جاوا اسکریپت، ()document.write می تواند برای نوشتن مستقیم به جریان خروجی HTML استفاده شود:
تغییر خروجی HTML
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html> هرگز از ()document.write بعد از بارگیری سند استفاده نکنید. این سند را بازنویسی خواهد کرد.
تغییر محتوای HTML
ساده ترین راه برای تغییر محتوای یک عنصر HTML با استفاده از innerHTML است.
برای تغییر محتوای یک عنصر HTML از این ساختار استفاده کنید:
document.getElementById(id).innerHTML = new HTML
این مثال محتوای یک عنصر <p> را تغییر می دهد:
تغییر محتوای HTML
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html> تشریح مثال:
- سند HTML بالا شامل عنصر <p> با id = "p1"
- ما از HTML DOM برای گرفتن عنصر با id = "p1" استفاده می کنیم
- یک جاوا اسکریپت محتوای (innerHTML) آن عنصر را به "New text!" تغییر می دهد.
این مثال محتوای یک عنصر <h1> را تغییر می دهد:
تغییر محتوای HTML
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html> تشریح مثال:
- سند HTML بالا شامل عنصر <h1> با id = "id01"
- ما از HTML DOM برای گرفتن عنصر با id = "id01" استفاده می کنیم.
- یک جاوا اسکریپت محتوای (innerHTML) این عنصر را به New Heading"" تغییر می دهد
تغییر مقدار یک مشخصه
برای تغییر مقدار یک ویژگی HTML، از این ساختار استفاده کنید:
document.getElementById(id).attribute = new value
در این مثال، مقدار ویژگی src یک عنصر <img> را تغییر می دهد:
تغییر محتوای HTML
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html> تشریح مثال
- سند HTML بالا شامل عنصر <img> با id = "myImage"
- ما از HTML DOM برای گرفتن عنصر با id = "myImage" استفاده می کنیم.
- جاوا اسکریپت ویژگی src آن عنصر را از "smiley.gif" به "landscape.jpg" تغییر می دهد.
نظر شما
>