Introduction to Document Object Model (DOM) in Javascript

1. Document Object Model

2. Javascript and the DOM • Originally, the Document Object Model (DOM) and Javascript were tightly bound • Each major browser line (IE and Netscape) had their own overlapping DOM implementation • There's also some jargon issues, eg. DHTML… • Now, the DOM is a separate standard, and can be manipulated by other languages (eg Java, server side javascript, python, etc) • Browsers still differ in what parts of the standard they support, but things are much better now

3. window * location * frames * history * navigator * event * screen * document o links o anchors o images o filters o forms o applets o embeds o plug-ins o frames o scripts o all o selection o stylesheets o body Review: DOM Structure • Objects are in a hierarchy • The window is the parent for a given web page • Document is the child with the objects that are most commonly manipulated table from: http://www.webmonkey.com/webmonkey/97/32/index1a.html?tw=authoring

4. DOM Tree • The usual parent/child relationship between node • Like any other tree, you can walk this diagram from http://www.w3schools.com/htmldom/default.asp

5. Referencing Objects • Objects can be referenced • by their id or name (this is the easiest way, but you need to make sure a name is unique in the hierarchy) • by their numerical position in the hierarchy, by walking the array that contains them • by their relation to parent, child, or sibling (parentNode, previousSibling, nextSibling, firstChild, lastChild or the childNodes array

6. A div example • the div is an element with an id of mydiv • It contains a text element, which can be referenced by childNodes[0] (childNode being an array of all childen of a node • So the text in the div is not a value of the div, but rather the value of the first (and only) childNode of the div <div id="mydiv"> This is some simple html to display </div>

7. Zen Garden Example 1 • A loop of code to list the links…. for (var i = 0; i < document.links.length; i++) { document.write("<b>Link number " + i + " has these properties:</b><br/>"); document.write("<i>nodeName is</i> " + document.links[i].nodeName + "<br/>"); document.write("<i>nodeType is</i> " + document.links[i].nodeType + "<br/>"); document.write("<i>parentNode.nodeValue is</i> " + document.links[i].parentNode.nodeValue + "<br/>"); document.write("<i>firstChild is</i> " + document.links[i].firstChild + "<br/>"); document.write("<i>firstChild.nodeValue is</i> " + document.links[i].firstChild.nodeValue + "<br/>"); document.write("<i>href is</i> " + document.links[i].href + "<br/>"); }

8. Zen Garden Example 2 • Same as example one, but with another loop to look for all span tags….

9. Zen Garden Example 2 • I added a little javascript to the sample file from zen garden • This will search for a given tag using the getElementsByTagName() method • The result of this method is an array, and we can walk that array and then write out different properties and values for the elements found by getElementsByTagName() • There's also a getElementsById() method

10. Zen Garden Example 2 var look_for="span"; document.write("<p>Looking for " + look_for + " tags</p>"); var x=document.getElementsByTagName(look_for); for (var i = 0; i < x.length; i++) { document.write("<b>Tag " + look_for + " number " + i + " has these properties:</b><br/>"); document.write("<i>nodeName is</i> " + x[i].nodeName + "<br/>"); document.write("<i>nodeValue is</i> " + x[i].nodeValue + "<br/>"); document.write("<i>nodeType is</i> " + x[i].nodeType + "<br/>"); document.write("<i>id is</i> " + x[i].id + "<br/>"); document.write("<i>name is</i> " + x[i].name + "<br/>"); document.write("<i>parentNode is</i> " + x[i].parentNode + "<br/>"); document.write("<i>parentNode.nodeValue is</i> " + x[i].parentNode.nodeValue + "<br/>"); document.write("<i>firstChild is</i> " + x[i].firstChild + "<br/>"); document.write("<i>firstChild.nodeValue is</i> " + x[i].firstChild.nodeValue + "<br/>"); }

11. Learning The DOM • The only way is to read and try things out • Build a test document, with things you've learned • Gecko_test.html is an example adapted from the mozilla site….

12. Gecko Test version 1 • Notice the use of eval function setBodyAttr(attr,value) { // eval causes a string to be executed eval('document.body.' + attr + '="' + value + '"'); document.main_form.object_manipulated.value='document.body.' + attr + '="' + value + '"'; } gecko_test01.html

13. Gecko Test version 1 • And a select <select onChange="setBodyAttr('text', this.options[this.selectedIndex].value);"> <option value="blue">blue <option value="green">green <option value="black">black <option value="darkblue">darkblue <option value="white">white … </select> gecko_test01.html

14. Gecko Test version 1 • What's wrong with this? (hint: I'm violating a basic rule of coding…) gecko_test01.html

15. Gecko Test version 2 • Setting a variable for the options in select (why backslashes at the EOLs?): var select_string='<option value="blue">blue</option>\ <option value="green">green</option>\ <option value="black">black</option>\ <option value="darkblue">darkblue</option>\ <option value="white">white</option>\ <option value="0xFF5555">0xFF5555</option>'; gecko_test02.html

16. Gecko Test version 2 • And now, I can call that list with a write • How could I further refine this? <select onchange= "setBodyAttr('bgColor', this.options[this.selectedIndex].value);"> <script type="application/x-javascript"> document.write(select_string); </script></select></p> gecko_test02.html

17. Manipulating Objects • As said, it's easiest to reference objects by id • To do this easily, use getElementById(), which returns the element with the given id • For example, if you want to find a div with the id of "my_cool_div", usegetElementById("my_cool_div") • Keep in mind that it's the element itself that's returned, not any particular property

18. Using divs • Div properties can be dynamically manipulated • You can use this to make menus more dynamic

19. colors: The first version • The basic div: <div id="item1" class="content" onMouseOver="changeColor('item1', '#fdd');" onMouseOut="changeColor('item1', '#cff');"> <a href="http://www.unc.edu/">UNC</a><br> </div> <br> colors01.html

20. colors: The First Version • And a function (notice the alert): <script> function changeColor(item, color) { document.getElementById(item).style.backgroundColor =color; //alert(document.getElementById(item).childNodes[1]); document.getElementById(item).childNodes[1].style.backgroundColor =color; } </script> colors01.html

21. In Action • colors01.html • What's wrong with this? What would be better?

22. Version 2 • The div structure, sans link: <div id="item1" class="content" onMouseOver="changeColor('item1', change_color);" onMouseOut="changeColor('item1', start_color);" onClick="document.location='http://www.unc.edu';" > UNC </div> colors02.html

23. Version 2 • And the function, with some vars <script> function changeColor(item, color) { document.getElementById(item).style.backgroundColor=color; } var start_color="#cff"; var change_color="#fdd"; </script> colors02.html

24. Version2 • Much cleaner • div clickable means no issues with color of link, but sacrifices visited link color(how could that be fixed?) • Use of variables for colors mean it's much easier to change them(but this could be made much easier with php in the background…)

25. innerHTML • innerHTML is a property of any document element that contains all of the html source and text within that element • This is not a standard property, but widely supported--it's the old school way to manipulate web pages • Much easier than building actual dom subtrees, so it's a good place to start • Very important--innerHTML treats everything as a string, not as DOM objects (that's one reason it's not part of the DOM standard)

26. Using These…. • You can reference any named element with getElementById() • You can read from or write to that element with innerHTML • For example:getElementById("mydiv").innerHTML ="new text string";

27. A Simple DOM example <div id="mydiv"> <p> This some <i>simple</i> html to display </p> </div> <form id="myform"> <input type="button" value="Alert innerHTML of mydiv" onclick=" alert(getElementById('mydiv').innerHTML) " /> </form> simple_dom_example.html

28. Manipulating Visibility • You can manipulate the visibility of objects, this fromhttp://en.wikipedia.org/wiki/DHTML • The first part displays an element if it's hidden… function changeDisplayState (id) { trigger=document.getElementById("showhide"); target_element=document.getElementById(id); if (target_element.style.display == 'none' || target_element.style.display == "") { target_element.style.display = 'block'; trigger.innerHTML = 'Hide example'; } … 31_dhtml_example.html

29. Manipulating Visibility • And the second hides the same element if it's visible … else { target_element.style.display = 'none'; trigger.innerHTML = 'Show example'; } } 31_dhtml_example.html

30. Controlling the back end • And you can enable or disable functionality, for example, you can disable links dynamically… function killAll() { var stuff = document.getElementsByTagName("A"); for (var i=0; i<stuff.length; i++) { stuff[i].onclick=function() { return false ; } } } source from Mike Harrison via chugalug.org 35_disable_links.html

31. Controlling the back end • …and reenable them… function resurrectAll() { var stuff = document.getElementsByTagName("A"); for (var i=0; i<stuff.length; i++) { stuff[i].onclick=function() { return true ; } } } source from Mike Harrison via chugalug.org 35_disable_links.html

32. Getting fancier • check out Nifty Corners Cube:http://www.html.it/articoli/niftycube/index.html • And zoom:http://valid.tjp.hu/zoom/index_en.html

33. What else can you do? • Ant

34. Getting Started with Ajax • Jesse James Garrett coined the term, Asynchronous Javascript And XML • It's not a language or program, but rather an approach

35. Garrett's take on what Ajax is • Standards-based presentation using XHTML and CSS • Dynamic display and interaction using the Document Object Model • Data interchange and manipulation using XML and XSLT • Asynchronous data retrieval using XMLHttpRequest • And JavaScript binding everything together

36. What Ajax is not • An acronym • A monolith or unified technology (it is rather an approach based on a number of disparate technologies) • A standard (and it's not likely to become one, although it will influence standards, since it's really just an approach) • A product (although you can buy a lot of it these days--but most of that are really frameworks)

37. Ok, but what IS Ajax? • When you load a web page and then • Use the XMLHttpRequest object to get some more data, and then • Use Javascript to change some of the data on your web page (but not all of it, and not by reloading the page), then • What you're doing is Ajax

38. Ajax Model • Ajax inserts a chunk of code in the browser that handles server queries for small chunks of data used to update a document diagram from http://www.adaptivepath.com/ideas/essays/archives/000385.php

39. But remember… • Javascript has no concept of I/O, nor can it access sockets • But Netscape/Mozilla and MS both worked out an object in the browser that can submit data requests via the web • In MS, this is done via ActiveX, via the Microsoft.XMLHTTP object • In Gecko, it's the XMLHttpRequest() object, and that's what we'll play with

40. Objects and Events • Remember, Javascript and the DOM are OOP, so objects have properties, with values, and can receive messages, based on events, and send messages via methods • In most of the examples so far, the user is the one that causes an event to occur--eg. the nav buttons in the slideshow call functions based on an event initiated by a carbon unit • Other events don't require human interaction--these type of events are called "listeners"… • You can create your own listeners if you need to

41. XMLHttpRequest Object • An object that can load web resources from within javascript • So you create an instance of this object • Call the open method from that object with a url and a method to use (GET or POST) • It makes the HTTP request, and as it does so, one of it's properties cycles through the states of the HTTP request • You watch that, and when the request is complete, you can get the data that was retrieved

42. XMLHttpRequest Methods • abort() • getAllResponseHeaders() • getResponseHeader(header) • open(method, url): method is POST, GET, or PUT) • send(body): body is the content of a post…. • setRequestHeader(header, value)

43. XMLHttpRequest Properties • onreadystatechange: sets a method to be called on any state change, eg. a listener • readState: • 0 Uninitated • 1 Loading • 2 Loaded • 3 Interactive • 4 Complete • responseText: server response as a string • responseXML: server response as xml • status: as an HTTP code, eg 404 • statusText: the accompanying text

44. An Example…

45. function makeRequest(url) { var http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } if (!http_request) { alert('Giving up :( Cannot create an XMLHTTP instance'); return false; } http_request.onreadystatechange = function() { alertContents(http_request); } http_request.open('GET', url, true); http_request.send(null); } 00_ajax_demo.html: i

46. function alertContents(http_request) { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert('There was a problem with the request.'); } } } 00_ajax_demo.html: i

47. Security Concerns • At first, this kind of call wasn't restricted • But that meant that if one could inject javascript into a web page, eg. via a comment form, one could pull live data into a users brower, and thus escape the sandbox • So now, this method is generally restricted to the same named server…

48. Some Examples • 00_ajax_demo.html: in this one, I'm just pulling some data from the server, and stuffing the results into an alert

49. Jah and Ajah and Ahah: HA! • After Garret's coining of the term ajax, several people independently presented similar systems--this is to be expected, since XMLHttpRequest has been around a while • Most of these used the same basic approach to pull html or other data types than xml, or didn't use the dom specification

50. Jah • Jah is the work of Kevin Marks • Jah relies on two simple functions, one to open the request, and the other to change the data • Instead of manipulating the dom directly, jah uses the innerHTML property to manipulate the page • See:http://homepage.mac.com/kevinmarks/staticjah.htmlfor an example (or the copy I've got in the lessons folder)