Phân tích và tuần tự hóa XML
Đôi khi, bạn có thể cần phân tích nội dung XML và chuyển nó thành một cây DOM, hoặc ngược lại, tuần tự hóa một cây DOM hiện có thành XML. Trong bài viết này, chúng ta sẽ xem xét các đối tượng mà nền tảng web cung cấp để giúp các tác vụ phổ biến là tuần tự hóa và phân tích XML trở nên dễ dàng.
XMLSerializer-
Tuần tự hóa các cây DOM, chuyển chúng thành chuỗi chứa XML.
DOMParser-
Xây dựng một cây DOM bằng cách phân tích một chuỗi chứa XML, trả về một
XMLDocumenthoặcDocumenttùy theo dữ liệu đầu vào. fetch()-
Tải nội dung từ một URL. Nội dung XML được trả về dưới dạng chuỗi văn bản mà bạn có thể phân tích bằng
DOMParser. XMLHttpRequest-
Tiền thân của
fetch(). Không giống APIfetch(),XMLHttpRequestcó thể trả về một tài nguyên dưới dạngDocument, thông qua thuộc tínhresponseXMLcủa nó. - XPath
-
Một công nghệ để tạo các chuỗi chứa địa chỉ cho những phần cụ thể của tài liệu XML và định vị các nút XML dựa trên những địa chỉ đó.
Tạo một tài liệu XML
Dùng một trong các cách sau để tạo một tài liệu XML (là một thể hiện của Document).
Phân tích chuỗi thành cây DOM
Ví dụ này chuyển một fragment XML trong chuỗi thành cây DOM bằng DOMParser:
const xmlStr = '<q id="a"><span id="b">hey!</span></q>';
const parser = new DOMParser();
const doc = parser.parseFromString(xmlStr, "application/xml");
// print the name of the root element or error message
const errorNode = doc.querySelector("parsererror");
if (errorNode) {
console.log("error while parsing");
} else {
console.log(doc.documentElement.nodeName);
}
Phân tích tài nguyên có thể truy cập qua URL thành cây DOM
Dùng fetch
Sau đây là mã mẫu đọc và phân tích một tệp XML có thể truy cập qua URL thành cây DOM:
fetch("example.xml")
.then((response) => response.text())
.then((text) => {
const parser = new DOMParser();
const doc = parser.parseFromString(text, "text/xml");
console.log(doc.documentElement.nodeName);
});
Đoạn mã này lấy tài nguyên dưới dạng chuỗi văn bản, sau đó dùng DOMParser.parseFromString() để xây dựng một XMLDocument.
Nếu tài liệu là HTML, mã hiển thị ở trên sẽ trả về một Document. Nếu tài liệu là XML, đối tượng thu được thực ra là XMLDocument. Hai kiểu này về cơ bản là giống nhau; sự khác biệt chủ yếu mang tính lịch sử, mặc dù việc phân biệt chúng cũng có một số lợi ích thực tế.
Note:
Thực ra cũng có giao diện HTMLDocument, nhưng nó không nhất thiết là một kiểu độc lập. Ở một số trình duyệt thì đúng như vậy, còn ở những trình duyệt khác nó chỉ là một bí danh cho giao diện Document.
Tuần tự hóa một tài liệu XML
Với một Document, bạn có thể tuần tự hóa cây DOM của tài liệu trở lại XML bằng phương thức XMLSerializer.serializeToString().
Hãy dùng các cách sau để tuần tự hóa nội dung của tài liệu XML bạn đã tạo trong phần trước.
Tuần tự hóa cây DOM thành chuỗi
Trước tiên, tạo một cây DOM như được mô tả trong Sử dụng Document Object Model. Hoặc, dùng một cây DOM thu được từ fetch().
Để tuần tự hóa cây DOM doc thành văn bản XML, hãy gọi XMLSerializer.serializeToString():
const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc);
Tuần tự hóa tài liệu HTML
Nếu DOM bạn có là một tài liệu HTML, bạn có thể tuần tự hóa bằng serializeToString(), nhưng còn một lựa chọn khác mà nhiều người thấy đơn giản hơn: dùng thuộc tính Element.innerHTML (nếu bạn chỉ muốn các phần tử con của nút được chỉ định) hoặc thuộc tính Element.outerHTML nếu bạn muốn nút và tất cả phần tử con của nó.
const docInnerHtml = document.documentElement.innerHTML;
Kết quả là docInnerHtml là một chuỗi chứa HTML của nội dung tài liệu; tức là nội dung của phần tử <body>.
Bạn có thể lấy HTML tương ứng với <body> và các phần tử con của nó bằng đoạn mã này:
const docOuterHtml = document.documentElement.outerHTML;