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.

Slides:



Advertisements
Similar presentations
Copyright © 2003 Pearson Education, Inc. Slide 8-1 Created by Cheryl M. Hughes, Harvard University Extension School Cambridge, MA The Web Wizards Guide.
Advertisements

The Document Object Model
XML: Extensible Markup Language
Introducing XML : Table of Contents 1. From HTML to XML 2. Well-Formed XML 3. Validity / DTDs 4. Encodings 5. XML Namespaces 6. XML Schema 7. XML Tools.
Lesson 12- Unit L Programming Web Pages with JavaScript.
File Management Chapter 12. File Management File management system is considered part of the operating system Input to applications is by means of a file.
1 Extensible Markup Language: XML HTML: portable, widely supported protocol for describing how to format data XML: portable, widely supported protocol.
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.
3 November 2008CIS 340 # 1 Topics To define XML as a technology To place XML in the context of system architectures.
1 Extensible Markup Language: XML HTML: portable, widely supported protocol for describing how to format data XML: portable, widely supported protocol.
AJAX (Asynchronous JavaScript and XML) Amit Jain CS 590 – Winter 2008.
SD2520 Databases using XML and JQuery
XML files (with LINQ). Introduction to LINQ ( Language Integrated Query ) C#’s new LINQ capabilities allow you to write query expressions that retrieve.
XP New Perspectives on XML Tutorial 3 1 DTD Tutorial – Carey ISBN
Pemrograman Berbasis WEB XML part 2 -Aurelio Rahmadian- Sumber: w3cschools.com.
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.
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)
XML CPSC 315 – Programming Studio Fall 2008 Project 3, Lecture 1.
XP New Perspectives on XML Tutorial 6 1 TUTORIAL 6 XSLT Tutorial – Carey ISBN
XP 1 CREATING AN XML DOCUMENT. XP 2 INTRODUCING XML XML stands for Extensible Markup Language. A markup language specifies the structure and content of.
WORKING WITH XSLT AND XPATH
XP New Perspectives on XML, 2 nd Edition Tutorial 10 1 WORKING WITH THE DOCUMENT OBJECT MODEL TUTORIAL 10.
Lecture 2 : Understanding the Document Object Model (DOM) UFCFR Advanced Topics in Web Development II 2014/15 SHAPE Hong Kong.
DOM and JavaScript Aryo Pinandito.
Lecture 11 – DOM Scripting SFDV3011 – Advanced Web Development Reference: 1.
1 © Netskills Quality Internet Training, University of Newcastle Introducing XML © Netskills, Quality Internet Training University.
JavaScript Programming B.Ramamurthy 6/113/2014B. Ramamurthy CSE6511.
Review IDIA 619 Spring 2013 Bridget M. Blodgett. HTML A basic HTML document looks like this: Sample page Sample page This is a simple sample. HTML user.
What is XML?  XML stands for EXtensible Markup Language  XML is a markup language much like HTML  XML was designed to carry data, not to display data.
Electronic Commerce COMP3210 Session 4: Designing, Building and Evaluating e-Commerce Initiatives – Part II Dr. Paul Walcott Department of Computer Science,
Working with the XML Document Object Model ©NIITeXtensible Markup Language/Lesson 7/Slide 1 of 44 Objectives In this lesson, you will learn to: *Identify.
The XML Document Object Model (DOM) Aug’10 – Dec ’10.
JavaScript – The DOM JavaScript is object based The browser is object based – We can access the browser's objects in the same way we did JavaScript's Two.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
5.2 DOM (Document Object Model). 2 Motto: To write it, it took three months; to conceive it three minutes; to collect the data in it — all my life. —F.
Web-based Programming Lanjut Pertemuan 9 Matakuliah: M0492 / Web-based Programming Lanjut Tahun: 2007.
Copyrighted material John Tullis 10/17/2015 page 1 04/15/00 XML Part 3 John Tullis DePaul Instructor
Consuming eXtensible Markup Language (XML) feeds.
Introduction to XML This presentation covers introductory features of XML. What XML is and what it is not? What does it do? Put different related technologies.
DOM Programming The Document Object Model standardises  what an application can see of the XML data  how it can access it An XML structure is a tree.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
C# and Windows Programming XML Processing. 2 Contents Markup XML DTDs XML Parsers DOM.
1 Dr Alexiei Dingli XML Technologies SAX and DOM.
SDPLNotes 3.2: DOM1 3.2 Document Object Model (DOM) n How to provide uniform access to structured documents in diverse applications (parsers, browsers,
Introduction to the Document Object Model Eugenia Fernandez IUPUI.
Review of the DOM Node properties and methods Some ways of accessing nodes Appending, copying and removing nodes Event handling – Inline – Scripting –
 defined as Extensible Markup Language (XML) is a set of rules for encoding documents  Defines structure and data.
CO1552 – Web Application Development Further JavaScript: Part 1: The Document Object Model Part 2: Functions and Events.
DOM (Document Object Model) - Parsing and Reading HTML and XML -
Document Object Model (DOM). Outline  Introduction of DOM  Overview of DOM  DOM Relationships  Standard DOM.
Document Object Model.  The XML DOM (Document Object Model) defines a standard way for accessing and manipulating XML documents.  The DOM presents an.
Create Element, Remove Child. The Document Tree Document Element Root Element Element Element Element Element Text: HelloWorld Attribute “href”
JS: Document Object Model (DOM) DOM stands for Document Object Model, and allows programmers generic access to: DOM stands for Document Object Model, and.
XML DOM  XML Document Object Model provides a robust international standard for XML Documents.  DOM Level 1 is a Dec 11, 1998 W3C recommendation.  XML.
XML DOM Week 11 Web site:
21-Jun-16 Document Object Model DOM. SAX and DOM SAX and DOM are standards for XML parsers-- program APIs to read and interpret XML files DOM is a W3C.
Week-9 (Lecture-1) XML DTD (Data Type Document): An XML document with correct syntax is called "Well Formed". An XML document validated against a DTD is.
ISC321 Database Systems I Chapter 2: Overview of Database Languages and Architectures Fall 2015 Dr. Abdullah Almutairi.
DHTML.
Programming Web Pages with JavaScript
Unit M Programming Web Pages with
Introduction to the Document Object Model
DOM Robin Burke ECT 360.
Week 11 Web site: XML DOM Week 11 Web site:
DOM Document Object Model.
DOM Document Object Model.
In this session, you will learn to:
More Sample XML By Sadia Anjum.
Document Object Model (DOM): Objects and Collections
Presentation transcript:

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 documents. It allows access to all the parts of XML documents, i.e. the document, its root element, child elements, attributes, etc. The DOM also provides methods that allow manipulations, additions, and deletions to the original document. Without DOM, XML would be nothing more than a storage system for data. Generally, DOMs can follow one of three patterns: Linear, Tree, or Object Models.

Linear Models: Simplest model, detailing the document in a linear fashion. Illustration: Consider if I said Go to page 100 of a book, go to line 10, and read the 1 st word. The problem with this is that if I altered the earlier section of the book, it would invalidate all previous references to the latter sections of the book. Tree Models Describes the document in terms of a tree, and each item on the tree is referred to as a node. Terminal items are regarded as leaves. It describes a root element, and child nodes. A parent node refers to an immediately preceding node, and sibling nodes have the same parent

An advantage of the tree is that any part of the document can be reached by walking the tree Tree nodes are not as sensitive to change like the linear model, but are still somewhat sensitive in the sense that if a complete node was removed, the relationship between remaining nodes might be altered. Using the book analogy, I would perhaps say Go to the 1 st item of the 2 nd paragraph of the 4 th chapter. Object Models Least sensitive to change. Each section of a document has a name property, hence even when the document changes, the model would still be valid. The W3C DOM is a combination of the Tree and Object models.

Example of a Document tree: Simple XML Document: James Blogg Document tree: Document Element VersionCommentElement Text

The W3C DOM The specification for the W3C DOM can be found at It implements the language of the OMG IDL (Object Management Group Interface Definition Language). OMG IDL is a language that allows applications to communicate with each other even if they are written in different programming languages. Under the IDL, objects expose various interfaces. Each interface has a series of attributes that describe the properties of the object behind that interface. The object can also be operated on by methods that activate functions behind the interface. These methods will return some kind of value to the requesting application. Together, the attributes and methods constitute the API of that object.

DOM Objects An object that supports DOM must be capable of loading an XML document into itself. It must also be able to expose all the interfaces with the appropriate attributes and methods, as laid out in the DOM specification. DOM Interfaces DOMImplementation: This is a query to the object itself, and is independent of the document loaded into it. Document: This interface provides information about the document that has been loaded into the object. Node: Everything in a document can be considered as a node of the document, i.e. elements, comments, etc. It contains several attributes and methods for manipulating any kind of node.

NodeList: This is an ordered collection of nodes that can be accessed using an index. NamedNodeMap: Collection of nodes that can be accessed by name. CharacterData: Deals with the text of the document. Attr: Deals with the XML attributes of a node. However, it is not represented in the tree structure as it is considered to be a property of its element. Element: Most nodes of an XML document will be elements. The Element interface has properties and methods for dealing with elements and their XML attributes Text: Deals with the text content of an element CDATASection, Notation, Entity, EntityReference and Processing instructions interfaces all deal with their namesake nodes.

Before considering DOM interfaces in detail, Ill introduce the concept of XML Data Source Objects (DSO), as well use this in the examples on DOM interfaces. Consider the following HTML file: XML DSO var MyDoc=isle; var rootEl=MyDoc.documentElement; document.write(rootEl.nodeName);

The example demonstrates the creation of an XML DSO or data island within an HTML file, with the use of the xml element. Note that the xml element is a proprietary element of IE5, and will not work on other browsers. The same xml file can be referenced with the src attribute of the xml element, i.e. XML DSO var MyDoc=isle; var rootEl=MyDoc.documentElement; document.write(rootEl.nodeName);

The Document Interface Returns information about the document. It has the following read-only attributes: doctype: Returns the <!DOCTYPE information in the document, with the exception of information on the DTD. implementation: Returns the implementation node. Has a boolean method called hasFeatures( ) which takes 2 parameters: type of document (HTML or XML) and version. documentElement: Most important attribute of the Document interface because it returns the root element of the document. Its an ideal starting point if youre walking the tree to access a node. Document Interface Methods createElement( ) createDocumentFragment( ) createTextNode( )

createComment( ) createCDATASection( ) createProcessingInstruction( ) createAttribute( ) createEntityReference( ) getElementsByTagName( ): Gets a list of all the elements of that name, passed to it as an argument. It returns a NodeList object. Widely used in search routines. Accessing Nodes in DOM There are 2 ways of accessing nodes in DOM. Walking the Tree: Start anywhere in the DOM, and use methods of the DOM node interface such as parentNode( ), firstChild, nextSibling and previousSibling. Accessing nodes by name: This approach uses the getElementsByTagName( ) method to get a list of elements of that name.

Example: XML Example Tony Benn 210 Temple road London NW9 0RT Mary Blair 20 St James road London SE4 0RT

var myDoc=isle; var contactList=myDoc.getElementsByTagName('contact'); for (var i=0; i<contactList.length; i++) {document.write(contactList.item(i).firstChild.firstChild.nodeValue); document.write(' '); document.write(contactList.item(i).firstChild.nextSibling.firstChild.nodeValue); document.write(' '); }

The above listing would output: Tony Benn 210 Temple road Mary Blair 20 St James road The Document Fragment Interface An utility interface that creates a subsection of the document, which can subsequently be inserted into the main document. Particularly useful when youre creating a lot of new elements. If you created the new elements in the main document directly, the node list would have to be updated each time. With a DFI, the node list only has to be updated once.

The Node Interface This is the key interface of DOM, as everything in a document can be considered as a node. Has the following read-only attributes: nodeName: E.g the name of the tag nodeValue: Null for elements, Content of a text node nodeType: Element, Attr, Text, etc parentNode childNodes: Returns a node list of all child nodes of the element firstChild lastChild previousSibling nextSibling attributes: Works only with element type nodes. Returns a NamedNodeMap of all the attributes. ownerDocument

Methods of the Node Interface All except the hasChildNodes( ) and cloneNode( ) take one or more node objects as parameters. Prior to using the insertBefore( ), replaceChild( ), or appendChild( ) methods, you would have created a new node with one of the document methods or by the cloneNode( ) method. The insertBefore method( ): Inserts the new child node before the reference node. var dummy; dummy=node_object.insertBefore(new_node, reference_node) The replaceChild method( ): Replaces the reference node, and returns the replaced node.

The appendChild( ) method: Appends the new node to the end of the reference node The hasChildNodes method( ): This is a Boolean that checks whether a node has child nodes The cloneNode method( ): Makes a duplicate of the cloned node. Example of using node methods: var dummy; var myDoc=isle; var new_element=myDoc.createElement(' '); var rootEl=myDoc.documentElement; dummy=rootEl.appendChild(new_element); alert('I have just created a new element called '+dummy.nodeName);

The CharacterData Interface Contains attributes and methods for accessing and editing strings in nodes that take a string value, e.g text and comment nodes. Contains the following attributes: The data attribute: Returns all the text in the node as a Unicode string. Length: Returns the number of characters in the string. It has the following methods (all self-explanatory): subStringData( ) method appendData( ) method insertData( ) method deleteData( ) method replaceData( ) method

The Element Interface Most of the nodes in a document belong to the element or text interfaces. However, the node interface deals with most of the operations on elements, and the CharacterData interface handles most operations on text nodes. The majority of the element interface attributes and methods are therefore concerned with managing its XML attributes properties. Methods: getAttribute( ): Retrieves an attributes value by name setAttribute( ): Creates an attribute, and sets its value at once removeAttribute( ) getAttributeNode( ): When passed a name, it retrieves the Attr node.

setAttributeNode( ) removeAttributeNode( ) getElementsByTagName( ): Similar to when used in the document interface. The Attr Interface Represents an attribute of an element object. They are not considered as part of the document tree, but as properties of their elements. As such, they are accessed by methods of the element interface Has the following attributes: name: The name of the attribute value: Its value specified: A Boolean value that returns true if the attribute has been assigned a value, either in the original document, or by code.

References: XML Unleashed, Morrison, et al. Chapter 15 Internet & World wide web How to Program, Dietel, Dietel and Nieto. Chapter 20.