Bài giảng DOM - Phạm Hồng Phong

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