Document Object Model 1

Document Object Model

CBGD: Nguyễn Trần Thi Văn

NGÔN NGỮ ĐÁNH DẤU MỞ RỘNG

CHƯƠNG 08

Nội dungTổng quan về DOMĐặc điểm – Công dụngCác thành phầnLàm việc với DOM

2Document Object Model

3

Mục tiêu

Document Object Model

DOM là một giao diện lập trình độc lập với các ngôn ngữ và các nền tảng cho phép tương tác với các tài liệu có cấu trúc được biểu diễn dưới dạng cây như HTML và XML (đọc, thêm, xóa, sửa,…)

Ban đầu DOM ra đời để giúp lập trình viên tiếp cận các thành phần của HTML và thay đổi chúng bằng javascript, sau đó DOM được sử dụng vượt ra ngoài giới hạn này.

I. TỔNG QUAN VỀ DOM (1)

4Document Object Model

I. TỔNG QUAN VỀ DOM (2)DOM Level 0 (Legacy DOM)

– Đưa ra bởi Netscape khi javascipt ra đời– Cung cấp cách thức truy cập vào 2 loại

đối tượng quan trọng là image và formCác DOM trung gian

– Netscape và Microsoft tự đưa ra DOM riêng của họ và có sự không thống nhất.

– Sau sự ra đời của DOM level 1 thì những DOM này đã bị loại bỏ.

5Document Object Model

I. TỔNG QUAN VỀ DOM (3)DOM Level 1 (W3C DOM)

– W3C (World Wide Web Consortium) : tổ chức tiêu chuẩn web quốc tế.

– Do tổ chức W3C đưa ra thống nhất cho các browser nên còn được gọi là W3C DOM. Các DOM từ level 1 trở đi đều do W3C nắm giữ.

6Document Object Model

7Document Object Model

I. TỔNG QUAN VỀ DOM (4)

DOM level 2– Là bản mở rộng của DOM level 1– Là DOM được hỗ trợ rộng rãi nhất

hiện nay.– Bổ sung thêm một số thành phần

so với level 1.

I. TỔNG QUAN VỀ DOM (5)

8Document Object Model

9Document Object Model

I. TỔNG QUAN VỀ DOM (6)

Style : xác định các APIs dùng để tiếp cận và cập nhật nội dung của các stylesheet.

Events : Xác định các APIs để tiếp cận và cập nhật các sự kiện xử lý.

Traversal – Range : xác định các APIs để duyệt và xác định phạm vi của tài liệu.

10Document Object Model

I. TỔNG QUAN VỀ DOM (7)

11

DOM level 2 được chia thành 3 phần:

Core : Xác định các APIs để xử lý một tài liệu bất kỳ.

XML: Xác định các APIs để quản lý cấu trúc và nội dung của tài liệu XML.

HTML : xác định các APIs để quản lý cấu trúc và nội dung của tài liệu HTML.

Document Object Model

I. TỔNG QUAN VỀ DOM (8)

DOM Level 3– Là bản mở rộng của level 2.– Chưa được hỗ trợ rộng rãi.– Hiện tại vẫn đang được tiếp tục

phát triển và hoàn thiện.

12Document Object Model

I. TỔNG QUAN VỀ DOM (9)

13Document Object Model

I. TỔNG QUAN VỀ DOM (10.)

Cấu trúc :DOM quy định tài liệu làm việc với

DOM (tài liệu DOM) là tập hợp các node hay những mẫu thông tin được tổ chức theo hệ thống cây phân cấp.

II. ĐẶC ĐIỂM – CÔNG DỤNG (1)

14Document Object Model

XML DOM :Là mô hình đối tượng và là giao diện

lập trình chuẩn cho XML.Độc lập nền và độc lập ngôn ngữ.Do W3C quản lý và phát triểnXML DOM định nghĩa các đối tượng và

thuộc tính ứng với các thành phần của XML, đồng thời cung cấp các phương thức cho phép truy cập chúng.

II. ĐẶC ĐIỂM – CÔNG DỤNG (2)

15Document Object Model

16Document Object Model

II. ĐẶC ĐIỂM – CÔNG DỤNG (3)

17

NODEs: toàn bộ tài liệu XML được xem như bao gồm các nút.Document nodeElement nodesText nodesAttribute nodesComment nodes

Document Object Model

II. ĐẶC ĐIỂM – CÔNG DỤNG (4)

II. ĐẶC ĐIỂM – CÔNG DỤNG (5)

18

Mối quan hệ giữa các node:

Document Object Model

19

Giao diện lập trình (APIs):DOM xác định những API biểu diễn

các kiểu thông tin có thể có, các thuộc tính và phương thức để làm việc với các đối tượng, đã được trình bày ở phần giới thiệu DOM Level 2.

Document Object Model

II. ĐẶC ĐIỂM – CÔNG DỤNG (6.)

III. Làm việc với XML DOM

20

1.Load XML: Nội dung file books.xml Trước khi có thể thao tác với tài

liệu XML thì chúng ta phải nạp tài liệu vào 1 đối tượng XML DOM.

Các trình duyệt hầu hết đều có sẵn XML Parser vì thế chúng ta dễ dàng nạp tài liệu XML.

Document Object Model

21

Sử dụng XMLHttpRequest để load nội dung file XML:function loadXMLDoc(dname){

if (window.XMLHttpRequest){

xhttp=new XMLHttpRequest();}else{xhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xhttp.open("GET",dname,false);xhttp.send();return xhttp.responseXML;

}Document Object Model

III. Làm việc với XML DOM

22

2. Một số thuộc tính tiêu biểu:ox.nodeTypeox.nodeNameox.nodeValueox.parentNodeox.childNodesox.attributes

Document Object Model

III. Làm việc với XML DOM

23

3. Một số hàm tiêu biểu:o x.getElementsByTagName(name)o x.appendChild(node)o x.removeChild(node)

Document Object Model

III. Làm việc với XML DOM

24

Ví dụ ://nguồn là books.xmlxmlDoc=loadXMLDoc("books.xml");//trả ra tên của Root Elementdocument.write(xmlDoc.documentElement.nodeName);

Kết quả : bookstore

Document Object Model

III. Làm việc với XML DOM

Danh sách node:Khi sử dụng thuộc tính childNodes hay

phương thức getElementsByTagName thì kết quả trả về là 1 danh sách node theo thứ tự như trong file XML.

xmlDoc=loadXMLDoc("books.xml");x=xmlDoc.getElementsByTagName('title');for (i=0;i<x.length;i++){document.write(x[i].childNodes[0].nodeValue);document.write("<br/>");}

III. Làm việc với XML DOM

25Document Object Model

III. Làm việc với XML DOM

26

Danh sách attribute:Thuộc tính attributes của 1 element node sẽ

trả về 1 danh sách các attribute của element node đó.

xmlDoc=loadXMLDoc("books.xml");x=xmlDoc.getElementsByTagName(“book")[0].attributes;//xuất giá trị thuộc tính của categorydocument.write(x.getNamedItem("category").nodeValue);//xuất ra số lượng attributesdocument.write("<br/>" + x.length);  Kết quả : cooking

Document Object Model

III. Làm việc với XML DOM

27

Sự khác nhau giữa các trình duyệt:Các trình duyệt hiện nay đều hỗ trợ

level 2 DOM.Điểm khác nhau quan trọng nhất là

cách xử lý khoảng trắng và kí tự xuống dòng giữa các node (khi dùng các trình soạn thảo đơn giản như notepad để soạn file XML).

IE không xác định khoảng trắng và kí tự xuống dòng đó là text node, những trình duyệt khác thì có.

Document Object Model

III. Làm việc với XML DOM

28

Ví dụ :

Với file XML có nội dung như trên thì khi đếm node con của node gốc trên IE cho kết quả là 4, Firefox là 9!

Document Object Model

III. Làm việc với XML DOM

29

4. Lấy giá trị của node: Ta có thể truy cập đến từng nút

trong cây XML DOM bằng 1 trong 3 cách:

– Sử dụng hàm getElementByTagName(name).

– Duyệt qua một phần/toàn bộ cây DOM.

– Sử dụng mối quan hệ giữa các node để di chuyển trong cây.

Document Object Model

Element:o Hàm

getElementsByTagName(tagName) trả về một danh sách các node chứa tất cả element phù hợp với tên thẻ được chỉ ra trong đối số của hàm.

o Thứ tự của các element này tương ứng với thứ tự của chúng trong file nguồn.

III. Làm việc với XML DOM

30Document Object Model

Atrribute:o Trong DOM, attribute cũng là node.

Không giống như element, attribute có giá trị là một chuỗi.

o Hàm getAttribute(attributeName) trả về giá trị của thuộc tính đó.

o Hàm getAttributeNode(attributeName) trả về một attribute node. Sau khi lấy được một attribute node, chúng ta sử dụng nodeValue property để lấy giá trị của attribute đó.

III. Làm việc với XML DOM

31Document Object Model

5. Thay đổi giá trị: Element:o Mọi thứ trong DOM đều là node. Giá

trị chuỗi của một element nằm trong text node mà nó chứa. Như vậy muốn thay đổi giá trị của một element ta cần thay đổi giá trị của text node mà nó chứa.

III. Làm việc với XML DOM

32Document Object Model

III. Làm việc với XML DOM

33

Attribute:o Trong DOM, attribute cũng là node,

nhưng nó có giá trị là một chuỗi. Muốn thay đổi giá trị của attribute thì ta thay đổi chuỗi đó.

o Sử dụng phương thức setAttribute(attributeName, value)

o Sử dụng thuộc tính nodeValueDocument Object Model

6. Xóa nút: Hàm removeChild(node) loại bỏ node

được chỉ định. Khi một node bị xóa, tất cả các node con của nó cũng sẽ bị xóa.

Xóa node hiện tại:o Khi ta đã xác định được node mà ta

muốn remove thì ta có thể remove node đó sử dụng parentNode property và hàm removeChild(node).

III. Làm việc với XML DOM

34Document Object Model

7. Xóa thuộc tính:o Hàm removeAttribute(name) sử dụng

để xóa một attribute node bằng tên của nó.

o Hàm removeAttributeNode(node) với đối số là một node được sử dụng để xóa một attribute xác định.

III. Làm việc với XML DOM

35Document Object Model

8. Thay thế Node: Hàm replaceChild(newNode,

oldNode) sử dụng để thay thế một node.

Hàm replaceData(offset, length, replaceString) được sử dụng để thay thế nội dung của một text node.

Thay thế nội dung của text node sử dụng nodeValue.

III. Làm việc với XML DOM

36Document Object Model

9. Tạo Node: Tạo element nodeo Chúng ta dùng phương thức

createElement() để tạo mới một Element Node, và phương thức appendChild() để thêm Element Node vào XML.

Tạo atrribute node Dùng phương thức createAttribute() để

tạo mới attribute node. Sau đó dùng phương thức setAttribute() để

chèn thuộc tính đó vào một element đã định.

III. Làm việc với XML DOM

37Document Object Model

9. Tạo Node: Dùng phương thức createTextNode()

sẽ tạo một text node. Dùng phương thức

createCDATASection() để tạo 1 CDATA node mới.

Dùng phương thức createComment() để tạo 1 comment node.

III. Làm việc với XML DOM

38Document Object Model

10.Thêm node: Phương thức appendChild() sẽ thêm

một node con vào node đang xét Sử dụng phương thức insertBefore()

để thêm một node vào trước node con đang xét đã tồn tại trước đó.

Dùng phương thức setAttribute() để tạo một attribute mới nếu nó chưa tồn tại.

III. Làm việc với XML DOM

39Document Object Model

10.Thêm node: Phương thức insertData(offset,

string) chèn thêm 1 đoạn text string vào nội dung node hiện tại. (chỉ dùng cho textnode)

offset: vị trí trong chuỗi ban đầu để chèn text

string: chuỗi để chèn vào.

III. Làm việc với XML DOM

40Document Object Model

11.Sao chép nút: Phương thức cloneNode(bool) tạo ra

1 bản copy của 1 nút.o bool : nếu là true thì copy toàn bộ

thuộc tính và nút con, nếu false chỉ copy tên node.

III. Làm việc với XML DOM

41Document Object Model

Tóm tắt chương DOM là cấu trúc dạng cây biểu diễn nội

dung tài liệu XML trong bộ nhớ. Ta có thể sử dụng nhiều ngôn ngữ khác

nhau để thực hiện các thao tác dữ liệu trên cây DOM.

42Document Object Model

HẾT CHƯƠNG

43Document Object Model