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

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

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

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

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

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

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

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

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

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

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

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

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