CS 371 Web Application Programming Java Script DOM

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

Java. Script 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 School of Computing and Information Systems

inner. HTML replace the content of a tag with html code example: var obj=document. get. Element. By. Id(“my. Id”); obj. inner. HTML=“<p class='wow'>wassup</p>” CS 371 Web Application School of Computing and Information Systems

Java. Script DOM Java. Script 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 School of Computing and Information Systems

Document Object Model contains collections, objects, methods collections: anchors[ ] - all anchor tags forms[ ] - information about forms images[ ] - about images links[ ] - includes <a> and <area> tags objects (document. cookie, . title, etc. ) methods like get. Elements. By. Tag. Name CS 371 Web Application School of Computing and Information Systems

Java. Script 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 School of Computing and Information Systems

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

Java. Script DOM document methods (cont. ) document. get. Elements. By. Tag. Name document. get. Element. By. Id document. get. Elements. By. Name example in javascript: document. get. Element. By. Id(“x”). inner. HTML= “<b>wow</b>” in html: <div id=“x></div> CS 371 Web Application School of Computing and Information Systems

Java. Script DOM document methods (cont. ) assign to objects: var div. Obj=document. get. Element. By. Id(“x”); div. Obj. inner. HTML=“stuff” properties: attributes[ ] child. Nodes[ ] first. Child node. Value style many others… CS 371 Web Application School of Computing and Information Systems

Java. Script DOM document methods (cont. ) attributes var div. Obj=document. get. Element. By. Id(“x”); if(div. Obj. attributes[0]. node. Name==“alt”); alert(div. Obj. attributes[i]. node. Value); div. Obj. set. Attribute(“class”, ”pizzaz”); div. Obj. remove. Attribute(“align”); CS 371 Web Application School of Computing and Information Systems

Java. Script DOM document methods (cont. ) child elements: var div. Obj=document. get. Element. By. Id(“x”); alert(div. Obj. child. Nodes[0]. node. Value); for(var i=0; i<div. Obj. child. Nodes. length; i++) div. Obj. remove. Child(0); div. Obj. append. Child(document. create. Element( “p”)); var txt=document. create. Text. Node(“Stuff”); div. Obj. child. Nodes[0]. append. Child(txt); CS 371 Web Application School of Computing and Information Systems

Java. Script DOM table properties cells[ ] rows[ ] border, bg. Color, etc tr properties cells[ ] methods table: insert. Row(x), delete. Row(x), move. Row tr: insert. Cell, delete. Cell CS 371 Web Application School of Computing and Information Systems

Java. Script DOM table examples insert rows var tab=document. get. Elements. By. Tag. Name (“table”)[0]; var my. Row=tab. insert. Row(-1); var my. Cell=my. Row. insert. Cell(0); my. Cell. append. Child( document. create. Text. Node(“cell data”)); delete rows tab. delete. Row(0); CS 371 Web Application School of Computing and Information Systems