กวดวิชา XML DOM
XML DOM
DOM คืออะไร?
DOM กำหนดมาตรฐานสำหรับการเข้าถึงและจัดการเอกสาร:
HTML DOM กำหนดวิธีมาตรฐานในการเข้าถึงและจัดการเอกสาร HTML มันนำเสนอเอกสาร HTML เป็นโครงสร้างแบบต้นไม้
XML DOM กำหนดวิธีมาตรฐานในการเข้าถึงและจัดการเอกสาร XML มันนำเสนอเอกสาร XML เป็นโครงสร้างแบบต้นไม้
การทำความเข้าใจ DOM เป็นสิ่งจำเป็นสำหรับทุกคนที่ทำงานด้วย HTML หรือ XML
HTML DOM
องค์ประกอบ HTML ทั้งหมดสามารถเข้าถึงได้ผ่าน HTML DOM
ตัวอย่างนี้เปลี่ยนค่าขององค์ประกอบ HTML ด้วย id="demo":
ตัวอย่าง
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
ตัวอย่างนี้เปลี่ยนค่าขององค์ประกอบ <h1> แรกในเอกสาร HTML:
ตัวอย่าง
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
หมายเหตุ:แม้ว่าเอกสาร HTML จะมีเพียงหนึ่งองค์ประกอบ <h1> คุณยังต้องระบุดัชนีอาร์เรย์ [0] เนื่องจากเมธอด getElementsByTagName() จะส่งคืนอาร์เรย์เสมอ
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ HTML DOM ได้ใน บทช่วย สอน JavaScriptของ เรา
XML DOM
องค์ประกอบ XML ทั้งหมดสามารถเข้าถึงได้ผ่าน XML DOM
XML DOM คือ:
- โมเดลอ็อบเจ็กต์มาตรฐานสำหรับ XML
- อินเทอร์เฟซการเขียนโปรแกรมมาตรฐานสำหรับ XML
- แพลตฟอร์ม-และภาษา-อิสระ
- มาตรฐาน W3C
กล่าวอีกนัยหนึ่ง: XML DOM เป็นมาตรฐานสำหรับวิธีการรับ เปลี่ยนแปลง เพิ่ม หรือลบองค์ประกอบ XML
รับค่าขององค์ประกอบ XML
รหัสนี้ดึงค่าข้อความขององค์ประกอบ <title> แรกในเอกสาร XML:
ตัวอย่าง
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
กำลังโหลดไฟล์ XML
ไฟล์ XML ที่ใช้ในตัวอย่างด้านล่างคือbooks.xml
ตัวอย่างนี้อ่าน "books.xml" เป็น xmlDoc และดึงค่าข้อความขององค์ประกอบ <title> แรกใน books.xml:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
ตัวอย่างที่อธิบาย
- xmlDoc - อ็อบเจ็กต์ XML DOM ที่สร้างโดย parser
- getElementsByTagName("title")[0] - รับ <title> องค์ประกอบแรก
- childNodes[0] - ลูกคนแรกขององค์ประกอบ <title> (โหนดข้อความ)
- nodeValue - ค่าของโหนด (ตัวข้อความเอง)
กำลังโหลดสตริง XML
ตัวอย่างนี้โหลดสตริงข้อความลงในวัตถุ XML DOM และดึงข้อมูลจากมันด้วย JavaScript:
ตัวอย่าง
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
อินเทอร์เฟซการเขียนโปรแกรม
DOM จำลอง XML เป็นชุดของอ็อบเจ็กต์โหนด โหนดสามารถเข้าถึงได้ด้วย JavaScript หรือภาษาการเขียนโปรแกรมอื่นๆ ในบทช่วยสอนนี้ เราใช้ JavaScript
อินเทอร์เฟซการเขียนโปรแกรมไปยัง DOM ถูกกำหนดโดยคุณสมบัติและวิธีการมาตรฐานที่ตั้งไว้
คุณสมบัติมักถูกอ้างถึงเป็นสิ่งที่ (เช่น nodename คือ "book")
วิธีการมักถูกอ้างถึงเป็นสิ่งที่ทำเสร็จแล้ว (เช่น ลบ "หนังสือ")
คุณสมบัติ XML DOM
นี่คือคุณสมบัติ DOM ทั่วไปบางประการ:
- x.nodeName - ชื่อของx
- x.nodeValue - ค่าของ x
- x.parentNode - โหนดพาเรนต์ของ x
- x.childNodes - โหนดย่อยของ x
- x.attributes - โหนดแอตทริบิวต์ของ x
หมายเหตุ: ในรายการด้านบน x คืออ็อบเจ็กต์โหนด
วิธีการ XML DOM
- x.getElementsByTagName( name ) - รับองค์ประกอบทั้งหมดที่มีชื่อแท็กที่ระบุ
- x.appendChild( โหนด ) - แทรกโหนดย่อยไปที่ x
- x.removeChild( โหนด ) - ลบโหนดย่อยออกจาก x
หมายเหตุ: ในรายการด้านบน x คืออ็อบเจ็กต์โหนด