1 / 63

Understanding DOM and XML: Tree Structure and Data Manipulation in Memory

This article explores the Document Object Model (DOM) as defined by the W3C. We discuss how XML is represented in a tree structure within memory, consisting of elements, attributes, and content as nodes. The DOM allows dynamic data manipulation similar to database interactions—data can be added, removed, or queried. We outline how to utilize a DOM parser for XML data manipulation, illustrated through JavaScript examples. The provided scripts demonstrate the loading and displaying of XML content in a web browser environment.

kaitlin-dennis
Télécharger la présentation

Understanding DOM and XML: Tree Structure and Data Manipulation in Memory

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DOM

  2. DOM: Document Object Model from Dietel chapter 8 • XML when parsed is represented as a tree structure in memory with elements attributes and content as tree nodes. • XML is dynamic, a programmer can add or remove data, query for data as you would with a database. • W3C provides a document object model – a standard for constructing the tree in memory. A parser following this guideline in a DOM-parser. • A DOM parser exposes (makes available) a programmatic library that allows data in xml to be manipulated by manipulating the treenodes.

  3. MS XML 6.0 insert Download available at ms Note: Peltzer text uses DOM object 4.0 but I could only get 3.0 to work

  4. Comes with a help file (sdk)

  5. A jscript <HTML> <HEAD> <TITLE>Displaying a Simple DOM Document in a Browser Popup</TITLE> <SCRIPT LANGUAGE="JScript"> function displayXml() { var xmldoc = new ActiveXObject("MSXML2.DOMDocument.3.0"); xmldoc.load("authors.xml"); alert(xmldoc.xml); } </SCRIPT> </HEAD> <BODY> <BUTTON onClick="displayXml();">Display XML</BUTTON> </BODY> </HTML>

  6. The xml (from our Peltzer text) <Authors> <AuthorInfo> <AuthorID>101</AuthorID> <AuthorFName>Dwight</AuthorFName> <AuthorLName>Peltzer</AuthorLName> <AuthorAddress>PO Box 516</AuthorAddress> <Auth_City>Some City</Auth_City> <Au_State>NY</Au_State> <Au_Zip>11564</Au_Zip> <BusinessTelNo>516-111-1234</BusinessTelNo> <Title>Professor of Computer Science</Title> <Employer>Tech University</Employer> </AuthorInfo> <AuthorPublisherInfo> <Publisher>Addison Wesley</Publisher> <Editor>MSR</Editor> <Address>25 Main Street Street</Address> <City>Major City</City> <State>MA</State> </AuthorPublisherInfo> <BookInfo> <Title>XML Language Mechanics</Title> <Pages> 450</Pages> <PublishDate>Summer 2003</PublishDate> <ISBN>0-201-77168-3</ISBN> <Category>XML Markup Language</Category> <NumChapters>12</NumChapters> <AdditionalFeatures>Self-Review Exercises and Projects</AdditionalFeatures> <SoftwareTools>Evaluation copy of XML Spy</SoftwareTools> </BookInfo> </Authors>

  7. Run the jscript (html) in IE

  8. Display generates popup window

  9. In Javascript, use loadXML to load a file or a string into ActiveXObject (DOMDocument) <HTML> <HEAD> <TITLE>Displaying a Simple DOM Document in a Browser Popup</TITLE> <SCRIPT LANGUAGE="JScript"> function displayXml() { var xmldoc = new ActiveXObject("MSXML2.DOMDocument.3.0"); xmldoc.loadXML("<root><child></child></root>"); alert(xmldoc.xml); } </SCRIPT> </HEAD> <BODY> <BUTTON onClick="displayXml();">Display XML</BUTTON> </BODY> </HTML>

  10. Example script <html> <body> <script language="JavaScript"> objDOM = new ActiveXObject("Msxml2.DOMDocument.3.0"); objDOM.async = false; var objNode; var objText; objNode = objDOM.createElement("root"); objText = objDOM.createTextNode(" root AuthorElement"); objDOM.appendChild(objNode); objNode.appendChild(objText); alert(objDOM.xml); </script> </body> </html>

  11. displaying a (really short DOM xml) document in javascript

  12. Javascript to display nodes and content <html> <body> <script type="text/vbscript"> Text="<h1>Pastry 4 U</h1>" document.write(Text) set xmlDoc=CreateObject("Msxml2.DOMDocument.3.0") xmlDoc.async="false" xmlDoc.load("pastry.xml") for each n in xmlDoc.documentElement.childNodes document.write(n.nodename) document.write(": ") document.write(n.text) document.write("<br>") next </script> </body> </html>

  13. Running on pastry.xml

  14. Another example to display note contents

  15. The script <html> <head> <SCRIPT LANGUAGE="JScript"> function displayXml() { var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0") xmlDoc.async="false" xmlDoc.load("note.xml") to.innerText = xmlDoc.getElementsByTagName("to").item(0).text from.innerText= xmlDoc.getElementsByTagName("from").item(0).text header.innerText= xmlDoc.getElementsByTagName("heading").item(0).text body.innerText= xmlDoc.getElementsByTagName("body").item(0).text } </script> </head> <body bgcolor="white"> <BUTTON onClick="displayXml();">Display XML</BUTTON> <h1>DP Software</h1> <b>To: </b> <span id="to"></span> <br> <b>From: </b> <span id="from"></span> <hr> <b><span id="header"></span></b> <hr> <span id="body"></span> </body> </html>

  16. The note(.xml) <note> <to> Bob </to> <from> Joe </from> <heading> important news! </heading> <body> CSCI 345 assignment is due!!! </body> </note>

  17. Vb script: get the root and some other elements (see next slide for script)

  18. script <html> <head> <title>DOM Invoice</title> </head> <body> <script type="text/vbscript"> set xmlDoc = CreateObject("Msxml2.DOMDocument.3.0") xmlDoc.async="false" xmlDoc.load("authors.xml") document.write("<h1>This is the root element</h1>") alert(xmlDoc.documentElement.nodeName) alert(xmlDoc.documentElement.childNodes(0).nodeName) alert(xmlDoc.documentElement.childNodes.item(0).text) </script> </body> </html>

  19. Authors.xml…the rest in notes • <Authors> • <AuthorInfo> • <AuthorID>101</AuthorID> • <AuthorFName>Dwight</AuthorFName> • <AuthorLName>Peltzer</AuthorLName> • <AuthorAddress>PO Box 516</AuthorAddress> • <Auth_City>Some City</Auth_City> • <Au_State>NY</Au_State> • <Au_Zip>11564</Au_Zip> • <BusinessTelNo>516-111-1234</BusinessTelNo> • <Title>Professor of Computer Science</Title> • <Employer>Tech University</Employer>

  20. VBScript to pluck element names and text from xml

  21. The xml <root> <TeacherElement>CSCI</TeacherElement> <TeacherFName>Dennis</TeacherFName> <TeacherLName>Higgins</TeacherLName> <TeacherOffice>Fitzelle 239</TeacherOffice> <TeacherPhone>3552</TeacherPhone> </root>

  22. vbscript <script type="text/vbscript"> set xmlDoc=CreateObject("Msxml2.DOMDocument.3.0") xmlDoc.async="false" xmlDoc.load("teacherinfo.xml") document.write(xmlDoc.documentElement.childNodes(0).nodeName) document.write(":") document.write(xmlDoc.documentElement.childNodes(0).text) document.write("<br />") document.write(xmlDoc.documentElement.childNodes(0).nextSibling.nodeName) document.write(":") document.write(xmlDoc.documentElement.childNodes(0).nextSibling.text) document.write("<br />") document.write(xmlDoc.documentElement.childNodes(2).nodeName) document.write(":") document.write(xmlDoc.documentElement.childNodes(2).text) document.write("<br />") document.write(xmlDoc.documentElement.childNodes(3).nodeName) document.write(":") document.write(xmlDoc.documentElement.childNodes(3).text) document.write("<br />") document.write(xmlDoc.documentElement.childNodes(4).nodeName) document.write(":") document.write(xmlDoc.documentElement.childNodes(4).text) document.write("<br />") </script>

  23. Create an entire document

  24. The javascript <HTML> <HEAD><TITLE>DOM Demo</TITLE> <SCRIPT language="JavaScript"> var objDOM; objDOM = new ActiveXObject("Msxml2.DOMDocument.3.0"); objDOM.async = false; var objNode; var objFragment; <!-- create root element--> objNode = objDOM.createElement("root"); objDOM.appendChild(objNode); <!-- create the Document Interface Object to which other objects can be added --> objFragment = objDOM.createDocumentFragment(); <!-- Now create all child elements --> objNode = objDOM.createElement("FName"); <!-- append the child node --> objFragment.appendChild(objNode); <!-- create the text node for the child elements; Note the firstChild specifier --> objFragment.firstChild.appendChild(objDOM.createTextNode("Dennis")); objNode = objDOM.createElement("LName"); objFragment.appendChild(objNode); objFragment.lastChild.appendChild(objDOM.createTextNode("Higgins")); objNode = objDOM.createElement("Publisher"); objFragment.appendChild(objNode); objFragment.lastChild.appendChild(objDOM.createTextNode("WhoKnowzPress")); objNode = objDOM.createElement("Address"); objFragment.appendChild(objNode); objFragment.lastChild.appendChild(objDOM.createTextNode("592 Cty Rte 5")); objNode = objDOM.createElement("City"); objFragment.appendChild(objNode); objFragment.lastChild.appendChild(objDOM.createTextNode("Otego")); objNode = objDOM.createElement("State"); objFragment.appendChild(objNode); objFragment.lastChild.appendChild(objDOM.createTextNode("NY")); objNode = objDOM.createElement("ZipCode"); objFragment.appendChild(objNode); objFragment.lastChild.appendChild(objDOM.createTextNode("13825")); <!-- Finally add the elements to our document root element --> objDOM.documentElement.appendChild(objFragment); alert(objDOM.xml); </SCRIPT> </HEAD> <BODY> <P>Building an XML Document.</P> </BODY> </HTML>

  25. Linked at…

  26. DOM from javascript

  27. A Javascript form: slide 1 • The javascript code is in notes for this slideLink is: http://employees.oneonta.edu/higgindm/internet%20programming/jsDataFromForm2.html

  28. A Javascript form: slide 2

  29. DOM structure using javascriptDOM.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>A DOM Example</title> </head> <body> <script type = "text/javascript" language = "JavaScript"> var xmlDocument = new ActiveXObject( "Microsoft.XMLDOM" ); xmlDocument.load( "article.xml" ); // get the root element var element = xmlDocument.documentElement; document.writeln( "<p>Here is the root node of the document:" ); document.writeln( "<strong>" + element.nodeName + "</strong>" ); document.writeln( "<br>The following are its child elements:" ); document.writeln( "</p><ul>" ); // 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( "<li><strong>" + curNode.nodeName + "</strong></li>" ); }

  30. DOM.html file continued document.writeln( "</ul>" ); // get the first child node of root element var currentNode = element.firstChild; document.writeln( "<p>The first child of root node is:" ); document.writeln( "<strong>" + currentNode.nodeName + "</strong>" ); document.writeln( "<br>whose next sibling is:" ); // get the next sibling of first child var nextSib = currentNode.nextSibling; document.writeln( "<strong>" + nextSib.nodeName + "</strong>." ); document.writeln( "<br>Value of <strong>" + nextSib.nodeName + "</strong> element is:" ); var value = nextSib.firstChild; // print the text value of the sibling document.writeln( "<em>" + value.nodeValue + "</em>" ); document.writeln( "<br>Parent node of " ); document.writeln( "<strong>" + nextSib.nodeName + "</strong> is:" ); document.writeln( "<strong>" + nextSib.parentNode.nodeName + "</strong>.</p>" ); </script> </body> </html>

  31. Running DOM.html on article.xml <?xml version = "1.0"?> <!-- Fig. 8.2: article.xml --> <!-- Article formatted with XML --> <article> <title>Simple XML</title> <date>December 6, 2000</date> <author> <fname>Tem</fname> <lname>Nieto</lname> </author> <summary>XML is pretty easy.</summary> <content>Once you have mastered HTML, XML is easily learned. You must remember that XML is not for displaying information but for managing information. </content> </article>

  32. Running DOM.html (opens article.xml)

  33. javascript • modification of javascript program in Deitel text (in notes) lists children of root element and children of each of these. • run on myclass.xml database

  34. DOM for myclass.xml (from prev chpt notes)

  35. Replacing text in an xml document and rewriting the file • Dietel frequently uses the class com.sun.xml.tree.XmlDocument. This class is not part of java and you may (will!) have a hard time getting hold of it. It is nice, because it can be cast as a PrintWriter to write an xml file out. However, it is purposely not included in java because it is an internal class and subject to change. I figured out another way to do this using the transformer class, which is part of java. My way, unfortunately uses more code, so there is room for improvement. • My code appears in the notes. Here are the two changes to the text version: • In header: import javax.xml.transform.*; import javax.xml.transform.dom.DOMSource; • In code, to write file StreamResult result = new StreamResult(new FileOutputStream("tmp.xml")); transformer.transform(source, result);

  36. Original: <?xml version="1.0" encoding="UTF-8"?> <!-- Fig. 8.12 : intro.xml --> <!-- Simple introduction to XML markup --> <!DOCTYPE myMessage [ <!ELEMENT myMessage ( message )> <!ELEMENT message ( #PCDATA )> ]> <myMessage> <message>New Changed Message!!</message> </myMessage> New version. BTW, LFs are not in file!!! <?xml version="1.0" encoding="UTF-8"?> <!-- Fig. 8.12 : intro.xml --> <!-- Simple introduction to XML markup --> <myMessage> <message>some string</message> </myMessage> Original and rewritten xml

  37. A java program to create an xml fileBuildXML.java • The java program in notes creates the xml file (tmp2.xml) below. Uses transformer instead of XMLDocument class. <?xml version="1.0" encoding="UTF-8"?> <root> <!--This is a simple contact list--> <contact gender="F"> <FirstName>Sue </FirstName> <LastName>Green</LastName> </contact><?myInstruction action silent?> <![CDATA[I can add <, >, and ?]]> </root>

  38. Traversing the DOM tree with a java program: Input file • Uses the xml file simpleContact.xml <?xml version = "1.0"?> <!-- Fig 8.17 : simpleContact.xml --> <!-- Input file for traverseDOM.java --> <!DOCTYPE contacts [ <!ELEMENT contacts ( contact+ )> <!ELEMENT contact ( FirstName, LastName )> <!ATTLIST contact gender ( M | F ) "M"> <!ELEMENT FirstName ( #PCDATA )> <!ELEMENT LastName ( #PCDATA )> ]> <contacts> <contact gender = "M"> <FirstName>John</FirstName> <LastName>Black</LastName> </contact> <contact gender = "F"> <FirstName>Johanna</FirstName> <LastName>Nally</LastName> </contact> </contacts> <!---->

  39. Commandline • Java TraverseDOM simpleContact.xml

  40. Traversing the DOM tree with a java program: Output C:\PROGRA~1\JAVA\JDK15~1.0_0\BIN>java TraverseDOM simpleContact.xml Document node: #document Root element: contacts Element node: contacts Element node: contact Attribute: gender ; Value = M Element node: FirstName Text: John Element node: LastName Text: Black Element node: contact Attribute: gender ; Value = F Element node: FirstName Text: Johanna Element node: LastName Text: Nally C:\PROGRA~1\JAVA\JDK15~1.0_0\BIN>

  41. DOS window for previous slide

  42. DayPlanner using DOM • The next example revisits the DayPlanner example (modified to use DOM) • Examples from Deitel XML, examples, 8_18 directory.

  43. DOMEcho02 uses JTree to display DOM tree structure • Usage is • Path>java DOMEcho02 file.xml • Listing in notes

  44. DOMEcho02 uses JTree to display DOM tree structure

  45. DayPlanner using DOM

  46. MyTransformer, another java program • This program parses the xml, generates errors if any, displays the data content. • MyTransformer appears in notes • To run: Path>java MyTransformer input.xml output.xyz

  47. MyTransformer, another java program:input <?xml version = "1.0"?> <!-- Fig 8.17 : simpleContact.xml --> <!-- Input file for traverseDOM.java --> <!DOCTYPE contacts [ <!ELEMENT contacts ( contact+ )> <!ELEMENT contact ( FirstName, LastName )> <!ATTLIST contact gender ( M | F ) "M"> <!ELEMENT FirstName ( #PCDATA )> <!ELEMENT LastName ( #PCDATA )> ]> <contacts> <contact gender = "M"> <FirstName>John</FirstName> <LastName>Black</LastName> </contact> <contact gender = "F"> <FirstName>Johanna</FirstName> <LastName>Nally</LastName> </contact> </contacts> <!---->

  48. MyTransformer, another java program:output <?xml version="1.0" encoding="UTF-8"?><!-- Fig 8.17 : simpleContact.xml --><!-- Input file for MyTransformer.java --><contacts> <contact gender="M"> <FirstName>John</FirstName> <LastName>Black</LastName> </contact> <contact gender="F"> <FirstName>Johanna</FirstName> <LastName>Nally</LastName> </contact> </contacts><!---->

  49. Transformation2.java similar to TraverseDOM: listing in notes

  50. Another example

More Related