UFCEUS-20-2 : Web Programming

UFCEUS-20-2 : Web Programming 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) • Language-independence: • DOM interfaces are defined using OMG Interface Definition Language (IDL; Defined in Corba Specification) • Language bindings (implementations of DOM interfaces) defined in the Recommendation for • Java and • ECMAScript (standardised JavaScript)

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 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 parts/levels (1) The DOMspecification 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) • Level 0: Not really a standard level. Refers to models developed by browser vendors for handling documents prior to a standard. • Level 1: First recommendation from W3C for a DOM Standard. Includes two parts: a core (covers XML &HTML) and an HTML-only section. • Level 2: Includes additions for events and style sheets. Supported by current versions of the most popular browsers. • Level 3: Events published 2012 – now complete. XPATH features added. • see: https://developer.mozilla.org/en-US/docs/DOM_Levels

DOM Level 1 : • 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 /> <street /> <city>Bristol</city> <county>Avon</county> <postcode>BS2 4QS</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 nhs-no 7503557856 address fax title name tel Mr first previous middle last preferred street1 street2 street3 city county postcode BS2 4QS Bristol Avon 2 Gloucester Rd Joseph Michael Bloggs Joe mobile home 07710234674 01179541054 KEY element attribute content

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 : • All pages must be well-formed(XHTML/HTML) documents. • All pages must include a valid DOCTYPE. • You must include all text inside valid HTML/XHTML elements. • Identify relevant elements using the idattribute.

The HTML/XHTML id Attribute • id is an HTML/XHTML attribute that provides an internal identifier for an HTML/XHTML element (tag). • When can use the id attribute to uniquely identify an element in order to read and/or manipulate its contents.

UFCEUS-20-2 : Web Programming