การนำทาง JavaScript DOM

สารบัญ

    แสดงสารบัญ

ด้วย HTML DOM คุณสามารถนำทางแผนผังโหนดโดยใช้โหนด ความสัมพันธ์

โหนด DOM

ตามมาตรฐาน W3C HTML DOM ทุกอย่างในเอกสาร HTML จะเป็นโหนด:

  • เอกสารทั้งหมดเป็นโหนดเอกสาร

  • องค์ประกอบ HTML ทุกรายการเป็นโหนดองค์ประกอบ

  • ข้อความภายในองค์ประกอบ HTML คือโหนดข้อความ

  • ทุกแอตทริบิวต์ HTML เป็นโหนดแอตทริบิวต์ (เลิกใช้แล้ว)

  • ความคิดเห็นทั้งหมดเป็นโหนดความคิดเห็น

ด้วย HTML DOM โหนดทั้งหมดในแผนผังโหนดสามารถเข้าถึงได้โดย JavaScript

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

ความสัมพันธ์ของโหนด

โหนดในแผนผังโหนดมีความสัมพันธ์แบบลำดับชั้นซึ่งกันและกัน

คำว่าพ่อแม่ ลูก และพี่น้องใช้เพื่ออธิบายความสัมพันธ์

  • ในแผนผังโหนด โหนดบนสุดเรียกว่ารูท (หรือโหนดรูท)

  • ทุกโหนดมีพาเรนต์เดียวเท่านั้น ยกเว้นรูท (ซึ่งไม่มีพาเรนต์)

  • โหนดสามารถมีลูกได้จำนวนหนึ่ง

  • พี่น้อง (พี่น้อง) เป็นโหนดที่มีผู้ปกครองคนเดียวกัน

<html>

       <head>
          <title>DOM Tutorial</title>
       </head>
	<body>
          <h1>DOM Lesson one</h1>
          <p>Hello world!</p>
       </body>
     
</html>

จาก HTML ด้านบนคุณสามารถอ่านได้:

  • <html> เป็นโหนดรูท

  • <html> ไม่มีพาเรนต์

  • <html> เป็นพาเรนต์ของ <head> และ < ร่างกาย>

  • <head> เป็นลูกแรกของ <html>

  • <body> เป็นลูกสุดท้ายของ <html>

และ :

  • <head> มีลูกหนึ่งคน: <title>

  • <title> มีหนึ่งลูก (โหนดข้อความ): "DOM Tutorial"

  • <body> มีสองลูก: <h1> และ <

  • <h1> มีลูกหนึ่งคน: "DOM บทเรียนที่หนึ่ง"

  • <p> มีลูกหนึ่งคน: "Hello world!"

  • <h1> และ <p> เป็นพี่น้องกัน

การนำทางระหว่างโหนด

คุณสามารถใช้คุณสมบัติโหนดต่อไปนี้เพื่อนำทางระหว่างโหนดด้วย จาวาสคริปต์:

  • <รหัส class="w3-codespan">parentNode

  • <รหัส class="w3-codespan">childNodes[nodenumber]

  • <รหัส class="w3-codespan">firstChild

  • <รหัส class="w3-codespan">lastChild

  • nextSibling

  • previousSibling

โหนดย่อยและค่าโหนด

ข้อผิดพลาดทั่วไปในการประมวลผล DOM คือการคาดหวังว่าโหนดองค์ประกอบจะมีข้อความ

ตัวอย่าง :

<title 
 id="demo">DOM Tutorial</title>

โหนดองค์ประกอบ <title> (ในตัวอย่างด้านบน) ไม่มี มีข้อความ

ประกอบด้วยโหนดข้อความที่มีค่า "DOM Tutorial"

ค่าของโหนดข้อความสามารถเข้าถึงได้โดยคุณสมบัติ innerHTML ของโหนด:

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

การเข้าถึงคุณสมบัติ innerHTML เหมือนกับการเข้าถึง nodeValue ของลูกคนแรก:

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

การเข้าถึงลูกคนแรกสามารถทำได้ดังนี้:

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

ตัวอย่างต่อไปนี้ทั้งหมด (3) ดึงข้อความขององค์ประกอบ <h1> และคัดลอก ลงในองค์ประกอบ <p>:

ตัวอย่าง

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
 document.getElementById("id02").innerHTML 
 = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>

ตัวอย่าง

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>

ตัวอย่าง

<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

ภายในHTML

ในบทช่วยสอนนี้ เราใช้คุณสมบัติ innerHTML เพื่อดึงเนื้อหาของ องค์ประกอบ HTML

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

โหนดราก DOM

มีคุณสมบัติพิเศษสองประการที่อนุญาตให้เข้าถึงเอกสารฉบับเต็มได้:

  • document.body - เนื้อความของเอกสาร

  • document.documentElement - เอกสารฉบับเต็ม

ตัวอย่าง

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p 
id="demo"></p>
<script>
document.getElementById("demo").innerHTML 
= document.body.innerHTML;
</script>

</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

ตัวอย่าง

<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
document.documentElement.innerHTML;
</script>

</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

คุณสมบัติ nodeName

คุณสมบัติ nodeName ระบุชื่อของโหนด

  • nodeName เป็นแบบอ่านอย่างเดียว

  • nodeName ของโหนดองค์ประกอบจะเหมือนกับชื่อแท็ก

  • nodeName ของโหนดแอตทริบิวต์คือชื่อแอตทริบิวต์

  • nodeName ของโหนดข้อความจะเป็น #text เสมอ

  • nodeName ของโหนดเอกสารจะเป็น #document เสมอ

ตัวอย่าง

 <h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeName;
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

</body>
</html>

หมายเหตุ: nodeName จะมีชื่อแท็กตัวพิมพ์ใหญ่ขององค์ประกอบ HTML เสมอ

คุณสมบัติ nodeValue

nodeValue คุณสมบัติระบุค่าของโหนด

  • nodeValue สำหรับโหนดองค์ประกอบคือ null

  • nodeValue สำหรับโหนดข้อความคือตัวข้อความเอง

  • nodeValue สำหรับโหนดแอตทริบิวต์คือค่าแอตทริบิวต์

คุณสมบัติ nodeType

คุณสมบัติ nodeType เป็นแบบอ่านอย่างเดียว มันจะส่งกลับประเภทของโหนด

ตัวอย่าง

<h1 id="id01">My First Page</h1>
 <p id="id02"></p>
<script>
document.getElementById("id02").innerHTML 
 = document.getElementById("id01").nodeType;
</script>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

</body>
</html>

คุณสมบัติ nodeType ที่สำคัญที่สุดคือ:

Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2  class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

ประเภท 2 เลิกใช้แล้วใน HTML DOM (แต่ใช้งานได้) ไม่ได้เลิกใช้แล้วใน XML DOM