เนื้อหา HTML DOM แก้ไข HTML
ผ่าน DOM HTML, JavaScript สามารถเข้าถึงเอกสาร HTML สำหรับแต่ละองค์ประกอบ
เปลี่ยนเนื้อหาของ HTML
วิธีที่ง่ายที่สุดในการเปลี่ยนแปลงเนื้อหาขององค์ประกอบคือการใช้คุณสมบัติ InnerHTML
ตัวอย่างต่อไปนี้การเปลี่ยนแปลงองค์ประกอบ <p> ในเนื้อหา HTML:
ตัวอย่าง
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
ลอง»
รูปแบบการเปลี่ยนแปลง HTML
ผ่าน DOM HTML คุณสามารถเข้าถึงวัตถุวัตถุรูปแบบของ HTML
ตัวอย่างต่อไปนี้มีการเปลี่ยนแปลงรูปแบบ HTML วรรคนี้:
ตัวอย่าง
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
ลอง»
ใช้เหตุการณ์
HTML DOM ช่วยให้คุณสามารถรันโค้ดเมื่อมีเหตุการณ์เกิดขึ้น
เมื่อองค์ประกอบ HTML "บางสิ่งบางอย่างที่เกิดขึ้น" เบราว์เซอร์จะสร้างกิจกรรม:
- คลิกที่องค์ประกอบ
- การโหลดหน้าเว็บ
- เปลี่ยนช่องใส่
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับเหตุการณ์ในบทต่อไป
สองตัวอย่างต่อไปจะเปลี่ยนสีพื้นหลัง <body> องค์ประกอบในการคลิกปุ่ม:
ตัวอย่าง
<body>
<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />
</body>
</html>
ลอง»
ในกรณีนี้ฟังก์ชั่นดำเนินรหัสเดียวกัน:
ตัวอย่าง
<body>
<script>
function ChangeBackground()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()"
value="Change background color" />
</body>
</html>
ลอง»
ตัวอย่างต่อไปนี้การเปลี่ยนแปลงข้อความ <p> องค์ประกอบในการคลิกปุ่ม:
ตัวอย่าง
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="New text!";
}
</script>
<input type="button" onclick="ChangeText()" value="Change text">
</body>
</html>
ลอง»