Document Object Model หรือที่เรียกโดยย่อว่า DOM ในภาษาจีน:文档对象模型เป็น标准编程接口ที่แนะนำโดยองค์กร W3C สำหรับการประมวลผลภาษามาร์กอัปที่ขยายได้
DOM Tree หมายถึง解析หน้า HTML ผ่าน DOM และ生成树状结构HTML tree และ访问方法ที่สอดคล้องกัน ด้วยความช่วยเหลือของ DOM Tree เราสามารถดำเนินการแต่ละเนื้อหามาร์กอัปบนหน้า HTML ได้โดยตรงและ简易เช่นโค้ด HTML ต่อไปนี้
< html><หัว>
<title>เล่นกับโดม</title></head><body>
<p>ฉันเป็นโหนด dom</p>
<p>
<p>พีพี</p>
</p></body></html> ย่อลงในแผนผัง DOM ดังนี้: 
หลังจากทำความเข้าใจความรู้ข้างต้นแล้ว ต่อไปนี้เป็นการเรียนรู้เกี่ยวกับ API ผมจะอธิบายจากสี่ด้าน: วิธีรับ DOM, วิธีสร้างและเพิ่ม DOM, วิธีแก้ไข DOM และวิธี
ลบ
มี API มากมายที่จะได้รับ DOM แต่ทั้งหมดนั้นง่ายมาก
:
document.getElementById("id name"); ตัวอย่าง:
<body>
<p id="p">ฉันเป็นโหนด p</p>
<สคริปต์>
var p = document.getElementById("p");
console.log(พี);
</สคริปต์></ร่างกาย> 
เปิดคอนโซลแล้วคุณจะเห็นว่าคุณได้รับสำเร็จ
:
document.getElementsByTagName("tag name"); ตัวอย่าง:
<body>
<p>ฉันเป็นโหนด p</p>
<p>ฉันก็เป็นโหนด p เช่นกัน</p>
<สคริปต์>
var p = document.getElementsByTagName("p");
console.log(พี);
สำหรับ (ให้ i = 0; i < p.length; i++) {
console.log(p[i]);
-
</สคริปต์></ร่างกาย> 
หมายเหตุ : ใช้เมธอด getElementsByTagName() เพื่อส่งคืนคอลเล็กชันของอ็อบเจ็กต์ที่มีชื่อแท็กที่ระบุ เนื่องจากสิ่งที่ได้รับคือคอลเล็กชันของอ็อบเจ็กต์ เราจำเป็นต้องสำรวจหากเราต้องการดำเนินการองค์ประกอบภายใน หมายเหตุ: อ็อบเจ็กต์องค์ประกอบที่ได้รับโดยใช้สิ่งนี้ วิธีการเป็นแบบไดนามิกของ
:
document.getElementsByClassName("class name"); ตัวอย่าง:
<body>
<p class="p">ฉันเป็นโหนด p</p>
<p class="p">ฉันเป็นโหนด p</p>
<สคริปต์>
var p = document.getElementsByClassName("p");
console.log(พี);
สำหรับ (ให้ i = 0; i < p.length; i++) {
console.log(p[i]);
-
</สคริปต์></ร่างกาย> 
นี่ก็ง่ายมากเช่นกัน เพียงจำไว้ว่า
ไวยากรณ์
ผ่าน API ใหม่ HTML5:
document.querySelector("ดูตัวอย่างเพื่อดูรายละเอียด"); document.querySelectorAll
("ดูตัวอย่างเพื่อดูรายละเอียด");
<p class="p">ฉันเป็นโหนด p</p>
<p class="name">ดอกแพร์ บลอสซั่ม</p>
<p id="info">ข้อมูล</p>
<สคริปต์>
// รับ var ด้วยชื่อแท็ก p = document.querySelector("p");
// รับผ่านชื่อคลาส อย่าลืมเพิ่ม var qname = document.querySelector(".name");
// รับโดย id อย่าลืมใส่ #
ข้อมูล var = document.querySelector("#info");
// รับองค์ประกอบที่ตรงกันทั้งหมดและส่งกลับอาร์เรย์ var all = document.querySelectorAll("p");
console.log(พี);
console.log(qname);
console.log(ข้อมูล);
สำหรับ (ให้ i = 0; i < all.length; i++) {
console.log(ทั้งหมด[i]);
-
</สคริปต์></ร่างกาย> 
อย่างที่คุณเห็น การใช้ API ใหม่ของ HTML5 นั้นมีความยืดหยุ่นมาก ดังนั้นฉันจึงชอบใช้สิ่งนี้มากและแนะนำให้คุณใช้
นอกจากนี้ยังมีองค์ประกอบพิเศษบางอย่างที่มีวิธีการรับข้อมูลของตัวเอง เช่น ในฐานะเนื้อหา องค์ประกอบ html
:
document.body;
ตัวอย่าง:
<body>
<สคริปต์>
var body = document.body;
console.log(เนื้อหา);
</สคริปต์></ร่างกาย> 
อย่างที่คุณเห็น เนื้อหาทั้งหมดขององค์ประกอบร่างกายได้รับเรียบร้อยแล้ว
ไวยากรณ์
document.documentElement;
ตัวอย่าง:
<body>
<สคริปต์>
var html = document.documentElement;
console.log(html);
</สคริปต์></ร่างกาย> 
อย่างที่คุณเห็น html ของหน้าเว็บทั้งหมดได้รับแล้ว ตกลง การได้มาซึ่ง DOM สิ้นสุดลงแล้ว ตอนนี้เรามาเริ่มสร้างและเพิ่ม DOM กัน
กว่า การดำเนินการก็เหมือนกับการเล่นข้อมูล การเพิ่ม การลบ การแก้ไข และการสร้างและเพิ่มก็เท่ากับการเพิ่มข้อมูล เราต้องมีข้อมูลก่อนแล้วจึงเพิ่มเข้าไป การดำเนินการ DOM ขั้นแรก เราต้องสร้าง DOM แล้วบอกว่าจะเพิ่มมันไปที่ใด สุดท้ายนี้ เรามาเรียนรู้ด้านล่างเกี่ยวกับวิธีสร้าง dom และวิธีเพิ่ม dom
ไดนามิก อย่ากลัวเลย 555
Syntax:
document.createElement("Element Name"); ตัวอย่าง:
หากคุณต้องการสร้าง p แบบไดนามิก คุณสามารถเขียนสิ่งนี้ได้ เช่นเดียวกับสิ่งอื่นๆ ใช้การอนุมาน
var p = document.createElement("p"); เพิ่ม
ใช้ตามสถานการณ์ หนึ่งอยู่ในองค์ประกอบหลักผนวกที่ส่วนท้ายขององค์ประกอบลูกหนึ่งคือการต่อท้ายองค์ประกอบย่อยที่ระบุ
:
node.appendChild
child
);
<p>
<a href="">ไป่ตู้</a>
</p>
<สคริปต์>
var p = document.createElement("p");
p.innerText = "ฉันชื่อพี"
var p = document.querySelector("p");
p.ผนวกเด็ก(p);
</สคริปต์></ร่างกาย> 
สร้างแท็กย่อหน้าองค์ประกอบ p แบบไดนามิกและเขียนข้อความ "I am p" สุดท้าย รับองค์ประกอบ p และผนวก p เป็นวิธีการต่อท้ายของ p ข้างต้น
:
node.insertBefore(child, องค์ประกอบที่ระบุ);
ตัวอย่าง:
<body>
<p>
<a href="">ไป่ตู้</a>
<span>ฉันเป็นน้องชายของสแปน</span>
</p>
<สคริปต์>
var p = document.createElement("p");
p.innerText = "ฉันชื่อพี"
var p = document.querySelector("p");
var a = document.querySelector("a");
//สร้าง p ภายใต้ p ก่อนองค์ประกอบ p.insertBefore(p, a);
</สคริปต์></ร่างกาย> 
นี่คือจุดจบเหรอ? ใช่แล้ว คุณคิดอย่างไร? มันไม่ง่ายเลยเหรอ ง่าย ๆ ก็พอแล้ว ที่เหลือก็แค่ฝึกฝนเพิ่มเติม โอเค มาดูวิธีแก้ไข DOM กันดีกว่า
สรุปได้ดังนี้:
ตัวอย่างที่ 1: รับแท็ก p ของเพจและเปลี่ยนเนื้อหาเป็น "Zhou Qiluo"
<body>
<p>
<p></p>
</p>
<สคริปต์>
var p = document.querySelector("p");
p.innerText = "โจว ฉีลัว";
</script></body> ตัวอย่างที่ 2: คลิกปุ่มเพื่อสร้างไฮเปอร์ลิงก์ Baidu
<body>
<p>
<button onclick="createBaidu()">คลิกเพื่อสร้างไฮเปอร์ลิงก์ Baidu</button>
</p>
<สคริปต์>
ฟังก์ชั่น createBaidu() {
var p = document.querySelector("p");
var a = document.createElement("a");
a.href = "https://www.baidu.com";
a.innerText = "เพียงค้นหาไป่ตู้แล้วคุณจะรู้";
p.ผนวก(ก);
-
</สคริปต์></ร่างกาย> 
ตัวอย่างที่ 3: คลิกปุ่ม สีข้อความในแท็ก p เปลี่ยนเป็นสีเขียว และหัวสุนัข
<body>ถูกเปลี่ยนด้วยตนเอง
<p>
<button onclick="changeColor()">คลิกเพื่อเปลี่ยนเป็นสีเขียว</button>
<p>อีกสักครู่ฉันจะเปลี่ยนเป็นสีเขียว</p>
</p>
<สคริปต์>
ฟังก์ชั่นเปลี่ยนสี () {
var p = document.querySelector("p");
p.style.color = "สีเขียว";
-
</สคริปต์></ร่างกาย> 
วิธีการ node.removeChild() จะลบโหนดลูกออกจาก DOM และส่งคืนโหนดที่ถูกลบ
ไวยากรณ์:
node.removeChild(child);
Case:
<body>
<p>
<button onclick="removeP()">คลิกเพื่อลบ p</button>
<p>ฉันชื่อ p เวลาจะหมดในอีกสักครู่</p>
</p>
<สคริปต์>
ฟังก์ชั่น RemoveP() {
var p = document.querySelector("p");
var p = document.querySelector("p");
p.removeChild(พี);
-
</สคริปต์></ร่างกาย> 