UFCEWT20 3 Advanced Topics in Web Development 201213
UFCEWT-20 -3 Advanced Topics in Web Development 2012/13 Lecture 2 : Understanding the Document Object Model (DOM)
DOM : What is it? An object-based, language-neutral, application programming interface (API) for XML and HTML documents - allows programs and scripts to build documents, navigate their structure, add, modify or delete elements and content - provides a foundation for developing querying, filtering, transformation, rendering etc. applications on top of DOM implementations In contrast to “Serial Access XML” (sax) a good way to think of the DOM is as “Directly Obtainable in Memory” (dom) objects representing the nodes, attributes and content of documents
DOM : What is it? (2) Based on O-O concepts: methods (to access or change object’s state) interfaces (declaration of a set of methods) objects (encapsulation of data and methods) Roughly similar to the XSLT/XPath data model a parse tree Tree-like structure implied by the abstract relationships defined by the programming interfaces; Does not necessarily reflect data structures used by an implementation (but probably does)
DOM : What is it? (3) o Language-independence: DOM interfaces are defined using OMG Interface Definition Language (IDL; Defined in Corba Specification) o Language bindings (implementations of DOM interfaces) defined in the Recommendation for Java and ECMAScript (standardised Java. Script)
DOM : Why? “Dynamic HTML" is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W 3 C has received several submissions from members companies on the way in which the object model of HTML documents should be exposed to scripts. These submissions do not propose any new HTML tags or style sheet technology. The W 3 C DOM Activity is working hard to make sure interoperable and scripting-language neutral solutions are agreed upon. W 3 C
DOM parts/levels (1) The DOM specification is separated into 3 different parts / levels: Core DOM - standard model for any structured document XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.
DOM parts/levels (2)
DOM parts/levels (3) o Level 0: Not really a standard level. Refers to models developed by browser vendors for handling documents prior to a standard. o Level 1: First recommendation from W 3 C for a DOM Standard. Includes two parts: a core (covers XML & HTML) and an HTMLonly section. o Level 2: Includes additions for events and style sheets. Supported by current versions of the most popular browsers. o Level 3: Events published 2012 – now complete. XPATH features added. see: https: //developer. mozilla. org/en-US/docs/DOM_Levels
DOM Level 1 : o Level 1 and subsequent DOM Levels perceive objects using a hierarchical view. Instead of identifying specific HTML tag names, this view works through the idea of nodes in a tree diagram. Each node has the potential to be a parent, sibling, or child node of other nodes in the document. This model may be a little trickier to program, at first, but saves us from having to know the names of all the elements in our document.
DOM Level 1 (HTML example) :
DOM Level 1 (xml example) : Example XML document <? xml version="1. 0" encoding="UTF-8"? > <patient nhs-no="7503557856"> <name> <first>Joseph</first> <middle>Michael</middle> <last>Bloggs</last> <previous /> <preferred>Joe</preferred> </name> <title>Mr</title> <address> <street>2 Gloucester Road</street> <street /> <city>Bristol</city> <county>Avon</county> <postcode>BS 2 4 QS</postcode> </address> <tel> <home>0117 9541054</home> <mobile>07710 234674</mobile> </tel> <email>joe. bloggs@email. com</email> <fax /> </patient>
DOM Level 1 (xml example) : DOM tree view of example XML document patient name nhs-no 7503557856 tel address title fax Mr first middle last Joseph Michael Bloggs previous preferred Joe street 1 street 2 2 Gloucester Rd street 3 city county postcode Bristol Avon BS 2 4 QS home 01179541054 mobile 07710234674 KEY element content attribute
xpath axes (node sets) xpath has thirteen axis child parent descendent ancestor descendent-of-self ancestor-of-self following-sibling preceding-sibling following preceding attribute namespace self
DOM suggestions & recommendations : o All pages must be well-formed (XHTML/HTML) documents. o All pages must include a valid DOCTYPE. o You must include all text inside valid HTML/XHTML elements. o Identify relevant elements using the id attribute.
The HTML/XHTML id Attribute o id is an HTML/XHTML attribute that provides an internal identifier for an HTML/XHTML element (tag). o When can use the id attribute to uniquely identify an element in order to read and/or manipulate its contents.
- Slides: 15