บทช่วยสอน นำทาง HTML DOM ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้
HTML DOM รายการโหนด,ตัวอย่าง,HTML DOM Node รายการยาว,ตัวอย่าง,นำร่องสัมพันธ์โหนด,ตัวอย่าง,โหนดราก DOM,ตัวอย่าง,childNodes และ nodeValue,ตัวอย่าง,
นำทาง HTML DOM
ผ่าน DOM HTML คุณสามารถที่จะใช้โหนดในความสัมพันธ์ต้นไม้โหนดลูกศร
HTML DOM รายการโหนด
getElementsByTagName () วิธีการกลับรายการของโหนด รายการโหนดเป็นอาร์เรย์โหนด
รหัสต่อไปนี้เอกสารที่เลือกทั้งหมด <p> โหนด:
ตัวอย่าง
var
x=document.getElementsByTagName("p");
มันสามารถเข้าถึงได้โดยป้ายถัดไป ในการเข้าถึงที่สอง <p> คุณสามารถเขียน:
y=x[1];
ลอง» หมายเหตุ:
ภายใต้ฉลากเริ่มต้นที่ 0
HTML DOM Node รายการยาว
แอตทริบิวต์ระยะเวลาที่กำหนดจำนวนโหนดในรายการโหนด
คุณสามารถใช้คุณสมบัติความยาวห่วงรายการโหนด:
ตัวอย่าง
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
ลอง» ตัวอย่างการวิเคราะห์:
- รับทั้งหมด <p> โหนดองค์ประกอบ
- มูลค่าส่งออกของแต่ละองค์ประกอบ <p> ของโหนดข้อความ
นำร่องสัมพันธ์โหนด
คุณสามารถใช้สามคุณลักษณะโหนด: parentNode, firstChild และ lastChild นำทางผ่านโครงสร้างเอกสาร
พิจารณาส่วน HTML ต่อไปนี้:
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>
</body>
</html>
- ครั้งแรก <p> องค์ประกอบที่เป็นลูกคนแรกของ <body> องค์ประกอบ (firstChild)
- <div> เป็นองค์ประกอบของเด็กที่ผ่านมา <body> องค์ประกอบ (lastChild)
- <body> องค์ประกอบเป็นครั้งแรก <p> องค์ประกอบและ <div> ของโหนดแม่ (parentNode)
คุณสมบัติ firstChild สามารถนำมาใช้ในการเข้าถึงองค์ประกอบของข้อความ:
ตัวอย่าง
<html>
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
ลอง»
โหนดราก DOM
มีสองคุณลักษณะพิเศษที่คุณสามารถเข้าถึงทั้งหมดของเอกสาร:
- document.documentElement - เอกสารทั้งหมด
- document.body - เนื้อหาของเอกสาร
ตัวอย่าง
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
ลอง»
childNodes และ nodeValue
นอกเหนือไปจากคุณสมบัติ InnerHTML คุณยังสามารถใช้ childNodes และทรัพย์สิน nodeValue จะได้รับเนื้อหาขององค์ประกอบ
รหัสต่อไปนี้ได้รับการ ID = "บทนำ" การ <p> ค่าองค์ประกอบ:
ตัวอย่าง
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
ลอง» ในตัวอย่างข้างต้น getElementById เป็นวิธีการในขณะที่ childNodes และ nodeValue มีคุณสมบัติ
ในการกวดวิชานี้เราจะใช้คุณสมบัติ InnerHTML อย่างไรก็ตามวิธีการเรียนรู้ดังกล่าวข้างต้นจะช่วยนำทางโครงสร้างต้นไม้ DOM และความเข้าใจ