XML DOM หาโหนด
- หน้าก่อน ตัวแปรและวิธีของ DOM
- หน้าต่อไป ข้อมูลของตัวโค้ด DOM
ด้วย DOM คุณสามารถเข้าถึงทุกตัวองค์ประกอบในเอกสาร XML
ตัวอย่าง
ตัวอย่างด้านล่างนี้ใช้ไฟล์ XML books.xml.
ฟังก์ชัน loadXMLDoc()ที่ตั้งอยู่ด้านนอก JavaScript สำหรับการโหลดไฟล์ XML
- เข้าถึงตัวองค์ประกอบด้วยตัวแปรดัชนีในลิสต์ของตัวองค์ประกอบ
- ตัวอย่างนี้ใช้วิธี getElementsByTagname() ที่มีอยู่เพื่อขอรับ <title> ที่มีอยู่ใน "books.xml" อันที่สาม
- วงลูกโหลดตัวองค์ประกอบด้วยตัวแปร length
- ตัวอย่างนี้ใช้ตัวแปร length ที่มีอยู่เพื่อวงลูกโหลดทุก <title> ที่มีอยู่ใน "books.xml"
- ดูประเภทของตัวองค์ประกอบ
- ตัวอย่างนี้ใช้ตัวแปร nodeType ที่มีอยู่เพื่อขอรับประเภทของตัวองค์ประกอบที่มีอยู่ในเช่นที่ "books.xml"
- วงลูกโหลดองค์ประกอบ
- ตัวอย่างนี้ใช้ตัวแปร nodeType ที่มีอยู่ใน "books.xml" ที่จะจัดการกับองค์ประกอบ
- ใช้ความสัมพันธ์ของตัวองค์ประกอบเพื่อวงลูกโหลดองค์ประกอบ
- ตัวอย่างนี้ใช้ตัวแปร nodeType และ nextSibling ที่มีอยู่ใน "books.xml" ที่จะจัดการกับองค์ประกอบ
การเข้าถึงตัวองค์ประกอบ
คุณสามารถเข้าถึงตัวองค์ประกอบด้วยสามวิธี
- ด้วยการใช้การกดูหาแท็ก getElementsByTagName()
- ด้วยการใช้วงลูกโหลด (การเดินทาง) ต้นไม้ตัวองค์ประกอบ
- ด้วยการใช้ความสัมพันธ์ของตัวองค์ประกอบเพื่อเดินทางในต้นไม้ตัวองค์ประกอบ
การใช้ภาษา getElementsByTagName()
getElementsByTagName() กดูหาทุกองค์ประกอบที่มีชื่อแท็กที่กำหนด
การใช้ภาษา
node.getElementsByTagName("tagname");
ตัวอย่าง
ตัวอย่างด้านล่างนี้กลับมาเพียงโครงสร้าง <title> ใต้ x
x.getElementsByTagName("title");
โปรดทราบว่าตัวอย่างด้านบนกลับมาเพียงโครงสร้าง <title> ใต้ x ตัวนี้ ถ้าต้องการกลับโครงสร้าง <title> ทั้งหมดในเอกสาร XML ใช้
xmlDoc.getElementsByTagName("title");
ที่นี้ xmlDoc คือเอกสารตัวเอง (โครงสร้างเอกสาร)
DOM Node List
getElementsByTagName() กลับรายการโครงสร้าง (node list) ซึ่งเป็นตัวแปรของโครงสร้าง
รหัสใต้นี้ใช้ loadXMLDoc() ตั้งค่า "books.xml" โหลด xmlDoc ลงในตัวแปร x แล้วเก็บรายการ <title> ของโครงสร้าง
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title");
คุณสามารถเข้าถึง <title> ใน x ด้วยตัวเลขดัชนี สำหรับเข้าถึง <title> ที่สาม คุณสามารถเขียน:
y=x[2];
หมายเหตุ:ตัวเลขดัชนีเริ่มต้นด้วย 0
ในบทเรียนต่อไปของนี้ คุณจะเรียนรู้เพิ่มเติมเกี่ยวกับ Node List
DOM Node List Length
คุณสมบัติ length กำหนดความยาวของรายการโครงสร้าง (คือจำนวนของโครงสร้าง)
คุณสามารถวนลูกตาม length ของรายการโครงสร้าง:
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("title"); for (i=0;i<x.length;i++) { document.write(x[i].childNodes[0].nodeValue); document.write("<br />"); }
ตัวอย่างชี้แจง:
- ใช้ loadXMLDoc() ตั้งค่า "books.xml" โหลด xmlDoc
- เอาโครงสร้าง <title> ทั้งหมด
- แสดงค่าของตัวอักษรของโครงสร้าง <title> ทั้งหมด
Node Type
ของเอกสาร XML documentElement คุณสมบัติคือต้นโครงสร้าง
ของโครงสร้าง nodeName คุณสมบัติคือชื่อของโครงสร้าง
ของโครงสร้าง nodeType คุณสมบัติคือประเภทของโครงสร้าง
คุณจะเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติของโครงสร้างในบทเรียนต่อไป
วนเลือกโครงสร้าง
รหัสใต้นี้วนลูกย่อยโครงสร้างของต้นโครงสร้าง ที่เป็นโครงสร้างอนุกรม:
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.documentElement.childNodes; for (i=0;i<x.length;i++) { if (x[i].nodeType==1) {//Process only element nodes (type 1) document.write(x[i].nodeName); document.write("<br />"); } }
ตัวอย่างชี้แจง:
- ด้วยการใช้ loadXMLDoc() ตั้งค่า "books.xml" โหลด xmlDoc"
- ได้รับย่อยโครงสร้างของต้นโครงสร้าง
- ตรวจสอบประเภทของโครงสร้างของย่อยโครงสร้าง ถ้าประเภทของโครงสร้างคือ "1" แล้ว จะเป็นโครงสร้างอนุกรม
- ถ้าเป็นตัวเลขประกอบ พิมพ์ชื่อของตัวเลขประกอบ
นำทางด้วยโครงสร้างของตัวเลข
รหัสที่แต่งตั้งด้านล่างนี้นำเอาโครงสร้างของตัวเลขเพื่อดำเนินการนำทางในต้นไม้ตัวเลข:
xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.getElementsByTagName("book")[0].childNodes; y=xmlDoc.getElementsByTagName("book")[0].firstChild; for (i=0;i<x.length;i++) { if (y.nodeType==1) {//Process only element nodes (type 1) document.write(y.nodeName + "<br />"); } y=y.nextSibling; }
- ด้วยการใช้ loadXMLDoc() ตั้งค่า "books.xml" โหลด xmlDoc"
- หาตัวเลขย่อยของตัวเลขประกอบ "book" แรก
- ตั้งค่าตัวแปร "y" ให้เป็นตัวเลขย่อยแรกของตัวเลขประกอบ "book"
- ตรวจสอบประเภทของตัวเลขย่อยของทุกตัวเลขย่อย หากประเภทของตัวเลขย่อยเป็น "1" ก็เป็นตัวเลขประกอบ
- ถ้าเป็นตัวเลขประกอบ พิมพ์ชื่อของตัวเลขประกอบ
- ตั้งค่าตัวแปร "y" ให้เป็นตัวเลขถึงตัวเดียวกันต่อไป และปฎิบัติรูปแบบวนอีกครั้ง
- หน้าก่อน ตัวแปรและวิธีของ DOM
- หน้าต่อไป ข้อมูลของตัวโค้ด DOM