School of Computing and Information Systems CS 371 Web Application Programming JavaScript - DOM Modifying the Page from within

School of Computing and Information Systems CS 371 Web Application Programming JavaScript events events are associated with many elements of a page blah… 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…)

School of Computing and Information Systems CS 371 Web Application Programming innerHTML replace the content of a tag with html code example: var obj=document.getElementById(“myId”); obj.innerHTML=“ wassup ”

School of Computing and Information Systems CS 371 Web Application Programming 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

School of Computing and Information Systems CS 371 Web Application Programming Document Object Model contains collections, objects, methods collections: anchors[ ] - all anchor tags forms[ ] - information about forms images[ ] - about images links[ ] - includes and tags objects (document.cookie,.title, etc.) methods like getElementsByTagName

School of Computing and Information Systems CS 371 Web Application Programming 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

School of Computing and Information Systems CS 371 Web Application Programming JavaScript DOM document properties document.cookie – saw this earlier document.domain document.readyState is the page still loading? document.title document.domain others…

School of Computing and Information Systems CS 371 Web Application Programming JavaScript DOM document methods (cont.) document.getElementsByTagName document.getElementById document.getElementsByName example in javascript: document.getElementById(“x”).innerHTML= “ wow ” in html:

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

School of Computing and Information Systems CS 371 Web Application Programming 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”);

School of Computing and Information Systems CS 371 Web Application Programming 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);

School of Computing and Information Systems CS 371 Web Application Programming JavaScript DOM table properties table properties cells[ ] rows[ ] border, bgColor, etc tr properties cells[ ] methods table: insertRow(x), deleteRow(x), moveRow tr: insertCell, deleteCell

School of Computing and Information Systems CS 371 Web Application Programming 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);