XML DOM ตูนต่อ

DOM คืออะไร?

DOM กำหนดมาตรฐานในการเข้าถึงและปฏิบัติเอกสาร:

“W3C Document Object Model (DOM) คือส่วนต่อเชื่อมที่ไม่ขึ้นกับเครื่องและภาษา ที่อนุญาตให้โปรแกรมและสคริปต์เข้าถึงและปรับปรุงเนื้อหา โครงสร้างและรูปแบบของเอกสารได้โดยนัย”

HTML DOM กำหนดวิธีมาตรฐานในการเข้าถึงและปฏิบัติ HTML ไฟล์เอกสาร มันแสดง HTML ไฟล์เอกสารในโครงสร้างต้นไม้。

XML DOM กำหนดวิธีมาตรฐานในการเข้าถึงและปฏิบัติ XML ไฟล์เอกสาร มันแสดง XML ไฟล์เอกสารในโครงสร้างต้นไม้。

สำหรับใครที่ใช้ HTML หรือ XML ต้องเข้าใจ DOM ว่าเป็นสิ่งจำเป็น。

HTML DOM

ทั้งหมดเอลิเมนต์ HTML สามารถเข้าถึงด้วย HTML DOM ได้。

ตัวอย่าง 1

นี้เป็นตัวอย่างที่เปลี่ยนค่าของ element ที่มี id="demo"

<h1 id="demo">เรื่องนี้คือหัวข้อ</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

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

ตัวอย่าง 2

นี้เป็นตัวอย่างที่เปลี่ยนค่าของ element <h1> ในเอกสาร HTML

<h1>เรื่องนี้คือหัวข้อ</h1>
<h1>เรื่องนี้คือหัวข้อ</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

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

แจ้งเตือน:แม้ว่าเอกสาร HTML จะมี element <h1> แค่ตัวเดียว คุณก็ต้องระบุตัวดังนี้ [0] เพราะว่า getElementsByTagName() มักจะกลับมาเป็นแถว

คุณสามารถเรียนรู้เกี่ยวกับ HTML DOM มากยิ่งขึ้นในตัวอย่างการเรียน JavaScript ของเรา

XML DOM

สมาชิก element XML ทั้งหมดสามารถเข้าถึงได้ผ่าน XML DOM

XML DOM คือ:

  • โมเดลสมาชิกมาตรฐาน XML
  • มาตรฐานเขียนระบบแก้ไข XML
  • เป็นสิ่งที่ไม่ขึ้นกับแผงควบคุมและภาษา
  • มาตรฐาน W3C

ความหมายก็คือ: XML DOM คือมาตรฐานเกี่ยวกับการดึงข้อมูล, แก้ไข, เพิ่มเติม หรือ ลบออกสมาชิก element XML

ดึงค่าของ element XML

นี้เป็นตัวอย่างที่ค้นหาค่าของ element <title> ในเอกสาร XML

ตัวอย่าง

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

โหลด XML ไฟล์

XML ที่ใช้ในตัวอย่างนี้คือ books.xml

นี้เป็นตัวอย่างที่อ่าน "books.xml" สู่ xmlDoc และค้นหาค่าของ element <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>

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

การอธิบายตัวอย่าง

  1. xmlDoc - วัตถุ XML DOM ที่สร้างโดยประกาศ
  2. getElementsByTagName("title")[0] - ของตัวเลข <title> แรก
  3. childNodes[0] - ลูกตัวเลขแรกของ <title> (ตัวเลขข้อความ)
  4. nodeValue - ค่าของตัวเลข (ข้อความตัวเอง)

นำข้อความ XML ลงมา

ตัวอย่างนี้จะนำข้อความตัวอย่างเข้าไปยังวัตถุ XML DOM และใช้ JavaScript ที่หาข้อมูลจากนั้น

ตัวอย่าง

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</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")

วิธีมักหมายถึงสิ่งที่สามารถทำได้ (เช่น การลบ "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(node) - 向 x 插入一個子節點
  • x.removeChild(node) - 從 x 中刪除子節點

註釋：在上面的列表中，x 是一個節點對象。