HTML DOM در JavaScript- تغییر HTML

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

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری JavaScript

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط