Giới thiệu về DOM (Document Object Model)
Bài viết giới thiệu ngắn gọn về DOM: nó là gì, các tài liệu HTML và XML có cấu trúc dựa trên DOM như thế nào, cách truy cập DOM... DOM là gì? DOM (mô hình đối tượng tài liệu) là một programming interface cho các tài liệu HTML và XML. Nó đại diện cho trang để các chương trình có thể thay đổi cấu ...
Bài viết giới thiệu ngắn gọn về DOM: nó là gì, các tài liệu HTML và XML có cấu trúc dựa trên DOM như thế nào, cách truy cập DOM...
DOM là gì?
DOM (mô hình đối tượng tài liệu) là một programming interface cho các tài liệu HTML và XML. Nó đại diện cho trang để các chương trình có thể thay đổi cấu trúc document, style và nội dung. DOM mô tả document dưới dạng các nodes và objects. Bằng cách đó, ngôn ngữ lập trình có thể kết nối với trang.
Một trang web là một document. Document này có thể được hiển thị trong cửa sổ trình duyệt, hoặc dưới dạng mã nguồn HTML. DOM đại diện cho document để nó có thể được thao tác bằng các ngôn ngữ lập trình. DOM là một object-oriented đại diện của trang web, có thể được sửa đổi bằng một ngôn ngữ kịch bản như JavaScript.
Hầu hết các trình duyệt hiện đại tuân thủ theo các tiêu chuẩn W3C DOM và WHATWG DOM. Nhiều trình duyệt mở rộng tiêu chuẩn, do đó cần cẩn thận khi sử dụng chúng trên web, nơi các documents có thể được truy cập bởi các trình duyệt có các DOM khác nhau.
Ví dụ, DOM chuẩn quy định phương thức getElementsByTagName trong đoạn mã bên dưới trả về nodelist chứa tất cả các elements <p> trong document:
var paragraphs = document.getElementsByTagName("P"); // paragraphs[0] is the first <p> element // paragraphs[1] is the second <p> element, etc. alert(paragraphs[0].nodeName);
Tất cả các properties, methods, events để thao tác và tạo các trang web được tổ chức thành các objects (ví dụ: object document đại diện cho chính document...).
DOM & JavaScript
Ví dụ ở trên được viết bằng JavaScript, nó sử dụng DOM để truy cập document và các element của document. DOM không phải là ngôn ngữ lập trình, nhưng nếu không có DOM, JavaScript sẽ không có bất kỳ mô hình hoặc khái niệm nào về các trang web, tài liệu HTML, tài liệu XML và các thành phần của chúng. Mỗi element trong một document là một phần của DOM cho document đó, vì vậy chúng có thể được truy cập và thao tác bằng cách sử dụng DOM và ngôn ngữ kịch bản như JavaScript.
Ban đầu, JavaScript và DOM được gắn chặt chẽ, nhưng cuối cùng chúng đã tách ra phát triển riêng biệt. Nội dung trang được lưu trữ trong DOM và có thể được truy cập và thao tác qua JavaScript, vì vậy chúng ta có phương trình xấp xỉ sau: API (HTML or XML page) = DOM + JS (scripting language)
DOM được thiết kế để độc lập với bất kỳ ngôn ngữ lập trình cụ thể nào, làm cho việc mô tả cấu trúc của document có sẵn từ một API duy nhất và nhất quán. Việc triển khai của DOM có thể được xây dựng cho bất kỳ ngôn ngữ nào, ví dụ Python:
# Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:ProjectsPychap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");
Truy cập DOM?
Bạn không phải làm gì đặc biệt để sử dụng DOM. Các trình duyệt khác nhau có các cài đặt DOM khác nhau và xây dựng API khác nhau để thao tác với DOM, nhưng sự khác biệt không đáng kể vì phần lớn tuân theo chuẩn DOM chung.
Các ngôn ngữ kịch bản như Javascript sẽ tương tác với document qua DOM, bằng các sử dụng API do trình duyệt cung cấp để truy xuất vào DOM của document.
Đoạn code JavaScript sau sẽ hiển thị cảnh báo khi document được tải hoàn tất (bao gổm css, js, image):
<body onload="window.alert('Welcome to my home page!');">
Hàm Javascript sau tạo một element H1 mới, thêm văn bản vào element đó và sau đó thêm H1 vào cây document:
<html>
<head>
<script>
// run this function when the document is loaded
window.onload = function() {
// create a couple of elements in an otherwise empty HTML page
var heading = document.createElement("h1");
var heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>
Các kiểu dữ liệu quan trọng?
- document: Khi một HTML document được tải vào một trình duyệt web, nó sẽ trở thành một document object. Document object là một bộ phận của DOM và nó là con của Window object. Document object là node gốc của HTML document và sở hữu tất cả các nodes khác (element nodes, text nodes, attribute nodes, and comment nodes). Document object cung cấp properties và methods để truy cập tất cả các nodes object.
- element Element đề cập đến một element hoặc một node của kiểu element trả về bởi DOM API. Ví dụ method document.createElement() trả về một tham chiếu object đến một node, nhưng chúng ta hay nói method này trả về một element vừa tạo ra bởi DOM. Trong HTML DOM, element object đại diện cho một HTML element.
- nodeList Một nodeList là một mảng các elements. Ví dụ method document.getElementsByTagName() sẽ trả về một mảng các elements. Mỗi phần tử (item) trong nodeList được truy cập thông qua chỉ mục (index) bằng một trong hai cách list.item(index) hoặc list[index]
- attribute Attributes là các nodes trong DOM giông như các elements. Bạn có thể tạo một attribute bởi method createAttribute(). Trong HTML DOM, một Attr object đại diện cho một HTML attribute.
- namedNodeMap Trong HTML DOM, một NamedNodeMap object đại diện cho một bộ sưu tập (collection) không có thứ tự của những elements attribute nodes. Các Nodes trong một NamedNodeMap có thể truy cập bởi tên (name) hoặc chỉ mục (index). ...
DOM Reference
