JavaScript HTML DOM 导航

ด้วย HTML DOM คุณสามารถใช้ความสัมพันธ์โครงสร้างเพื่อเดินทางในต้นโครงสร้าง

ตัวเลขจุดโดเมน

ตามมาตราฐาน W3C HTML DOM ทุกสิ่งในเอกสาร HTML คือโครงสร้าง:

  • ทั้งหมดของเอกสารคือโครงสร้างเอกสาร
  • แต่ละองค์ประกอบ HTML คือโครงสร้างองค์ประกอบ
  • ข้อความด้านใน HTML อิเล็กทรอนิกส์คือโครงสร้างข้อความ
  • แต่ละคุณสมบัติ HTML คือโครงสร้างคุณสมบัติ
  • ทุกหมายเหตุเป็นโครงสร้างหมายเหตุ
ต้น DOM HTML

ด้วย HTML DOM ทุกโครงสร้างในต้นโครงสร้างของโครงสร้างสามารถเข้าถึงด้วย JavaScript

สามารถสร้างโครงสร้างใหม่ และแก้ไข และลบโครงสร้างทั้งหมด

ความสัมพันธ์โครงสร้าง

โครงสร้างในต้นโครงสร้างมีความสัมพันธ์ระดับที่เฉพาะ

  • วลี (พ่อ และลูก และพี่น้อง หรือ parent และ child และ sibling) ใช้เพื่ออธิบายความสัมพันธ์เหล่านี้
  • ในต้นโครงสร้างโครงสร้างที่สูงสุดเรียกว่าเป็นราก (จุดเริ่มต้นเรียกว่าจุดเริ่มต้น)
  • แต่ละโครงสร้างมีโครงสร้างพ่อเจ้าหน้าที่หนึ่ง ยกเว้นจุดเริ่มต้น (จุดเริ่มต้นไม่มีโครงสร้างพ่อ)
  • โครงสร้างสามารถมีจำนวนลูกที่เหมาะสม
  • พี่น้อง (พี่และน้อง) คือโครงสร้างที่มีพ่อเดียวกัน
<html>
   <head>
       <title>หลักสูตร DOM</title>
   </head>
  <body>
       <h1>หลักสูตร DOM ครั้งแรก</h1>
       <p>Hello world!</p>
   </body>
</html>
ต้น DOM HTML

จาก HTML ที่กล่าวข้างต้นคุณสามารถอ่านข้อมูลต่อไปนี้

  • html คือจุดเริ่มต้น
  • html ไม่มีพ่อ
  • html คือ พ่อของ head และ body
  • head คือ ลูกหลักของ html
  • <body> คือเดี่ยวที่สุดของ <html>

พร้อมด้วย:

  • <head> มีเดี่ยวมากเดียว: <title>
  • <title> มีเดี่ยวมากเดียว (ต้นโครงเงาข้อความ): "DOM ตำรา"
  • <body> มีเดี่ยวมากสอง: <h1> และ <p>
  • <h1> มีเดี่ยวมากเดียว: "DOM บทที่ 1"
  • <p> มีเดี่ยวมากเดียว: "Hello world!"
  • <h1> และ <p> คือพี่น้อง

การเดินทางระหว่างต้นโครงเงา

ด้วย JavaScript คุณสามารถใช้นามสกุลของต้นโครงเงาต่อไปนี้เพื่อเดินทางระหว่างต้นโครงเงา:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

โครงเงาเดี่ยวและค่าโครงเงา

ข้อผิดพลาดที่เกิดขึ้นบ่อยในการจัดการ DOM คือเชื่อว่าองค์ประกอบมีข้อความภายใน

ตัวอย่าง:

<title id="demo">DOM ตำรา</title>

（ในตัวอย่างด้านบน）ต้นโครงเงาองค์ประกอบ <title> ไม่มีข้อความ.

มันมีข้อความที่ "DOM ตำรา"ต้นโครงเงาข้อความ.

ค่าของต้นโครงเงาของข้อความนั้นสามารถผ่านเมืองเมาะของต้นโครงเงาได้ innerHTML ด้วยนามสกุลของแบบภาพต่างๆ สามารถเข้าถึงขององค์ประกอบ:

var myTitle = document.getElementById("demo").innerHTML;

การเข้าถึงทางยัง innerHTML มีความหมายเดียวกับการเข้าถึงเมืองเมาะของต้นโครงเงาแรก nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

ยังสามารถเข้าถึงเมืองเมาะของต้นโครงเงาแรกได้:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

สามตัวอย่างด้านล่างนี้นำมา <h1> องค์ประกอบของแถวข้อความและคัดลอกเข้ามา <p> ภายในองค์ประกอบ:

ตัวอย่าง 1

<html>
<body>
<h1 id="id01">ของฉันหน้าแรก</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

<html>
<body>
<h1 id="id01">ของฉันหน้าแรก</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

ทดลองด้วยตัวเอง

ตัวอย่าง 3

<html>
<body>
<h1 id="id01">ของฉันหน้าแรก</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

ทดลองด้วยตัวเอง

InnerHTML

ในบทความนี้ เราใช้ innerHTML เอาเนื้อหาขององค์ประกอบ HTML มา

อย่างไรก็ตาม การเรียนรู้วิธีอื่นๆ ช่วยให้เข้าใจโครงสร้างต้นไม้และการเดินทางของ DOM

รากของ DOM

มีอัตราแบบพิเศษสองอัตราแบบที่อนุญาตให้เข้าถึงข้อมูลเอกสารทั้งหมด：

  • document.body - body ของเอกสาร
  • document.documentElement - ข้อมูลเอกสารทั้งหมด

ตัวอย่าง

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM มีประโยชน์มาก!</p>
<p>ตัวอย่างนี้แสดงถึงอัตราแบบ <b>document.body</b>。</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

ทดลองด้วยตัวเอง

ตัวอย่าง

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM มีประโยชน์มาก!</p>
<p>ตัวอย่างนี้แสดงถึงอัตราแบบ <b>document.documentElement</b>。</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

ทดลองด้วยตัวเอง

อัตราแบบ nodeName

nodeName อัตราแบบ กำหนดชื่อของตัวองค์ประกอบ

  • nodeName ไม่สามารถเข้าถึงได้
  • nodeName ของตัวองค์ประกอบเท่ากับชื่อแบบหลัก
  • nodeName ของตัวองค์ประกอบประกาศคุณสมบัติคือชื่อประกาศคุณสมบัติ
  • nodeName ของตัวองค์ประกอบข้อความมักจะเป็น #text
  • nodeName ของตัวองค์ประกอบเอกสารมักจะเป็น #document

ตัวอย่าง

<h1 id="id01">มาแรกของฉัน</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

ทดลองด้วยตัวเอง

หมายเหตุ：nodeName มักจะมีชื่อแบบหลักขององค์ประกอบ HTML

อัตราแบบ nodeValue

nodeValue อัตราแบบ กำหนดค่าของตัวองค์ประกอบ

  • อัตราแบบ nodeValue ของตัวองค์ประกอบขององค์ประกอบตัวองค์ประกอบคือ undefined
  • อัตราแบบ nodeValue ของตัวองค์ประกอบของข้อความคือข้อความของข้อความ
  • อัตราแบบ nodeValue ของตัวองค์ประกอบของประกาศคุณสมบัติคือค่าประกาศคุณสมบัติ

อัตราแบบ nodeType

nodeType อัตราแบบ nodeType กลับค่าประเภทของตัวองค์ประกอบnodeType เป็นแค่การอ่านเท่านั้น。

ตัวอย่าง

<h1 id="id01">มาแรกของฉัน</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

ทดลองด้วยตัวเอง

นิยามตัวเลข nodeType ที่สำคัญที่สุดคือ:

ตัวเลข ประเภท ตัวอย่าง
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (ถูกละเลย)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- นี่คือหมายเหตุ -->
DOCUMENT_NODE 9 เอกสาร HTML ตัวเอง (พ่อของ <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Type 2 ถูกละเลยใน HTML DOM แต่ยังไม่ถูกละเลยใน XML DOM