JavaScript ฮ์ต์เท็ล โดเมน - แก้ไข ฮ์ต์เท็ล

HTML DOM อนุญาตให้ JavaScript แก้ไขเนื้อหาของอิเลเมนต์ HTML

เปลี่ยนสายออกทาง HTML

JavaScript สามารถสร้างเนื้อหา HTML ที่เปลี่ยนแปลงได้

ใน JavaScript นั้น，document.write() สามารถใช้เขียนตรงไปยังสายออกทาง HTML โดยตรงได้

ตัวอย่าง

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

ลองทดลองเอง

ไม่ควรใช้ 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"
  • เราใช้ HTML DOM ที่ได้รับอิเลเมนต์ 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"
  • เราใช้ HTML DOM ที่ได้รับอิเลเมนต์ id="header"
  • JavaScript แปลงเนื้อหาขององค์ประกอบ (innerHTML) นี้

เปลี่ยนค่าอาทิตย์

ถ้าต้องการเปลี่ยนค่าของอาทิตย์ HTML ให้ใช้สัญญาณดังนี้:

document.getElementById(id).attribute = ค่าใหม่

ตัวอย่างนี้เปลี่ยน <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 แปลงค่าทางภาพขององค์ประกอบนี้จาก "smiley.gif" ไปเป็น "landscape.jpg"