© de montfort university, 20031 document object model howell istance school of computing de...

© De Montfort University, 2003 1

Document Object Model

Howell Istance

School of Computing

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!


Nodes in DOM

• An object in DOM1 is called a node.

• Same node types as xml

• Element nodes (<p>, <h1>, etc.)

• Text nodes (text contained by element nodes)

• Attribute nodes (align=“center”)


Visualising Nodes


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


Span elements and id attributes

<p> this is some text, doesn’t really matter what </p>

<p id=“pText” > this is some text, doesn’t really matter what </p>

<p id=“pText”> this is some text,

<span id=“oneword>doesn’t </span> really matter what </p>

Methods and properties of <p> object accessed via name “pText”

New object “oneword” of class span created with text node “doesn’t”, parent is “pText”


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)


<html>

<head>

<title>DOM Nodes</title>

<script type="text/javascript" language="Javascript">

function changeGreeting(){

var theNode = document.getElementById("greeting");

var newGreeting = window.prompt("Type a greeting.","Hej!");

theNode.firstChild.nodeValue = newGreeting;

}

</script>

</head>

<body>

<p><span id="greeting">Hi!</span> My name is Joe Bloggs </p>

<p><a href="javascript:changeGreeting();">Change Greeting!</a></p>

</body>

</html>


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


<html><head><script type="text/javascript" language="Javascript">

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 = "<p>";

output += "User Agent: " + UA + "<br>";

output += "Internet Explorer " + isIE + "<br>";

output += "Netscape Navigator " + isNS + "<br>";

output += "Version: " + version + "<br>";

output += "</p>";

return output; }

</script></head>

<body>

<script type="text/javascript" language="Javascript"> document.write(getBrowserInfo());

</script></body></html>


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


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


Building a Playlistfunction 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);

}

}</script> </head>

<body onload=start()>

<table> <tr>

<td>My JukeBox <br>

<ol id = "playlist"></ol> </td>

</tr>


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.


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...<br><ol>";

for(n = 0; n< playlistitems.length; n++){

playliststring = playliststring + "<li> + playlistitems[n].artist_name;

}

playliststring = playliststring + "</ol>";

playlist.innerHTML = playliststring;


Event ONLOAD

• ONLOAD event– Fires when element finishes loading successfully

– Often used in BODY tag• Initiate scripts as soon as page loads


<html><head><title>DHTML Event Model</title>

<script type="text/javascript" language="Javascript">

function updateMouseCoordinates(){

coordinates.innerText = event.srcElement.tagName + "("

+ event.offsetX + "," + event.offsetY + ")";

}</script>

</head>

<body onMouseMove= "updateMouseCoordinates()">

<span id="coordinates">(0,0)</span><br>

<img src="start.jpg" style="position:absolute; top:100; left:100;">

</body>

</html>


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


Object tag…

• IMG element, ‘empty’- no content, only attributes

• <IMG src = “still1.jpg”>

• 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


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

</OBJECT>

</OBJECT>


Example of use of Object tag..

<OBJECT ID=jukebox1 CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT= 36 WIDTH=350>

<PARAM NAME="controls" VALUE="ControlPanel">

<PARAM NAME="console" VALUE="Clip1">

<PARAM NAME="autostart" VALUE="false">

<PARAM NAME="src" VALUE="rtsp://lapis/hoi/rory_irishtour.rm"> <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>

</OBJECT>


What the Object tag tries to do…

<OBJECT try rendering the clip with an ActiveX control >

<EMBED if that doesn’t work, try using a plugin instead>

</OBJECT>

© de montfort university, 20031 document object model howell istance school of computing de...

Documents