JavaScript HTML DOM องค์ประกอบ
สร้างองค์ประกอบ HTML ใหม่
สร้างองค์ประกอบ HTML ใหม่
เพื่อเพิ่มองค์ประกอบใหม่ใน DOM HTML คุณต้องสร้างองค์ประกอบ (โหนดองค์ประกอบ) แล้วผนวกองค์ประกอบที่จะเป็นองค์ประกอบที่มีอยู่ตัวอย่าง
<p id = "P1"> นี้เป็นวรรค </ p>
<p id = "P2"> นี้เป็นวรรคอื่น </ p>
</ div>
<script>
var Para = document.createElement ( "P");
โหนด var = document.createTextNode ( "นี่คือย่อหน้าใหม่.");
para.appendChild (โหนด);
องค์ประกอบ var = document.getElementById ( "div1");
element.appendChild (Para);
</ script>
ลอง»
ตัวอย่างของการวิเคราะห์:
รหัสนี้สร้าง <p> องค์ประกอบใหม่:
เพื่อเพิ่มข้อความที่ <p> องค์ประกอบคุณต้องสร้างโหนดข้อความ รหัสนี้สร้างโหนดข้อความ:
แล้วคุณจะต้องเพิ่มโหนดข้อความนี้ไปยัง <p> องค์ประกอบ:
สุดท้ายคุณก็ต้องเพิ่มองค์ประกอบใหม่นี้จะเป็นองค์ประกอบที่มีอยู่
รหัสเพื่อหาองค์ประกอบที่มีอยู่:
รหัสต่อไปนี้หลังจากองค์ประกอบที่มีอยู่เพิ่มองค์ประกอบใหม่:
ลบองค์ประกอบ HTML ที่มีอยู่
รหัสต่อไปนี้แสดงให้เห็นถึงวิธีการลบองค์ประกอบ:
ตัวอย่าง
<p id = "P1"> นี้เป็นวรรค </ p>
<p id = "P2"> นี้เป็นวรรคอื่น </ p>
</ div>
<script>
var ปกครอง = document.getElementById ( "div1");
เด็ก var = document.getElementById ( "P1");
parent.removeChild (เด็ก);
</ script>
ลอง»
ตัวอย่างของการวิเคราะห์
เอกสาร HTML มีโหนดลูกมีสอง (สอง <p> องค์ประกอบ) ของ <div>:
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
ค้นหา id = "div1" องค์ประกอบ:
ค้นหา id = "P1 ว่า" <p> องค์ประกอบ:
ลบออกจากองค์ประกอบหลักองค์ประกอบย่อย:
 | หากคุณสามารถลบองค์ประกอบโดยไม่ต้องมีการอ้างอิงถึงองค์ประกอบหลักก็จะดี แต่น่าเสียดาย องค์ประกอบ DOM ที่คุณจำเป็นต้องรู้ที่จะถูกลบเช่นเดียวกับองค์ประกอบหลักของมัน |
|---|
นี่คือวิธีการแก้ปัญหาที่พบบ่อย: หาองค์ประกอบของเด็กที่คุณต้องการลบและจากนั้นใช้คุณสมบัติของมันที่จะหาองค์ประกอบหลัก parentNode:
child.parentNode.removeChild(child);
HTML DOM กวดวิชา
ในส่วนที่เป็น HTML DOM ของการกวดวิชา JavaScript ของเราคุณได้เรียนรู้:
- วิธีการเปลี่ยนเนื้อหาขององค์ประกอบ HTML ที่ (innerHTML)
- วิธีการเปลี่ยนรูปแบบขององค์ประกอบของ HTML (CSS)
- วิธีการตอบสนองต่อเหตุการณ์ที่เกิดขึ้นใน DOM แบบ HTML
- ฉันจะเพิ่มหรือลบองค์ประกอบ HTML
ถ้าคุณต้องการที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการใช้งาน JavaScript เพื่อเข้าถึงความรู้ HTML DOM กรุณาเยี่ยมชมของเราสมบูรณ์ กวดวิชา HTML DOM