Hướng dẫn XML DOM
DOM là gì?
DOM xác định một tiêu chuẩn để truy cập và thao tác với tài liệu:
"Mô hình đối tượng tài liệu W3C (DOM) là một nền tảng và giao diện trung lập về ngôn ngữ cho phép các chương trình và tập lệnh truy cập và cập nhật động nội dung, cấu trúc và kiểu dáng của tài liệu."
HTML DOM xác định một cách tiêu chuẩn để truy cập và thao tác các tài liệu HTML. Nó trình bày một tài liệu HTML dưới dạng cấu trúc cây.
XML DOM xác định một cách tiêu chuẩn để truy cập và thao tác các tài liệu XML. Nó trình bày một tài liệu XML dưới dạng cấu trúc cây.
Hiểu DOM là điều bắt buộc đối với bất kỳ ai làm việc với HTML hoặc XML.
DOM HTML
Tất cả các phần tử HTML có thể được truy cập thông qua HTML DOM.
Ví dụ này thay đổi giá trị của một phần tử HTML bằng id="demo":
Ví dụ
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script> Hãy tự mình thử »Ví dụ này thay đổi giá trị của phần tử <h1> đầu tiên trong tài liệu HTML:
Ví dụ
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script> Hãy tự mình thử »Lưu ý: Ngay cả khi tài liệu HTML chỉ chứa MỘT phần tử <h1> bạn vẫn phải chỉ định chỉ mục mảng [0], vì phương thức getElementsByTagName() luôn trả về một mảng.
Bạn có thể tìm hiểu thêm nhiều điều về HTML DOM trong hướng dẫn JavaScript của chúng tôi.
DOM XML
Tất cả các phần tử XML có thể được truy cập thông qua XML DOM.
DOM XML là:
- Mô hình đối tượng chuẩn cho XML
- Giao diện lập trình chuẩn cho XML
- Nền tảng và ngôn ngữ độc lập
- Tiêu chuẩn W3C
Nói cách khác: XML DOM là một tiêu chuẩn về cách lấy, thay đổi, thêm hoặc xóa các phần tử XML.
Lấy giá trị của một phần tử XML
Mã này truy xuất giá trị văn bản của phần tử <title> đầu tiên trong tài liệu XML:
Ví dụ
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Đang tải một tệp XML
Tệp XML được sử dụng trong các ví dụ bên dưới là books.xml .
Ví dụ này đọc "books.xml" vào xmlDoc và truy xuất giá trị văn bản của phần tử <title> đầu tiên trong books.xml:
Ví dụ
<!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>
Hãy tự mình thử »Ví dụ giải thích
- xmlDoc - đối tượng XML DOM được tạo bởi trình phân tích cú pháp.
- getElementsByTagName("title")[0] - lấy phần tử <title> đầu tiên
- childNodes[0] - con đầu tiên của phần tử <title> (nút văn bản)
- nodeValue - giá trị của nút (chính văn bản)
Đang tải một chuỗi XML
Ví dụ này tải một chuỗi văn bản vào một đối tượng XML DOM và trích xuất thông tin từ nó bằng JavaScript:
Ví dụ
<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>
Hãy tự mình thử »Giao diện lập trình
DOM mô hình hóa XML như một tập hợp các đối tượng nút. Các nút có thể được truy cập bằng JavaScript hoặc các ngôn ngữ lập trình khác. Trong hướng dẫn này, chúng tôi sử dụng JavaScript.
Giao diện lập trình cho DOM được xác định bởi các thuộc tính và phương thức tiêu chuẩn đã đặt.
Các thuộc tính thường được gọi là một cái gì đó (tức là tên nút là "cuốn sách").
Các phương thức thường được coi là một việc đã được thực hiện (tức là xóa "sách").
Thuộc tính XML DOM
Đây là một số thuộc tính DOM điển hình:
- x.nodeName - tên của x
- x.nodeValue - giá trị của x
- x.parentNode - nút cha của x
- x.childNodes - các nút con của x
- x.attributes - các nút thuộc tính của x
Lưu ý: Trong danh sách trên, x là đối tượng nút.
Các phương thức XML DOM
- x.getElementsByTagName( name ) - lấy tất cả các phần tử có tên thẻ được chỉ định
- x.appendChild( node ) - chèn một nút con vào x
- x.removeChild( node ) - xóa nút con khỏi x
Lưu ý: Trong danh sách trên, x là đối tượng nút.
