© De Montfort University, Document Object Model Howell Istance School of Computing De Montfort University

© De Montfort University, What is the DOM? DOM is Document Object Model A standard way to refer to objects on a Web page The W3C DOM1 replaces proprietary DOMs from Netscape and Microsoft As the version (and source) of DOM varies between browsers, writing robust code to run on any browser is problematical!

© De Montfort University, Nodes in DOM An object in DOM1 is called a node. Same node types as xml Element nodes (,, etc.) Text nodes (text contained by element nodes) Attribute nodes (align=“center”)

© De Montfort University, Visualising Nodes

© De Montfort University, Things to do with nodes Change the text of nodes Add and remove text nodes Create element nodes to dynamically style content Change the value of attribute nodes Test for browser

© De Montfort University, Span elements and id attributes this is some text, doesn’t really matter what this is some text, doesn’t really matter what Methods and properties of object accessed via name “pText” New object “oneword” of class span created with text node “doesn’t”, parent is “pText”

© De Montfort University, Object hierarchy ‘window’ object contains –‘document’ object –‘navigator’ object Objects have properties and methods – these vary according to the version and source of DOM used Objects contain children objects Objects manipulated using script (JavaScript usually)

© De Montfort University, DOM Nodes function changeGreeting(){ var theNode = document.getElementById("greeting"); var newGreeting = window.prompt("Type a greeting.","Hej!"); theNode.firstChild.nodeValue = newGreeting; } Hi! My name is Joe Bloggs Change Greeting!

© De Montfort University, Things to note Use of span to create object named “greeting” document method ( GetElementById() ) to get the span node window method ( prompt() ) to open a message box and return a value Use of firstChild to reference child node of theNode Use of nodeValue property to access value of text node

© De Montfort University, function getBrowserInfo(){ var UA = navigator.userAgent.toLowerCase(); var isIE = (UA.indexOf('msie')>=0) ? true : false; if (!isIE){ var isNS = (UA.indexOf('mozilla')>=0)?true :false;} else{ var isNS = false;} var version = navigator.appVersion; var output = " "; output += "User Agent: " + UA + " "; output += "Internet Explorer " + isIE + " "; output += "Netscape Navigator " + isNS + " "; output += "Version: " + version + " "; output += " "; return output; } document.write(getBrowserInfo());

© De Montfort University, Things to note… Use of Navigator properties, userAgent and appVersion Syntax of conditional assignment statement Boolean variables isIE and isNS which can be used in other functions when using a browser-specific technology

© De Montfort University, Navigator Object –Supported by Netscape Navigator DOM and Internet Explorer DOM –navigator object contains info about the Web browser viewing the page –navigator.appName contains the name of the application “ Microsoft Internet Explorer ” “ Netscape ” –Value of navigator.appVersion not a simple integer Contains other info, such as OS

© De Montfort University, Building a Playlist function start(){ var theNode = document.getElementById("playlist"); for(n = 0; n< playlistitems.length; n++){ var newelem= document.createElement("li"); var thistextnode = document.createTextNode(playlistitems[n].artist_name); newelem.appendChild(thistextnode); theNode.appendChild(newelem); } My JukeBox

© De Montfort University, Things to note… (assumes the existence of an Array, called playlistitems, containing url of sound clip, url of artist picture, artist_name) Use of document.createElement() to create new li element Use of theNode.appendChild() to add this element to the ol element called ‘ playlist ’ Use of for loop to iterate over the playlistitems array Method is called in response to the ‘onload’ event occuring in the ‘body’ element of the document.

© De Montfort University, innerHTML method Enables a string of HTML to be added as the content of a named object Very useful, but this is an IE method only – doesn’t work in Netscape Navigator playliststring = "Play List... "; for(n = 0; n< playlistitems.length; n++){ playliststring = playliststring + " + playlistitems[n].artist_name; } playliststring = playliststring + " "; playlist.innerHTML = playliststring;

© De Montfort University, Event ONLOAD ONLOAD event –Fires when element finishes loading successfully –Often used in BODY tag Initiate scripts as soon as page loads

© De Montfort University, DHTML Event Model function updateMouseCoordinates(){ coordinates.innerText = event.srcElement.tagName + "(" + event.offsetX + "," + event.offsetY + ")"; } (0,0)

© De Montfort University, Tracking the Mouse with Event ONMOUSEMOVE ONMOUSEMOVE event –Fires constantly whenever mouse in motion event object –Contains info about triggered event –srcElement Pointer to element object that triggered event –offsetX and offsetY Give location of mouse cursor relative to top-left corner of object in which event triggered

© De Montfort University, Object tag… IMG element, ‘empty’- no content, only attributes Netscape provided EMBED tag, adopted by MS, but not standard HTML (ie not recognised by W3C) In HTML 4.0, OBJECT tag provided to accommodate new media types OBJECT has content, content is NOT the media element content only displayed if user-agent is unable to display the object

© De Montfort University, Example of use of Object tag.. <OBJECT data = “movies/clip2.mov” type = “video/quicktime”> <OBJECT data = “images/still2.jpg” type = “image/jpg”> A 5 second video clip

© De Montfort University, Example of use of Object tag.. <EMBED SRC="rtsp://lapis/hoi/rory_irishtour.rm" NAME= "jukebox2" TYPE="audio/x-pn-realaudio-plugin" CONSOLE="Clip1" CONTROLS="ControlPanel" HEIGHT=36 WIDTH=350 AUTOSTART=false>

© De Montfort University, What the Object tag tries to do…