Latest web development tutorials

นำทาง 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 และความเข้าใจ