Truy cập thành phần dữ liệu
Khái niệm DOM DOM là chữ viết tắt từ tiếng Anh Document Object Model ("Mô hình Đối tượng Tài liệu"), là một giao diện lập trình ứng dụng (API). Thường thường DOM, có dạng một cây cấu trúc dữ liệu, được dùng để truy xuất các tài liệu dạng HTML và ...
Khái niệm DOM
DOM là chữ viết tắt từ tiếng AnhDocument Object Model ("Mô hình Đối tượng Tài liệu"), là một giao diện lập trình ứng dụng (API). Thường thường DOM, có dạng một cây cấu trúc dữ liệu, được dùng để truy xuất các tài liệu dạng HTML và XML. Mô hình DOM độc lập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tài liệu.
Ban đầu, chưa có chuẩn thống nhất nên các thành phần trong một tài liệu HTML mô tả bằng các phiên bản khác nhau của DOM được hiển thị bởi các chương trình duyệt web thông qua JavaScript. Điều này buộc World Wide Web Consortium (W3C) phải đưa ra một loạt các mô tả kĩ thuật về tiêu chuẩn cho DOM để thống nhất mô hình này.
Mặc dù một tài liệu hay văn bản có cấu trúc chặt chẽ (well-structured document) luôn luôn có thể được mô hình hóa bằng một cấu trúc dạng cây, DOM không có giới hạn về cấu trúc dữ liệu của một tài liệu.
Hầu hết các bộ phân tích XML (XML parsers) (ví dụ: Xerces) và bộ xử lí XSL (ví dụ: Xalan) đã được phát triển để sử dụng cấu trúc cây này. Những hiện thực như vậy đòi hỏi toàn bộ nội dụng của một văn bản phải được phân tích và lưu trong bộ nhớ. Vì thế, DOM được sử dụng tốt nhất trong các ứng dụng mà trong đó các thành phần của tài liệu có thể được truy xuất và thao tác một cách ngẫu nhiên. Với các ứng dụng dựa trên XML, bao gồm yêu cầu đọc/ghi có chọn lọc cho mỗi lần phân tích (one-time selective read/write per parse), DOM cho thấy được sự tối ưu về mặt bộ nhớ. Trong các trường hợp đó thì giao diện lập trình ứng dụng SAX trở nên rất tiện lợi về cả mặt tốc độ và bộ nhớ.
Xem sét ví dụ sau:
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<p>Hello World!</p>
<p>Isn’t this exciting?</p>
<p>You’re learning to use the DOM!</p>
</body>
</html>
Lấy các đối tượng trong document
HTML Code:
var oHtml = document.documentElement; // Lấy tài liệu html
var oHead = oHtml.firstChild; // Lấy head
var oHead = oHtml.childNodes[0];
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.lastChild; // Lấy body
alert(oHead.parentNode == oHtml); //Lấy parent, trả về true
alert(oBody.previousSibling == oHead); // kết quả “true”
alert(oHead.nextSibling == oBody); //kết quả “true”
alert(oHead.ownerDocument == document); //kết quả “true”
Lấy loại node
Sử dụng thuộc tính nodeType
alert(document.nodeType); //outputs “9”
alert(document.documentElement.nodeType); //outputs “1”
alert(document.nodeType == Node.DOCUMENT_NODE); //outputs “true”
alert(document.documentElement.nodeType == Node.ELEMENT_NODE); //outputs “true”
Dưới đây là danh sách các loại node:
ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_NODE: 3,
CDATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSING_INSTRUCTION_NODE: 7,
COMMENT_NODE: 8,
DOCUMENT_NODE: 9,
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11,
NOTATION_NODE: 12
Tương tác với attribute (thuộc tính)
getAttribute(name) — Lấy thuộc tính với tên được chỉ định
setAttribute(name, newvalue) — Gán thuộc tính với tên và value
removeAttribute(name) — Xóa 1 thuộc tính
Truy vấn các node trong DOM
getElementsByTagName() : lấy các node với tag name
getElementsByName() : lấy các node với thuộc tính name
getElementById() : lấy các node với id
Ví dụ:
var oImgs = document.getElementsByTagName(“img”);
var oRadios = document.getElementsByName(“radColor”);
var oDiv1 = document.getElementById(“div1”);
Các hiện thực khác nhau của DOM trong các trình duyệt web khác nhau đã dẫn đến các vấn đề không tương hợp trong quá khứ. Vì thế, các lập trình viên web tốt hơn hết là nên kiểm tra xem một thuộc tính có tồn tại hay không trước khi sử dụng nó. Đoạn mã sau cho thấy cách kiểm tra phương thức quan trọng của W3CDOM có tồn tại hay không trước khi muốn thực thi đoạn mã phụ thuộc vào sự hỗ trợ của W3CDOM.
if (document.getElementById && document.getElementsByTagName) {
// vì các phương thức quan trọng getElementById và getElementsByTagName
// có mặt nên đoạn mã sau có thể an toàn mà sử dụng chúng.
obj = document.getElementById("navigation")
// đoạn mã khác có sử dụng W3CDOM.
// .....
}
Chương trình duyệt Internet Explorer của Microsoft – phiên bản 5 (1999), ... phiên bản 6 (2001) – là một trong các trình duyệt phổ biến nhất trong năm 2005. Internet Explorer và các trình duyệt khác dựa trên động cơ hiển thị Gecko như là Mozilla và Firefox hỗ trợ nhiều thuộc tính của W3C DOM. Vì thế các vấn đề trong việc sử dụng W3CDOM không còn tồn tại nhiều nữa như từng có trước đây với Internet Explorer 4.x và Netscape 4.x vào năm 2000. Bảng trong bài so sánh các động cơ hiển thị (DOM) cho thấy các phương thức và thuộc tính nào có thể được sử dụng một cách an toàn cho mỗi chương trình duyệt.
