1. CS 371 Web Application Programming
JavaScript - DOM
Modifying the Page from within
CS 371 Web Application Programming

2. JavaScript events events are associated with many elements of a page
<li onclick=“funct(1)”>blah…</li>
events associated with click, double-click, focus, errors keyboard, hover, mousemove, resize, scroll,…
return false to cancel the default action (submitting a form, following a link, etc)
events will be fired all the way up the chain (e.g. li, then ul, then div, then document…)
CS 371 Web Application Programming

3. replace the content of a tag with html code example:
innerHTML
replace the content of a tag with html code
example:
var obj=document.getElementById(“myId”);
obj.innerHTML=“<p class='wow'>wassup</p>”
CS 371 Web Application Programming

4. JavaScript DOM JavaScript built-in objects Intro to the DOM
collections
methods
techniques:
insert html
modify table or list values
change structure of tables or lists
change form elements
CS 371 Web Application Programming

5. Document Object Model contains collections, objects, methods
anchors[ ] - all anchor tags
forms[ ] - information about forms
images[ ] - about images
links[ ] - includes <a> and <area> tags
objects (document.cookie, .title, etc.)
methods like getElementsByTagName
CS 371 Web Application Programming

6. JavaScript DOM document methods
document.write
inserts text in the web page
data is written at the point it is executed
document.open, close
open starts a new document
close ends it and displays the new document
CS 371 Web Application Programming

7. JavaScript DOM document properties
document.cookie – saw this earlier
document.domain
document.readyState
is the page still loading?
document.title
others…
CS 371 Web Application Programming

8. JavaScript DOM document methods (cont.)
document.getElementsByTagName
document.getElementById
document.getElementsByName
example
in javascript: document.getElementById(“x”).innerHTML= “<b>wow</b>”
in html: <div id=“x></div>
CS 371 Web Application Programming

9. JavaScript DOM document methods (cont.)
assign to objects:
var divObj=document.getElementById(“x”);
divObj.innerHTML=“stuff”
properties:
attributes[ ]
childNodes[ ]
firstChild
nodeValue
style
many others…
CS 371 Web Application Programming

10. JavaScript DOM document methods (cont.)
attributes
var divObj=document.getElementById(“x”);
if(divObj.attributes[0].nodeName==“alt”);
alert(divObj.attributes[i].nodeValue);
divObj.setAttribute(“class”,”pizzaz”);
divObj.removeAttribute(“align”);
CS 371 Web Application Programming

11. JavaScript DOM document methods (cont.)
child elements:
var divObj=document.getElementById(“x”);
alert(divObj.childNodes[0].nodeValue);
for(var i=0; i<divObj.childNodes.length; i++) divObj.removeChild(0);
divObj.appendChild(document.createElement (“p”));
var txt=document.createTextNode(“Stuff”);
divObj.childNodes[0].appendChild(txt);
CS 371 Web Application Programming

12. JavaScript DOM table properties
cells[ ]
rows[ ]
border, bgColor, etc
tr properties
methods
table: insertRow(x), deleteRow(x), moveRow
tr: insertCell, deleteCell
CS 371 Web Application Programming

13. JavaScript DOM table examples
insert rows
var tab=document.getElementsByTagName (“table”)[0];
var myRow=tab.insertRow(-1);
var myCell=myRow.insertCell(0);
myCell.appendChild( document.createTextNode(“cell data”));
delete rows
tab.deleteRow(0);
CS 371 Web Application Programming