ในหน้าเว็บของเรา นอกเหนือจากการใช้วิธีการที่ DOM จัดเตรียมไว้เพื่อรับโหนดแล้ว เรายังสามารถใช้ความสัมพันธ์แบบลำดับชั้นของโหนดเพื่อรับโหนดได้อีกด้วย เรามาสรุปกันในวันนี้เลย!
เนื้อหาทั้งหมดในเว็บเพจคือโหนด (ป้ายกำกับ คุณลักษณะ ข้อความ ความคิดเห็น ฯลฯ) และใน DOM โหนดจะแสดงด้วยโหนด
โหนดทั้งหมดในแผนผัง HTML DOM สามารถเข้าถึงได้ผ่าน JavaScript และองค์ประกอบ HTML ทั้งหมด (โหนด) สามารถแก้ไข สร้าง หรือลบได้ 
โดยทั่วไปโหนดจะมีแอตทริบิวต์พื้นฐานอย่างน้อยสามประการ: nodeType (ประเภทโหนด), nodeName (ชื่อโหนด) และ nodeValue (ค่าโหนด)
ในการพัฒนาจริงของเรา การทำงานของโหนดจะทำงานบนโหนดองค์ประกอบเป็นหลัก
ใช้แผนผัง DOM เพื่อแบ่งโหนดออกเป็นความสัมพันธ์แบบลำดับชั้นต่างๆ ความสัมพันธ์ที่พบบ่อยที่สุดคือความสัมพันธ์แบบลำดับชั้นระหว่างพ่อแม่และลูก
node.parentNode
<p class="ผู้ปกครอง">
<p class="ลูกชาย"></p>
</p>
<สคริปต์>
var son = document.querySelector(".son");
console.log(son.parentNode);
</สคริปต์> 
1.node.childNodes (มาตรฐาน)
node.childNodes ส่งคืนคอลเลกชันที่มีโหนดย่อยของโหนดที่ระบุ คอลเลกชันนี้เป็นคอลเลกชันที่อัปเดตทันที
<ul>
<li>ฉันคือ ลี่</li>
<li>ฉันคือ ลี่</li>
<li>ฉันคือ ลี่</li>
<li>ฉันคือ ลี่</li>
</ul>
<สคริปต์>
var ul = document.querySelector('ul');
//โหนดย่อย childNodes โหนดย่อยทั้งหมด รวมถึงโหนดองค์ประกอบ โหนดข้อความ ฯลฯ
console.log(ul.childNodes);
</สคริปต์> 
เหตุใดจึงมีโหนดข้อความห้ารายการที่นี่ จริง ๆ แล้วพวกมันสอดคล้องกับตัวแบ่งบรรทัดห้าบรรทัด 
การแบ่งบรรทัดทั้งห้านี้เป็นโหนดข้อความ บวกกับโหนดองค์ประกอบ li สี่โหนด รวมเป็น 9
หมายเหตุ: ค่าที่ส่งคืนประกอบด้วยโหนดย่อยทั้งหมด รวมถึงโหนดองค์ประกอบ โหนดข้อความ ฯลฯ
หากคุณต้องการเพียงให้โหนดองค์ประกอบอยู่ข้างใน คุณจะต้องจัดการมันเป็นพิเศษ ดังนั้นโดยทั่วไปเราไม่สนับสนุนการใช้ childNodes
var ul = document.querySelector('ul');
สำหรับ (var i = 0;i<ul.length;i++){
ถ้า (ul.childNodes[i].nodeType == 1){
console.log(ul.childNodes[i]);
-
} 2.node.children (ไม่ได้มาตรฐาน)
node.children เป็นคุณสมบัติแบบอ่านอย่างเดียวที่ส่งคืนโหนดองค์ประกอบลูกทั้งหมด มันจะส่งคืนโหนดองค์ประกอบลูกเท่านั้น และโหนดอื่นจะไม่ถูกส่งคืน (นี่คือสิ่งที่เรามุ่งเน้น)
แม้ว่าเด็ก ๆ จะไม่ได้มาตรฐาน แต่ก็มีเบราว์เซอร์ต่าง ๆ รองรับดังนั้นเราจึงสามารถใช้งานได้อย่างมั่นใจ
<ul>
<li>ฉันคือ ลี่</li>
<li>ฉันคือ ลี่</li>
<li>ฉันคือ ลี่</li>
<li>ฉันคือ ลี่</li>
</ul>
<สคริปต์>
var ul = document.querySelector('ul');
console.log(ul.children);
</สคริปต์> 
1.node
2.node.lastChild
firstChild ส่งคืนโหนดลูกแรก หากไม่พบมันจะส่งคืน null เช่นเดียวกับ LastChild ในทำนองเดียวกันจะรวมโหนดทั้งหมดไว้ด้วย
3.node.firstElementChild
firstElementChild ส่งคืนโหนดองค์ประกอบลูกแรก หรือเป็นโมฆะหากไม่พบ
4.node.lastElementChild
LastElementChild ส่งคืนโหนดองค์ประกอบลูกสุดท้าย หรือเป็นโมฆะหากไม่พบ
หมายเหตุ: ทั้งสองวิธีนี้มีปัญหาความเข้ากันได้และรองรับเฉพาะ IE9 ขึ้นไปเท่านั้น
5.node.children[0]
5.node.children[node.children.length - 1]
หมายเหตุ: ไม่มีปัญหาความเข้ากันได้กับวิธีการเขียนเพื่อการพัฒนาจริง
<ul>
<li>ฉันคือ ลี่</li>
<li>ฉันคือ ลี่</li>
<li>ฉันคือ ลี่</li>
<li>ฉันคือ ลี่</li>
</ul>
<สคริปต์>
var ul = document.querySelector('ul');
// 1. ไม่ว่าจะเป็นโหนดข้อความหรือโหนดองค์ประกอบ console.log(ul.firstChild);
console.log(ul.lastChild);
// 2. ส่งคืนโหนดองค์ประกอบตนเองที่สอดคล้องกัน เฉพาะ IE9 และสูงกว่าเท่านั้นที่รองรับ console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
// 3. ไม่มีปัญหาความเข้ากันได้ console.log(ul.children[0]);
console.log(ul.children[ul.children.length - 1]);
</สคริปต์> 
1.โหนดถัดไปพี่น้อง
nextSibling ส่งคืนโหนดพี่น้องถัดไปขององค์ประกอบปัจจุบัน หรือเป็นโมฆะหากไม่พบ ในทำนองเดียวกันจะรวมโหนดทั้งหมดไว้ด้วย
2.node. ก่อนหน้าพี่น้อง
PreviousSibling ส่งคืนโหนดพี่น้องก่อนหน้าขององค์ประกอบปัจจุบัน หรือเป็นโมฆะหากไม่พบ ในทำนองเดียวกันจะรวมโหนดทั้งหมดไว้ด้วย
3.node.nextElementพี่น้อง
nextElementSibling ส่งคืนโหนดองค์ประกอบพี่น้องถัดไปขององค์ประกอบปัจจุบัน หากไม่พบ จะส่งคืน null
4.node. PreviousElementพี่น้อง
PreviousElementSibling ส่งคืนโหนดองค์ประกอบพี่น้องก่อนหน้าขององค์ประกอบปัจจุบัน หรือเป็นโมฆะหากไม่พบ
หมายเหตุ: ทั้งสองวิธีนี้มีปัญหาความเข้ากันได้และรองรับเฉพาะ IE9 ขึ้นไปเท่านั้น
ดังนั้นจะสรุปฟังก์ชันที่ตรงตามความเข้ากันได้และสามารถค้นหาโหนดองค์ประกอบพี่น้องได้อย่างไร
ฟังก์ชัน getNextElementSibling(element){
var el = องค์ประกอบ;
ในขณะที่ (el = el.nextSibling){
ถ้า (el.nodeType == 1) {
กลับเอล;
-
-
กลับเป็นโมฆะ;
} โค้ดที่ห่อหุ้มข้างต้นสามารถแก้ไขได้ แต่คุณไม่จำเป็นต้องคิดมากเกินไป เนื่องจากเบราว์เซอร์ IE กำลังจะหยุดให้บริการ ดังนั้นคุณเพียงแค่ต้องจำโหนด nextElementSibling และคุณไม่จำเป็นต้องกังวลเกี่ยวกับความเข้ากันได้ ปัญหา.
document.createElement (' tagName ')
วิธีการ document.createElenent () สร้างองค์ประกอบ Н TML ที่ระบุโดย tagName เนื่องจากองค์ประกอบเหล่านี้ไม่มีอยู่แต่เดิมและถูกสร้างขึ้นแบบไดนามิกตามความต้องการของฉัน เราจึงถูกเรียกว่า การสร้างโหนดองค์ประกอบแบบไดนามิก
1.node.appendChild(child)
วิธีการ node.appendChild () เพิ่มโหนดที่ส่วนท้ายของรายการโหนดลูกของโหนดหลักที่ระบุ คล้ายกับองค์ประกอบหลอกหลังใน CSS
2.node.insertBefore(ลูก องค์ประกอบที่ระบุ)
<ul></ul>
<สคริปต์>
var ul = document.querySelector("ul");
var li =document.createElement("li");
var span = document.createElement("ช่วง")
ul.ผนวกเด็ก(li);
ul.insertBefore(ช่วง,ul.children[0]);
</สคริปต์> 
node.removeChild(child)
วิธีการ node.removeChild(child) จะลบโหนดลูกออกจาก DOM และส่งคืนโหนดที่ถูกลบ
<ul>
<li>อานิว</li>
<li>แต่งงาน</li>
<li>ทอม</li>
</ul>
<สคริปต์>
var ul = document.querySelector("ul");
ul.removeChild(ul.เด็ก[2]);
</สคริปต์> 
node.cloneNode ()
วิธีการ node.cloneNode () ส่งกลับสำเนาของโหนดที่เรียกว่าวิธีนี้ เรียกอีกอย่างว่าโหนดโคลน/โหนดคัดลอก
1. หากพารามิเตอร์วงเล็บว่างเปล่าหรือเป็นเท็จ จะเป็นสำเนาแบบตื้น กล่าวคือ เฉพาะโหนดเท่านั้นที่ถูกโคลน และโหนดย่อยภายในจะไม่ถูกโคลน
2. หากพารามิเตอร์วงเล็บเป็นจริง จะเป็นสำเนาเชิงลึก ซึ่งจะคัดลอกโหนดเองและโหนดย่อยทั้งหมด
<ul>
<li>อานิว</li>
<li>แต่งงาน</li>
<li>ทอม</li>
</ul>
<สคริปต์>
var ul = document.querySelector("ul");
var li1 = ul.children[0].cloneNode(); // คัดลอกแบบตื้น var li2 = ul.children[0].cloneNode(true); // คัดลอกแบบลึก ul.appendChild(li1);
ul.ผนวกเด็ก(li2);
</สคริปต์> 