JavaScript HTML DOM การนำทาง
ด้วย HTML DOM คุณสามารถนำทางโหนดทรีโดยใช้ความสัมพันธ์ของโหนด
โหนด DOM
ตามมาตรฐาน W3C HTML DOM ทุกอย่างในเอกสาร HTML จะเป็นโหนด:
- เอกสารทั้งหมดเป็นโหนดเอกสาร
- องค์ประกอบ HTML ทุกองค์ประกอบเป็นโหนดองค์ประกอบ
- ข้อความภายในองค์ประกอบ HTML เป็นโหนดข้อความ
- ทุกแอตทริบิวต์ HTML เป็นโหนดแอตทริบิวต์ (เลิกใช้แล้ว)
- ความคิดเห็นทั้งหมดเป็นโหนดความคิดเห็น
ด้วย HTML DOM โหนดทั้งหมดในแผนผังโหนดสามารถเข้าถึงได้โดย JavaScript
โหนดใหม่สามารถสร้างได้ และโหนดทั้งหมดสามารถแก้ไขหรือลบได้
ความสัมพันธ์ของโหนด
โหนดในแผนผังโหนดมีความสัมพันธ์แบบลำดับชั้นซึ่งกันและกัน
คำว่า parent, child และ brother ใช้เพื่ออธิบายความสัมพันธ์
- ในโหนดทรี โหนดบนสุดเรียกว่ารูท (หรือโหนดรูท)
- ทุกโหนดมีพาเรนต์เพียงตัวเดียว ยกเว้นรูท (ซึ่งไม่มีพาเรนต์)
- โหนดสามารถมีลูกได้จำนวนหนึ่ง
- พี่น้อง (พี่น้อง) เป็นโหนดที่มีผู้ปกครองคนเดียวกัน
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
จาก HTML ด้านบน คุณสามารถอ่าน:
<html>คือโหนดรูท<html>ไม่มีพ่อแม่<html>เป็นผู้ปกครองของ<head>และ<body><head>เป็นลูกคนแรกของ<html><body>เป็นลูกคนสุดท้ายของ<html>
และ:
<head>มีลูกหนึ่งคน:<title><title>มีลูกหนึ่งคน (โหนดข้อความ): "DOM Tutorial"<body>มีลูกสองคน:<h1>และ<p><h1>มีลูกหนึ่งคน: "DOM บทที่หนึ่ง"<p>มีลูกหนึ่งคน: "สวัสดีชาวโลก!"<h1>และ<p>เป็นพี่น้องกัน
การนำทางระหว่างโหนด
คุณสามารถใช้คุณสมบัติของโหนดต่อไปนี้เพื่อนำทางระหว่างโหนดต่างๆ ด้วย JavaScript:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
โหนดย่อยและค่าโหนด
ข้อผิดพลาดทั่วไปในการประมวลผล 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>
ตัวอย่าง
<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>
InnerHTML
ในบทช่วยสอนนี้ เราใช้คุณสมบัติ 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>
ตัวอย่าง
<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 ขององค์ประกอบ node เหมือนกับชื่อแท็ก
- 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>
หมายเหตุ: nodeNameมีชื่อแท็กตัวพิมพ์ใหญ่ขององค์ประกอบ HTML เสมอ
คุณสมบัติ nodeValue
คุณสมบัติnodeValueระบุค่าของโหนด
- nodeValue สำหรับโหนดองค์ประกอบ is
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>
คุณสมบัติ 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