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

3. © De Montfort University, 20032 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!

4. © De Montfort University, 20033 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”)

5. © De Montfort University, 20034 Visualising Nodes

6. © De Montfort University, 20035 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

7. © De Montfort University, 20036 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”

8. © De Montfort University, 20037 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)

9. © De Montfort University, 20038 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!

10. © De Montfort University, 20039 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

11. © De Montfort University, 200310 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());

12. © De Montfort University, 200311 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

13. © De Montfort University, 200312 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

14. © De Montfort University, 200313 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

15. © De Montfort University, 200314 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.

16. © De Montfort University, 200315 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;

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

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

19. © De Montfort University, 200318 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

20. © De Montfort University, 200319 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

21. © De Montfort University, 200320 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

22. © De Montfort University, 200321 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>

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