Presentation is loading. Please wait.

Presentation is loading. Please wait.

The Document Object Model

Published byGabriella Reeves Modified over 10 years ago

Similar presentations

Presentation on theme: "The Document Object Model"— Presentation transcript:

1 The Document Object Model
XML DOM

2 The JavaScript Object Hierarchy

3 Referring to (DOM) objects
window.resizeTo(300,300); document.write("<H4>" + navigator.userAgent + "</H4>"); parent.frame[1].location.replace(“someFile.html"); d = new Date(); document.write(d.toGMTString());

4 JavaScript Document Object Model
Document methods write(string) document.write(“<H1>Home</H1>”); inserts content in <html> element Document attributes alinkColor, linkColor, vlinkColor bgColor, fgColor

5 JavaScript Document Object Model
Objects relating to (sets of) elements in the Document content images [ ] forms [ ] links[ ] anchors [ ] applets [ ]

6 What is the XML DOM? API for manipulating XML
applies to all well-formed XML structures Defined and maintained by W3C DOM Level 2: November 13th 2000 DOM Level 3 Working Draft: January 14th 2002 developers use specific language bindings of DOM standard e.g. JavaScript binding of XML DOM, Java DOM classes (JAXP, JDOM)

7 The DOM API Core defines interfaces to all document content types
attributes and methods generic Node interface provides general methods and attributes for any XML Node type specific node type interfaces inherit from Node interface but provide specific functionality

8 Processing Instruction
UML model of XML DOM core classes and interfaces specific Node types Document DOMImplementation Document fragment NamedNodeMap DocumentType Node list Processing Instruction Comment DOM Exception Character Data Node Element Text Attr generic Entity Reference CDATA section Entity Notation

9 DOCUMENT_FRAGMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE ELEMENT_NODE
ATTRIBUTE_NODE CDATA_SECTION_NODE COMMENT_NODE DOCUMENT_FRAGMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE ELEMENT_NODE TEXT_NODE ENTITY_NODE ENTITY_REFERENCE_NODE NOTATION_NODE PROCESSING_INSTRUCTION_NODE XML DOM Node Types

10 the Node interface Attributes (most of these are read-only):
nodeName DOMString nodeValue DOMString type unsigned short parentNode Node, childNodes NodeList firstChild Node, lastChild Node previousSibling Node, nextSibling Node attributes NamedNodeMap ownerDocument Document namespaceURI, Prefix, localName DOMString

11 the Node interface Methods: Boolean hasAttributes ( )
Boolean hasChildNodes ( ) Node InsertBefore (Node newChild, Node refChild) Node replaceChild (Node newChild, Node oldChild) Node removeChild (Node oldChildfff) Node appendChild (Node newChild) Node cloneNode (Boolean Deep) Boolean isSupported (DOMString Feature,DOMString version ) Void normalize ( )

12 the NodeList interface
Attributes: Long integer length Methods: Node item (integer index) Example of use: for (i = 0; i < theList.length; i++) doSomethingWith (theList.item (i));

13 the Node interface Methods: Boolean hasAttributes ( )
Boolean hasChildNodes ( ) Node InsertBefore (Node newChild, Node refChild) Node replaceChild (Node newChild, Node oldChild) Node removeChild (Node oldChild) Node appendChild (Node newChild) Node cloneNode (Boolean Deep) Boolean isSupported (DOMString Feature,DOMString version ) Void normalize ( )

14 specific node type interfaces
structural nodes DocumentType, ProcessingInstruction, Notation, Entity provide mostly read only information about structural or document-handling instructions content nodes Document, Element, Attr, Text etc. provide manipulable interface to the data content of the XML

15 The Document Structure
Attr Element Element Text

16 the Document interface
Attributes (all of these are read-only): docType DocumentType implementation DOMImplementation documentElement Element Example of Use: root = theDocument.documentElement; //the root now contains the entire body of the parsed document

17 the Document interface
Methods: Attr createAttribute (DOMString name) Element createElement (DOMString tagName) Text createTextNode (DOMString textData) can also create comments, CDATA, etc... Element getElementById(DOMString id) NodeList getElementsByTagName(DOMString tagName) Example of use: theContents = doc.getElementsByTagName (“item”); // gets all “item” elements in the document

18 the Element interface Attributes (read-only): tagName DOMString
Methods: DOMString getAttribute (DOMString name) Attr getAttributeNode (DOMString name) NodeList getElementsByTagName(DOMString tagName) Boolean hasAttribute (DOMString name) Void removeAttribute (DOMString name) Attr removeAttributeNode (DOMString name) Void setAttribute (DOMString name, value) Attr setAttributeNode (Attr newAttribute)

19 the Element interface Methods: Attr createAttribute (DOMString name)
Element createElement (DOMString tagName) Text createTextNode (DOMString textData) can also create comments, CDATA, etc... Element getElementById(DOMString id) NodeList getElementsByTagName(DOMString tagName) Example of use: theContents = doc.getElementsByTagName (“item”); // gets all “item” elements in the document

20 the Attr interface Attributes (all read-only except value):
name DOMString ownerElement Element specified Boolean value DOMString Example of use: theColour = gandalf.getAttributeNode ("colour"); theColour.value = "Grey"; balrog (gandalf); theColour.value = "White";

21 The JavaScript binding of DOM

22 client-side DOM manipulation
loading XML data MSXML ActiveXObject in IE6 get XML data file from a URL use JavaScript binding to manipulate and present data implements XML DOM interface also HTML-specific features innerHTML property post data to server for serialisation used by AJAX

23 XML DOM in JavaScript <FORM>
<TABLE border = "2" style = "font-size:large;"> <TR> <TD>Hugo First</TD> <TD><INPUT TYPE = "CHECKBOX" NAME = "present" ></TD> </TR> <TD>Sue Pladle</TD> <TD><INPUT TYPE = "CHECKBOX" NAME = "present" ></TD></TR> ... </TABLE> <INPUT TYPE = "BUTTON" VALUE = "ABSENT” ONCLICK = "hide (true);"> <INPUT TYPE = "BUTTON" VALUE = "PRESENT” ONCLICK = "hide (false);"> <INPUT TYPE = "BUTTON" VALUE = "ALL” ONCLICK = "showall ();"> </FORM>

24 XML DOM in JavaScript function hide (flag) {
var rows = document.getElementsByTagName("tr"); var boxes = document.getElementsByName("present"); var count = 0; for (var i = 0; i < rows.length; i++) { if (boxes[i].checked == flag) { rows [i].style.display = "none"; } else { count++; rows[i].style.display = "block"; } var mesg = document.getElementById("mesg"); mesg.innerHTML = ("Showing " + count + " out of " + rows.length + "students");

25 XML DOM in JavaScript function showall () {
var rows = document.getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) rows[i].style.display = "block"; mesg.innerHTML = ("Showing " + rows.length + " out of " + rows.length); } <SCRIPT LANGUAGE="JavaScript"> document.write("<P ID=\"mesg\">"); document.write("Showing " + rows.length document.write("</P>"); </SCRIPT>

26 The Java DOM binding JAXP classes

27 load, modify, serialise original data Java Program XML source
modified data

28 Java and XML javax.xml.parser package
JAXP - Java API for XML Processing provides parser classes for DOM and SAX parsing of XML org.w3c.dom package contains essentially the Java binding of the XML DOM org.xml.sax package contains SAX API javax.xml.transform XSLT API (part of JAXP 1.1)

29 The Java binding of DOM Document Builder Factory DOM XML Document data

30 The Java binding of DOM generic and specific Node types implemented as Java classes org.w3c.dom.Document; org.w3c.dom.Element; org.w3c.dom.Attr; … etc. methods and attributes correspond to the DOM specification typing is more of an issue than in JavaScript JDOM – – Java oriented access for XML documents

31 simple example <?xml version = "1.0"?>
<!-- myIntro.xml > <!-- a simple introduction to Java DOM processing --> <!DOCTYPE myMessage [ <!ELEMENT myMessage ( message )> <!ELEMENT message ( #PCDATA )> ]> <myMessage> <message>This text will be replaced</message> </myMessage>

32 simple example // ReplaceText class
// Reads an XML file and replaces a text node. // first import the necessary classes import java.io.*; import org.w3c.dom.*; import javax.xml.parsers.*; import org.apache.crimson.tree.XmlDocument; import org.xml.sax.*;

33 simple example public class ReplaceText { private Document document;
public ReplaceText() { try { // obtain the default parser DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); // set the parser to validating factory.setValidating( true ); DocumentBuilder builder = factory.newDocumentBuilder(); // builder can now be used to construct a DOM tree

34 simple example // obtain document object from XML document
document = builder.parse( new File( "myIntro.xml" ) ); // now we can do the standard DOM stuff // first, we get the root node Node root = document.getDocumentElement(); if ( root.getNodeType() == Node.ELEMENT_NODE ) { Element myMessageNode = ( Element ) root; // make a NodeList of all the message elements NodeList messageNodes = myMessageNode.getElementsByTagName( "message" ); // get the first message element in the list if ( messageNodes.getLength() != 0 ) { Node message = messageNodes.item( 0 );

35 simple example // create a text node Text newText =
document.createTextNode(”Text has been replaced!"); // get the old text node, note the explicit typecast Text oldText = ( Text ) message.getChildNodes().item( 0 ); // replace the text message.replaceChild( newText, oldText ); } /* * the text content of the message element has been * replaced */

36 // now write out to an XML file and specify the error-handling behaviour
( (XmlDocument) document).write( new FileOutputStream(”newIntro.xml" ) ); } catch ( SAXParseException spe ) { System.err.println( "Parse error: " + spe.getMessage() ); System.exit( 1 ); catch ( SAXException se ) { se.printStackTrace(); catch ( FileNotFoundException fne ) { System.err.println( "File \'myIntro.xml\' not found. " ); catch ( Exception e ) { e.printStackTrace(); simple example

Download ppt "The Document Object Model"

Similar presentations

HTML DOM Part-II. Create Node We can create a node in JavaScript dynamically. There are 3 types of Node –Comment –Element –Text Node We can also create.

HTML DOM Part-II. Create Node We can create a node in JavaScript dynamically. There are 3 types of Node –Comment –Element –Text Node We can also create.
XML IV. The Document Object Model The Document Object model is a hierarchical structure of an XML document. It provides a means for accessing, and manipulating.

XML IV. The Document Object Model The Document Object model is a hierarchical structure of an XML document. It provides a means for accessing, and manipulating.
M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current.

M-V-C for web applications. Model for Web Applications model consists of data and system state database tables –persistent data session information –current.
XML CS380 1. What is XML?  XML: a skeleton for creating markup languages  you already know it!  syntax is identical to XHTML's: content  languages.

XML CS What is XML?  XML: a "skeleton" for creating markup languages  you already know it!  syntax is identical to XHTML's: content  languages.
JavaScript and the DOM Les Carr COMP3001 Les Carr COMP3001.

JavaScript and the DOM Les Carr COMP3001 Les Carr COMP3001.
Document Object Model (DOM) JavaScript manipulation of the DOM.

Document Object Model (DOM) JavaScript manipulation of the DOM.
Document Object Model. Lecture 18 The Document Object Model (DOM) is not a programming language It is an object-oriented model of web documents Each.

Document Object Model. Lecture 18 The Document Object Model (DOM) is not a programming language It is an object-oriented model of web documents Each.
Document Object Model (DOM): An Abstract Data Structure for XML data Alex Dekhtyar Department of Computer Science University of Kentucky.

Document Object Model (DOM): An Abstract Data Structure for XML data Alex Dekhtyar Department of Computer Science University of Kentucky.
PHP and the DOM There was some experimental support for the DOM in PHP 4 But it is only with PHP 5 that support appears to have stabilized At present,

PHP and the DOM There was some experimental support for the DOM in PHP 4 But it is only with PHP 5 that support appears to have stabilized At present,
11-Jun-15 More DOM. Manipulating DOM trees DOM, unlike SAX, gives you the ability to create and modify XML trees There are a few roadblocks along the.

11-Jun-15 More DOM. Manipulating DOM trees DOM, unlike SAX, gives you the ability to create and modify XML trees There are a few roadblocks along the.
Document Object Model (DOM): An Abstract Data Structure for XML data Alex Dekhtyar Department of Computer Science CSC 560: Management of XML Data.

Document Object Model (DOM): An Abstract Data Structure for XML data Alex Dekhtyar Department of Computer Science CSC 560: Management of XML Data.
 2008 Pearson Education, Inc. All rights reserved. 1 12 Document Object Model (DOM): Objects and Collections.

 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
Apache DOM Parser©zwzOctober 24, 2002 Wenzhong Zhao Department of Computer Science The University of Kentucky.

Apache DOM Parser©zwzOctober 24, 2002 Wenzhong Zhao Department of Computer Science The University of Kentucky.
C# The new language for Updated by Pavel Ježek © University of Linz, Institute for System Software, 2004 published under the Microsoft Curriculum License.

C# The new language for Updated by Pavel Ježek © University of Linz, Institute for System Software, 2004 published under the Microsoft Curriculum License.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.

DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
XML C#.NET Software Development. eXtensible Markup Language Markup language that describes data Markup language that describes data Stores data as text.

XML C#.NET Software Development. eXtensible Markup Language Markup language that describes data Markup language that describes data Stores data as text.
1 XML Data Management 4. Domain Object Model Werner Nutt.

1 XML Data Management 4. Domain Object Model Werner Nutt.
HTML DOM.  The HTML DOM defines a standard way for accessing and manipulating HTML documents.  The DOM presents an HTML document as a tree- structure.

HTML DOM.  The HTML DOM defines a standard way for accessing and manipulating HTML documents.  The DOM presents an HTML document as a tree- structure.
JS: Document Object Model (DOM)

JS: Document Object Model (DOM)
5 Processing XML 5 - 2 Parsing XML documents  Document Object Model (DOM)  Simple API for XML (SAX) Class generation Overview.

5 Processing XML Parsing XML documents  Document Object Model (DOM)  Simple API for XML (SAX) Class generation Overview.

Similar presentations

Ads by Google