XML Document Object Model (DOM)
Chuẩn W3C.
Xây dựng cấu trúc cây (Tree) bên trong
bộ nhớ cho các tài liệu XML.
Cung cấp một giao diện lập trình (API) Cung cấp một giao diện lập trình (API)
cho việc truy xuất và thao tác ñộng một
tài liệu.
Các bộ phân tích DOM-based sẽ phân
tích các cấu trúc này
• Các ngôn ngữ hỗ trợ: Java, C, C++, Python,
Perl,
38 trang |
Chia sẻ: lylyngoc | Lượt xem: 1930 | Lượt tải: 1
Bạn đang xem trước 20 trang tài liệu Bài giảng DOM - Phạm Hồng Phong, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
DOM
Phạm Hồng Phong - SoICT – HUST
DOM
XML Document Object Model (DOM)
Chuẩn W3C.
Xây dựng cấu trúc cây (Tree) bên trong
bộ nhớ cho các tài liệu XML.
Cung cấp một giao diện lập trình (API)
cho việc truy xuất và thao tác ñộng một
tài liệu.
Các bộ phân tích DOM-based sẽ phân
tích các cấu trúc này
• Các ngôn ngữ hỗ trợ: Java, C, C++, Python,
Perl, …
2
DOM
DOM
NEUTRAL - INTERFACE
3
HTML XML JAVASCRIPT
ANY
LANGUAGE
3
DOM
HTML DOM ñịnh nghĩa một chuẩn cho
phép truy xuất và thao tác các tài liệu
HTML.
HTML DOM là một nền tảng và ñộc lập
ngôn ngữ và ñược sử dụng trong các ngôn
ngữ lập trình như: Java, JavaScript,
VBScript, …
4
DOM
Cấu trúc cây trong ñó bao gồm các loại nút: các
phần tử, thuộc tính và text.
5
Mỗi một thẻ (Tag) HTML là một nút bên trong cây, với các nút con và các nút
cha , kèm theo là phần text của riêng nút đó.
DOM
DOM ñịnh nghĩa các ñối tượng (object) và
các thuộc tính (properties) của các nút
(element) và các phương thức (interface)
ñể truy xuất chúng.
6
DOM
Ví dụ:
Xin chào!
Nút được tạo ra cho phần tử message:
– Phần tử message có nút con là phần tử body.
– Phần tử body có nội dung ở dạng Text “Xin
chào!"
– Các thuộc tính from và to cũng là các nút ở
trong cây.
7
DOM
XML
Document
MSXML Library or other libraries
Parsed
Document
Parser
DOM Tree
Root
Child
Text
Child
Text
Application
8
DOM
DOM level 1 (1998): giao diện ñể biểu
diễn tài liệu XML và HTML
Bao gồm: Document, Node, Attr, Element và
Text interfaces.
DOM level 2 (2000): bao gồm các ñặc tả:
Dom2 core, Views, Events, Style, Traversal
and Range và DOM2 HTML.
DOM level 3: gồm 5 ñặc tả
DOM3 core, Load và Save, Validation, Events
và Xpath.
9
DOM
DOM ñược sử dụng cho các tài liệu không
lớn, vì dữ liệu cần ñược nạp vào bộ nhớ.
DOM dựa trên đối tượng, cho phép thay đổi
dữ liệu trong tài liệu gốc.
Mô hình SAX dựa trên sự kiện như là các API
đơn giản thích hợp cho các tài liệu lớn, không
cho phép thay đổi tài liệu gốc.
DOM cung cấp API cho phép thêm, sửa, di
chuyển, xóa các nút tại bất cứ vị trí nào
trên cây dữ liệu ñể tạo ra một ứng dụng.
10
HTML DOM
Mô hình ñối tượng trình duyệt (HTML
DOM)
Trình duyệt: thể hiện nội dung của tài liệu
HTML (dạng XML).
Sử dụng mô hình DOM dựa trên các đối
tượng theo mô hình phân cấp.
Mỗi đối tượng là một tập hợp gồm:
• Các thuộc tính (Properties)
• Các phương thức (Methodes)
• Các sự kiện (Events) có thể kết hợp trên đối
tượng.
11
HTML DOM
Đối tượng window
Miêu tả cửa sổ đang hiển thị trang
web.
Cung cấp các khả năng truy xuất đến
các đối tượng con của nó và các trạng
thái.
Nắm bắt các sự kiện xảy ra trên cửa
sổ này.
12
HTML DOM
13
HTML DOM
Tham chiếu các ñối tượng dựa trên tên của ñối tượng.
14
HTML DOM
Tham chiếu tới ñối tượng con
Dạng tổng quát:
Truy xuất đến đối tượng History:
object1.object2.object3
Truy xuất đến đối tượng Body:
15
window.history
document.body
HTML DOM
Mô hình cấu trúc DOM là sự phân cấp của
các ñối tượng Node
node object
16
Element
Attribute
etcetc
HTML DOM
DOM có nhiều giao diện ñể thực thi các ñối
tượng node khác nhau.
Mỗi giao diện có các thuộc tính và các
phương thức của nó. So sánh với OOP:
17
MethodMethod
PropertyAttribute
Object ClassInterface
OOPDOM
Cây tài liệu DOM
Cấu trúc cây tài liệu:
document
document.body
document.
documentElement
18
18
Cây tài liệu DOM
Child, sibling, parent
19
Cây tài liệu DOM
Child, sibling, parent
20
Cây tài liệu DOM
Child, sibling, parent
21
Cây tài liệu DOM
Mô hình cấu trúc DOM: mọi thứ ñều là nodes: nút
Document, nút element, nút text, nút attribute, nút
comment.
22
Cây tài liệu DOM
document
.firstChild
.childNodes[0]
23
.firstChild
.parentNode
.childNodes[1];
23
Cây tài liệu DOM
document
trả lại một phần tử
theo ID
24
.getElementById()
.getElementByTag()
trả lại một mảng
các phần tử
24
Giao diện DOM
Giao diện của Node hay ñược sử dụng:
Attributes
childNodes
nodeName
Methods
insertBefore
25
nodeValue
firstChild
lastChild
previousSibling
nextSiblin
replaceChild
removeChild
appendChild
25
Giao diện DOM
Các lớp và các giao diện của DOM:
Class/Interface Description
Document interface Represents the XML document’s top-level node, which provides
access to all the document’s nodes—including the root element.
Node interface Represents an XML document node.
NodeList interface Represents a read-only list of Node objects.
26
Element interface Represents an element node. Derives from Node.
Attr interface Represents an attribute node. Derives from Node.
CharacterData interface Represents character data. Derives from Node.
Text interface Represents a text node. Derives from CharacterData.
Comment interface Represents a comment node. Derives from CharacterData.
ProcessingInstruction
interface
Represents a processing instruction node. Derives from Node.
CDATASection interface Represents a CDATA section. Derives from Text.
Giao diện DOM
Phương thức của lớp Document:
Method Name Description
createElement Creates an element node.
createAttribute Creates an attribute node.
createTextNode Creates a text node.
27
createComment Creates a comment node.
createProcessingInstruction Creates a processing instruction node.
createCDATASection Creates a CDATA section node.
getDocumentElement Returns the document’s root element.
appendChild Appends a child node.
getChildNodes Returns the child nodes.
Giao diện DOM
Các thuộc tính lớp Document:
childNodes
documentElement
firstChild
lastChild
parseError
validateOnParse
28
Giao diện DOM
Các phương thức của Node:
Method Name Description
appendChild Appends a child node.
cloneNode Duplicates the node.
getAttributes Returns the node’s attributes.
getChildNodes Returns the node’s child nodes.
29
getNodeName Returns the node’s name.
getNodeType Returns the node’s type (e.g., element, attribute,
text, etc.).
getNodeValue Returns the node’s value.
getParentNode Returns the node’s parent.
hasChildNodes Returns true if the node has child nodes.
removeChild Removes a child node from the node.
replaceChild Replaces a child node with another node.
setNodeValue Sets the node’s value.
insertBefore Appends a child node in front of a child node.
Giao diện DOM
Các thuộc tính của Node:
nodeName
nodeType
nodeValue
childNodes
firstChild
lastChild
text
30
Giao diện DOM
Các kiểu của Node:
Node Type Description
Node.ELEMENT_NODE Represents an element node.
Node.ATTRIBUTE_NODE Represents an attribute node.
Node.TEXT_NODE Represents a text node.
31
Node.COMMENT_NODE Represents a comment node.
Node.PROCESSING_INSTRUCTION_NODE Represents a processing instruction node.
Node.CDATA_SECTION_NODE Represents a CDATA section node.
Giao diện DOM
Các phương thức của Element:
Method Name Description
getAttribute Returns an attribute’s value.
getTagName Returns an element’s name.
32
removeAttribute Removes an element’s attribute.
setAttribute Sets an attribute’s value.
Ví dụ
XML Demo
August 22, 2007
Nguyen Van
Teo
XML is pretty easy.
Once you have mastered HTML, XML is
easily learned. You must remember that XML is
not for displaying information but for
managing information.
33
Ví dụ (tiếp)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"">
A DOM Example
Element script allows for
<script type = "text/javascript" language =
"JavaScript">
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.load("article.xml");
var element=xmlDoc.documentElement;
34
including scripting code
Instantiate
Microsoft XML
DOM object
Instantiate
Microsoft XML
DOM object
Ví dụ (tiếp)
var element=xmlDoc.documentElement;// get the root element
document.writeln(
"Here is the root node of the document:" );
document.writeln( "" + element.nodeName
+ "" );
document.writeln(
"The following are its child elements:" );
document.writeln( "" );
Assign article as root element
Place root element’s name in element
strong and write it to browser
Assign index to each
// traverse all child nodes of root element
for ( i = 0; i < element.childNodes.length; i++ ) {
var curNode = element.childNodes.item(i);
// print node name of each child element
document.writeln( "" + curNode.nodeName
+ "" );
}
document.writeln( "" );
// get the first child node of root element
var currentNode = element.firstChild;
35
child node of root node
Retrieve root node’s first
child node (title)
Ví dụ (tiếp)
document.writeln( "The first child of root node is:" );
document.writeln( "" + currentNode.nodeName
+ "" );
document.writeln( "whose next sibling is:" );
// get the next sibling of first child
var nextSib = currentNode.nextSibling;
document.writeln( "" + nextSib.nodeName
+ "." );
document.writeln( "Value of " + nextSib.nodeName
+ " element is:" );
Siblings are nodes at same level in
document (e.g., title, date,
author, summary and content)
Get first child’s next sibling (date)
Get first child of date
var value = nextSib.firstChild;
// print the text value of the sibling
document.writeln( "" + value.nodeValue + "" );
document.writeln( "Parent node of " );
document.writeln( "" + nextSib.nodeName
+ " is:" );
document.writeln( "" + nextSib.parentNode.nodeName
+ "." );
36
Get parent of date (article)
Ví dụ (tiếp)
37
38