جافا سكربت همل دوكومنت - تغيير همل

يسمح HTML DOM لـ JavaScript بتغيير محتوى العناصر HTML.

تغيير منفذ输出来توليد HTML

يمكن لـ JavaScript إنشاء محتوى HTML ديناميكي:

في JavaScript،document.write() يمكن استخدامها للكتابة مباشرة إلى منفذ输出来توليد HTML

مثال

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

جرب بنفسك

لا تستخدموا document.write() بعد تحميل المستند document.write().سيقوم هذا بتعويض المستند بالكامل.

تغيير محتوى HTML

من أبسط الطرق لتغيير محتوى HTML هو استخدام innerHTML الصفات.

لتحرير محتوى عناصر HTML، استخدم هذا الجملة:

document.getElementById(id).innerHTML = text جديد

يعدل هذا المثال <p> محتوى العنصر:

مثال

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

جرب بنفسك

توضيح المثال:

  • يحتوي مستند HTML السابق على عنصر <p> له id="p1"
  • استخدمنا DOM HTML للحصول على العنصر الذي له id="p1"
  • يغير JavaScript محتوى العنصر (innerHTML) إلى "Hello Kitty!"

يعدل هذا المثال <h1> محتوى العنصر:

مثال

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

جرب بنفسك

توضيح المثال:

  • يحتوي HTML السابق على عنصر <h1> له id="header"
  • استخدمنا DOM HTML للحصول على العنصر الذي له id="header"
  • يغير JavaScript محتوى العنصر (innerHTML) هذا

تغيير قيمة الخاصية

لتحديد قيمة خاصية HTML، استخدم الجملة التالية:

document.getElementById(id).خاصية = القيمة الجديدة

يعدل هذا المثال <img> عنصر src قيمة الخاصية:

مثال

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

جرب بنفسك

توضيح المثال:

  • يحتوي المستند HTML المذكور أعلاه على عنصر <img> يحتوي على id="myImage"
  • نستخدم HTML DOM للحصول على العنصر الذي يحتوي على id="myImage"
  • يغير JavaScript خاصية src هذا العنصر من "smiley.gif" إلى "landscape.jpg"