CO1552 – Web Application Development Further JavaScript: Part 1: The Document Object Model Part 2: Functions and Events

Overview Part 1: The Document Object Model How the browser “structures” your pages, HTML and JavaScript Part 2: JavaScript Events and Event Handlers How the browser can react to user input

Part 1: The Document “Object Model” DOM standard is set by the World Wide Web ConsortiumWorld Wide Web Consortium Historically there have been 3 standards: Levels 0,1 and 2. Level 2 is current. The standard is described here: /introduction.html /introduction.html

The Document “Object Model” The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents.APIHTMLXML It defines the logical structure of documents and the way a document is accessed and manipulated.

An example Shady Grove Aeolian Over the River, Charlie Dorian

Model of the example Nodes

Tree Documents have a logical structure which branches like a tree Documents are modelled using objects (remember these from programming!) The “model” encompasses not only the structure of a document, but also its behaviour and the objects of which it is composed Models do not represent a data structure, they represent objects, which have functions and identity.

Parents and children Objects higher in the tree are parents to those below Objects lower down are children of those above Access is hierarchical, you have to access child objects via the parent object

Another example This is the title This is a sample paragraph. Draw the tree now to understand the relationships – we will use it later

Parent nodes and child nodes Document HTML Body Paragraph Head Child of “document” Child of “HTML” Parent of “HTML” Parent of “Head” and “Body” Parent of “paragraph” Child of “body” Title Child of “head” Parent of “title”

An Object is: A scriptable entity maintained in the browser’s memory when a document is loaded Described by properties, methods, collections (arrays) of nested items, and event handlers

Examples of objects Document represents the entire HTML or XML document it is the root of the document treeroot provides the primary access to the document's data elements, text nodes, comments, processing instructions, etc. cannot exist outside the context of a document

Why do I need to know about this? Remember that a Document Object is a scriptable entity To be able to make our HTML interactive using JavaScript, we need to have objects to work on We need to know what the entities are So we can script them!

Examples of scriptable objects Document Window Body H1 and its friends Paragraph Image Form Table All of the structural elements have attributes (properties) and can be manipulated by methods

Our example again: This is the title This is a sample paragraph.

Scripting alert(document.documentElement.lastChild.firstChild.tagName); Will produce a JavaScript alert showing P document.documentElement - gives the page's HTML tag..lastChild - gives the BODY tag..firstChild - gives the first element in the BODY..tagName - gives that element's tag name, "P" in this case.

Can we do something useful now please? To sum up so far (Part 1) JavaScript can make use of the objects within a document You can access these objects and manipulate them using simple statements This is why JavaScript is NOT a programming language It can only use the objects that are recognised in the browser’s “model” – it can’t format your hard drive, for example!