HTML DOM - تغییر محتوای HTML

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

HTML DOM این اجازه را به جاوا اسکریپت می‌دهد که محتوی عناصر HTML ای را تغییر دهد. [۱]

تغییر جریان خروجی HTML

جاوا اسکریپت می‌تواند محتوای HTML پویا تولید کند:

در جاوا اسکریپت، از متد document.write() می‌توان برای نوشتن متن به صورت مستقیم در جریان خروجی HTML استفاده کرد:

مثال

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</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>
 7document.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>
 8var element = document.getElementById("id01");
 9element.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>
 8document.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" تغییر می‌دهد

تمرینات جاوا اسکریپت

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



منابع آموزشی