XML DOM Hướng dẫn

DOM là gì?

DOM xác định các tiêu chuẩn để truy cập và thao tác tài liệu:

“W3C Document Object Model (DOM) là một giao diện không phụ thuộc vào nền tảng và ngôn ngữ, cho phép chương trình và kịch bản truy cập và cập nhật nội dung, cấu trúc và phong cách tài liệu một cách động.”

HTML DOM xác định các phương pháp tiêu chuẩn để truy cập và thao tác tài liệu HTML. Nó hiển thị tài liệu HTML dưới dạng cấu trúc cây.

XML DOM xác định các phương pháp tiêu chuẩn để truy cập và thao tác tài liệu XML. Nó hiển thị tài liệu XML dưới dạng cấu trúc cây.

Đối với bất kỳ ai sử dụng HTML hoặc XML, việc hiểu biết về DOM là bắt buộc.

HTML DOM

Mọi phần tử HTML đều có thể truy cập qua HTML DOM.

Ví dụ 1

Ví dụ này thay đổi giá trị của phần tử HTML có id="demo":

<h1 id="demo">Đây là tiêu đề</h1>
<p id="demo"></p>
document.getElementById("demo").innerHTML = "Hello World!";
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

</html>

Ví dụ 2

Ví dụ này thay đổi giá trị của phần tử đầu tiên <h1> trong tài liệu HTML:

<h1>Đây là tiêu đề</h1>
<h1>Đây là tiêu đề</h1>
<p id="demo"></p>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

</html>

Lưu ý:Mặc dù tài liệu HTML chỉ chứa một phần tử <h1>, bạn vẫn phải chỉ định chỉ số mảng [0] vì phương thức getElementsByTagName() luôn trả về một mảng.

Bạn có thể học thêm về HTML DOM trong giáo trình JavaScript của chúng tôi.

DOM XML

Tất cả các phần tử XML đều có thể truy cập qua XML DOM.

XML DOM là:

  • Mô hình đối tượng tiêu chuẩn của XML
  • Giao diện lập trình tiêu chuẩn của XML
  • Độc lập với nền tảng và ngôn ngữ
  • Tiêu chuẩn W3C

Ngược lại: XML DOM là 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 phần tử XML

Ví dụ này tìm kiếm giá trị văn bản của phần tử đầu tiên <title> trong tài liệu XML:

Ví dụ này sẽ tải chuỗi văn bản vào đối tượng XML DOM và sử dụng JavaScript để lấy thông tin từ nó:

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

Tải tệp XML

Tệp XML được sử dụng trong ví dụ này là books.xml.

Ví dụ này sẽ đọc "books.xml" vào xmlDoc và tìm kiếm giá trị văn bản của phần tử đầu tiên <title> trong books.xml:

Ví dụ này sẽ tải chuỗi văn bản vào đối tượng XML DOM và sử dụng JavaScript để lấy thông tin từ nó:

<!DOCTYPE html>
Mô hình
<html>
<body>
<p id="demo"></p>
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;
    xmlDoc = parser.parseFromString(text,"text/xml");
    document.getElementById("demo").innerHTML =
}
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>

</html>

}

  1. Giải thích ví dụ xmlDoc
  2. - XML DOM đối tượng được tạo bởi bộ phân tích getElementsByTagName("title")[0]
  3. - Lấy phần tử <title> đầu tiên childNodes[0]
  4. - Đầu tiên của phần tử <title> (nút văn bản) nodeValue

- Giá trị của nút (văn bản chính nó)

Tải chuỗi XML

Ví dụ này sẽ tải chuỗi văn bản vào đối tượng XML DOM và sử dụng JavaScript để lấy thông tin từ nó:

Mô hình
<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>

Thử trực tiếp

Giao diện lập trình

Giao diện lập trình DOM của HTML được định nghĩa bởi một tập hợp các thuộc tính và phương thức tiêu chuẩn.

Thuộc tínhThường thì nó chỉ việc là gì (ví dụ nodename là "book").

Phương thứcThường thì nó chỉ việc có thể làm gì (ví dụ như xóa hành động "book" này).

Thuộc tính XML DOM

Đây là một số thuộc tính DOM典型:

  • 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

Ghi chú:Trong danh sách trên, x là một đối tượng nút.

Phương pháp 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 phần tử con vào x
  • x.removeChild(node) - Xóa các phần tử con từ x

Ghi chú:Trong danh sách trên,x Là một đối tượng nút.