1. Lecture 11 – DOM Scripting SFDV3011 – Advanced Web Development Reference: http://www.w3schools.com/js/ 1

2. Document Object Model  JavaScript was added to Netscape Navigator 2 in 1995 – could basically manipulate the browser window  DHTML - Dynamic HTML  in 1996 we got JavaScript 1.1 in Netscape Navigator 3 and IE 3 - could manipulate bits of a document such as images and forms  Netscape Navigator 4 and IE 4 both promised to let you manipulate the whole document - but they did it completely differently  But the W3C created a standard Document Object Model (DOM), which browser manufacturers eventually implemented 2

3. Document Object Model  “The Document Object Model is a platform- and language- neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – from http://www.w3.org/DOM/http://www.w3.org/DOM/  DHTML - collection of technologies that enable creation of interactive and animated websites; these include: static HTML CSS DOM JavaScript 3

4. Basic DOM Concepts  Your document is parsed into a tree-structure  Each part of the tree is a “node” and the usual tree language applies: root, child, parent, sibling, ancestor, descendant  There are separate nodes for elements, attributes, and text  A compliant DOM implementation provides certain expected commands to get node content, change it, add nodes, and remove nodes  In principle the DOM is independent of platform, programming language, and XML application 4

5. DOM example Page title A header A link 5

6. DOM example This is DOM diagram of the previous HTML document element element innerHTML: “Page title” element element innerHTML: “A header” element innerHTML: “A link” Attribute: “href” document Root element 6

7. Manipulating the DOM with JavaScript  JavaScript is a script that is embedded in (or attached to) an HTML document that gets executed on the client machine  JavaScript can manipulate the DOM that has been loaded into the browser from a given HTML page  Ability to manipulate the DOM gives you power to animate the web page 7

8. Adding JavaScript to HTML var hdrObj = document. getElementById (" hdr1 "); hdrObj. innerHTML = " Changed text "; Header. Index.html 8

9. Adding JavaScript to HTML Header … Index.html function setup () { var hdrObj = document. getElementById (" hdr1 "); hdrObj. innerHTML = " Changed text "; } if ( document. getElementById ) { // Function setup will be executed after DOM is loaded window. onload = setup ; } Script.js 9

10. Getting the elements  To perform operation/property change on a given element, you need to first get a reference to the desired element  Reference by id (remember, id should be unique for the entire document) var hdrObj = document. getElementById (" some_id ");  Reference by name  Reference by element type  Traverse the object tree var formObjs = document. getElementsByName (" some_name "); var hdrObjs = document. getElementsByTagName ("h1"); var bodyObj = document. getElementsByTagName (" body "); var hdrObj = bodyObj [0]. firstElementChild ; 10

11. Creating and deleting elements  Create a new element var listItem = document. createElement ("li");  Insert element into a document tree  Delete element from a document listItem. innerHTML = " Another item "; var list = document. getElementByName (" listA "); list. appendChild ( listItem ); list. removeChild ( listItem ); 11

12. Changing element properties // Get the reference to all images in the document var imgArray = document. getElementsByTagName ("img"); // Get the reference to the first image in the document var imgObj = imgArray [0]; // Change the image source attribute imgObj. src = " differentImage.jpg "; // Get the reference to an element with id " myform " var frmObj = document. getElementById (" myform "); // Assuming it ’s a form element, set its method to post frmObj. method = " post "; 12

13. Defining events associated with elements  Event: onclick // Get the reference to all images in the document var imgObj = document. getElementId (" imgA "); // Set the image onclick handler imgObj. onclick = doSomething ; function doSomething () { alert ("You clicked the image !"); }  And many more: onmouseover, onload, onsubmit, onfocus  Note: not every event may be supported in every browser - Check http://www.w3schools.com/jsref/dom_obj_event.asp 13

14. Changing CSS styles  Use the style property of the element object var obj= document. getElementById (" someID "); obj. style. visibility = " visible ";  The style attributes in JavaScript mostly match CSS styles (with few exceptions - http://www.comptechdoc.org/independent/web/ cgi/javamanual/javastyle.html) 14

15. Unobtrusive JavaScript  Separate behaviour (JavaScript) from the structure/content (HTML) and presentation (CSS) in a web page  Take into account browser inconsistencies  And make sure that the functionality degrades gracefully when JavaScript is not enabled (or not supported) 15