© De Montfort University, 20031 Document Object Model Howell Istance School of Computing De...
-
date post
22-Dec-2015 -
Category
Documents
-
view
222 -
download
1
Transcript of © 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
© De Montfort University, 2003 2
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, 2003 3
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”)
© De Montfort University, 2003 4
Visualising Nodes
© De Montfort University, 2003 5
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, 2003 6
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”
© De Montfort University, 2003 7
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, 2003 8
<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>
© De Montfort University, 2003 9
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, 2003 10
<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>
© De Montfort University, 2003 11
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, 2003 12
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, 2003 13
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>
© De Montfort University, 2003 14
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, 2003 15
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;
© De Montfort University, 2003 16
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, 2003 17
<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>
© De Montfort University, 2003 18
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, 2003 19
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
© De Montfort University, 2003 20
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>
© De Montfort University, 2003 21
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>
© De Montfort University, 2003 22
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>