การปรับเปลี่ยน HTML DOM
แก้ไข HTML = องค์ประกอบการเปลี่ยนแปลงลักษณะรูปแบบและเหตุการณ์ที่เกิดขึ้น
องค์ประกอบแก้ไข HTML
แก้ไข HTML DOM หมายถึงแง่มุมที่แตกต่างกัน:
- เปลี่ยนเนื้อหาของ HTML
- รูปแบบการเปลี่ยน CSS
- เปลี่ยนแอตทริบิวต์แบบ HTML
- สร้างองค์ประกอบ HTML ใหม่
- ลบองค์ประกอบ HTML ที่มีอยู่
- เหตุการณ์การเปลี่ยนแปลง (Handler)
ในส่วนต่อไปนี้เราจะศึกษาในเชิงลึก DOM HTML ในการปรับเปลี่ยนวิธีการทั่วไป
สร้างเนื้อหา HTML
วิธีที่ง่ายที่สุดในการเปลี่ยนแปลงเนื้อหาขององค์ประกอบคือการใช้คุณสมบัติ InnerHTML
ตัวอย่างต่อไปนี้การเปลี่ยนแปลงเนื้อหาของ HTML <p> องค์ประกอบ:
ตัวอย่าง
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
ลอง»
 | เราจะอธิบายให้คุณดูรายละเอียดของตัวอย่างในส่วนต่อไปนี้ |
|---|
รูปแบบการเปลี่ยนแปลง HTML
ผ่าน DOM HTML คุณสามารถเข้าถึงองค์ประกอบ HTML รูปแบบวัตถุ
ตัวอย่างต่อไปนี้จะเปลี่ยนรูปแบบวรรค HTML:
ตัวอย่าง
<html>
<body>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
ลอง»
สร้างองค์ประกอบ HTML ใหม่
เพื่อเพิ่มองค์ประกอบใหม่ใน DOM HTML คุณต้องสร้างองค์ประกอบ (โหนดองค์ประกอบ) แล้วผนวกกับองค์ประกอบที่มีอยู่
ตัวอย่าง
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
ลอง»