1. Lecture 2 : Understanding the Document Object Model (DOM) UFCFR5-15-3 Advanced Topics in Web Development II 2014/15 SHAPE Hong Kong

2. 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

3. Based on O-O concepts: methodsmethods (to access or change object’s state) interfacesinterfaces (declaration of a set of methods) objectsobjects (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? (2)

4. o Language-independence: DOM interfaces are defined using OMG Interface Definition Language (IDL; Defined in Corba Specification) Corba Specification o Language bindings (implementations of DOM interfaces) defined in the Recommendation for Java and ECMAScriptECMAScript (standardised JavaScript) DOM : What is it? (3)

5. “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 W3C 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 W3C DOM Activity is working hard to make sure interoperable and scripting-language neutral solutions are agreed upon. W3C DOM : Why?

6. 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 (1)

7. DOM parts/levels (2)

8. 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 W3C for a DOM Standard. Includes two parts: a core (covers XML & HTML) and an HTML- only 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 parts/levels (3)

9. 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 :

10. DOM Level 1 (HTML example) :

11. Example XML document Joseph Michael Bloggs Joe Mr 2 Gloucester Road Bristol Avon BS2 4QS 0117 9541054 07710 234674 joe.bloggs@email.com DOM Level 1 (xml example) :

12. patient name title address fax tel first middle last previous preferred street1 street2 street3 city county postcode home mobile JosephMichaelBloggs Joe 2 Gloucester Rd BristolAvon BS2 4QS 01179541054 07710234674 Mr nhs-no 7503557856 KEY element content attribute DOM tree view of example XML document DOM Level 1 (xml example) :

13. 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

14. 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. DOM suggestions & recommendations :

15. 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. The HTML/XHTML id Attribute