Document Object Model

(1)

Document Object Model

(2)

• 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

Javascript and the DOM

(3)

• 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

Review: DOM Structure

^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

table from: http://www.webmonkey.com/webmonkey/97/32/index1a.html?tw=authoring

(4)

• The usual parent/child relationship between node

• Like any other tree, you can walk this

DOM Tree

diagram from http://www.w3schools.com/htmldom/default.asp

(5)

•

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

Referencing Objects

(6)

•

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

A div example

This is some simple html to display This is some simple html to display

</div>

(7)

•

A loop of code to list the links….

Zen Garden Example 1

for (var i = 0; i < document.links.length; i++) for (var i = 0; i < document.links.length; i++) {{

document.write("<b>Link number " + i + " has these properties:</b><br/>");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>nodeName is</i> " + document.links[i].nodeName + "<br/>");

document.write("<i>nodeType is</i> " + document.links[i].nodeType + "<br/>");document.write("<i>nodeType is</i> " + document.links[i].nodeType + "<br/>");

document.write("<i>parentNode.nodeValue is</i> " 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 is</i> " + document.links[i].firstChild + "<br/>");

document.write("<i>firstChild.nodeValue is</i> " document.write("<i>firstChild.nodeValue is</i> "

+ document.links[i].firstChild.nodeValue + "<br/>");

document.write("<i>href is</i> " + document.links[i].href + "<br/>"); document.write("<i>href is</i> " + document.links[i].href + "<br/>");

}}

(8)

•

Same as example one, but with another loop to look for all span tags….

Zen Garden Example 2

(9)

• 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

Zen Garden Example 2

(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)

•

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….

Learning The DOM

(12)

•

Notice the use of eval

Gecko Test version 1

function setBodyAttr(attr,value) function setBodyAttr(attr,value) {{

// eval causes a string to be executed// eval causes a string to be executed

eval('document.body.' + attr + '="' + value + '"');eval('document.body.' + attr + '="' + value + '"');

document.main_form.object_manipulated.value='document.body.' document.main_form.object_manipulated.value='document.body.'

+ attr + '="' + value + '"';+ attr + '="' + value + '"';

}}

gecko_test01.html gecko_test01.html

(13)

•

And a select

Gecko Test version 1

<select onChange="setBodyAttr('text',

this.options[this.selectedIndex].value);"> 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>

(14)

•

What's wrong with this? (hint: I'm violating a basic rule of coding…)

Gecko Test version 1

(15)

•

Setting a variable for the options in select (why backslashes at the EOLs?):

Gecko Test version 2

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>';

(16)

•

And now, I can call that list with a write

•

How could I further refine this?

Gecko Test version 2

<select onchange=

"setBodyAttr('bgColor', this.options[this.selectedIndex].value);">

document.write(select_string);

</script></select></p>

(17)

•

As said, it's easiest to reference objects by

•

idTo 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", use

getElementById("my_cool_div")

•

Keep in mind that it's the element itself

that's returned, not any particular property

Manipulating Objects

(18)

•

Div properties can be dynamically manipulated

•

You can use this to make menus more dynamic

Using divs

(19)

•

The basic div:

colors: The first version

colors01.html colors01.html

<div id="item1" class="content"

onMouseOver="changeColor('item1', '#fdd');"onMouseOver="changeColor('item1', '#fdd');"

onMouseOut="changeColor('item1', '#cff');">onMouseOut="changeColor('item1', '#cff');">

</div>

<br>

(20)

•

And a function (notice the alert):

colors: The First Version

function changeColor(item, color) function changeColor(item, color) {{

document.getElementById(item).style.backgroundColordocument.getElementById(item).style.backgroundColor

=color;=color;

//alert(document.getElementById(item).childNodes[1]);//alert(document.getElementById(item).childNodes[1]);

document.getElementById(item).childNodes[1].style.backgroundColordocument.getElementById(item).childNodes[1].style.backgroundColor

=color;=color;

}}

</script>

(21)

•

colors01.html

•

What's wrong with this? What would be better?

In Action

(22)

•

The div structure, sans link:

Version 2

<div id="item1" class="content"

onMouseOver="changeColor('item1', change_color);"onMouseOver="changeColor('item1', change_color);"

onMouseOut="changeColor('item1', start_color);"onMouseOut="changeColor('item1', start_color);"

onClick="document.location='http://www.unc.edu';"onClick="document.location='http://www.unc.edu';"

>>

UNCUNC

</div>

(23)

•

And the function, with some vars

Version 2

function changeColor(item, color) function changeColor(item, color) {{

document.getElementById(item).style.backgroundColor=color;document.getElementById(item).style.backgroundColor=color;

}}

var start_color="#cff";

var change_color="#fdd";

</script>

(24)

•

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…)

Version2

(25)

•

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)

innerHTML

(26)

•

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";

Using These….

(27)

A Simple DOM example

<p>

This some <i>simple</i> html to display This some <i>simple</i> html to display

</p>

</div>

<input type="button" value="Alert innerHTML of mydiv"

onclick="onclick="

alert(getElementById('mydiv').innerHTML)alert(getElementById('mydiv').innerHTML)

" />" />

</form>

simple_dom_example.html simple_dom_example.html

(28)

•

You can manipulate the visibility of objects, this from

http://en.wikipedia.org/wiki/DHTML

•

The first part displays an element if it's hidden…

Manipulating Visibility

31_dhtml_example.html

function changeDisplayState (id) function changeDisplayState (id) {{

trigger=document.getElementById("showhide");trigger=document.getElementById("showhide");

target_element=document.getElementById(id);target_element=document.getElementById(id);

if (target_element.style.display == 'none' if (target_element.style.display == 'none'

|| target_element.style.display == "") || target_element.style.display == "")

{{

target_element.style.display = 'block';target_element.style.display = 'block';

trigger.innerHTML = 'Hide example';trigger.innerHTML = 'Hide example';

} }

……

(29)

•

And the second hides the same element if it's visible

Manipulating Visibility

31_dhtml_example.html

……

else else {{

target_element.style.display = 'none';target_element.style.display = 'none';

trigger.innerHTML = 'Show example';trigger.innerHTML = 'Show example';

}} }}

(30)

•

And you can enable or disable functionality, for example, you can disable links

dynamically…

Controlling the back end

source from Mike Harrison via chugalug.org 35_disable_links.html

function killAll() function killAll() {{

var stuff = document.getElementsByTagName("A");var stuff = document.getElementsByTagName("A");

for (var i=0; i<stuff.length; i++)for (var i=0; i<stuff.length; i++) {{

stuff[i].onclick=function() stuff[i].onclick=function() {{

return false ;return false ; }}

}} } }

(31)

•

…and reenable them…

Controlling the back end

source from Mike Harrison via chugalug.org 35_disable_links.html

function resurrectAll() function resurrectAll() {{

var stuff = document.getElementsByTagName("A"); var stuff = document.getElementsByTagName("A");

for (var i=0; i<stuff.length; i++)for (var i=0; i<stuff.length; i++) {{

stuff[i].onclick=function() stuff[i].onclick=function() {{

return true ;return true ; }}

}} } }

(32)

•

check out Nifty Corners Cube:

http://www.html.it/articoli/niftycube/in dex.html

•

And zoom:

http://valid.tjp.hu/zoom/index_en.html

Getting fancier

(33)

•

^Ant

What else can you do?

(34)

•

Jesse James Garrett coined the term, Asynchronous Javascript And XML

•

It's not a language or program, but rather an approach

Getting Started with Ajax

(35)

• 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

Garrett's take on what

Ajax is

(36)

•

^{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)

What Ajax is not

(37)

•

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

Ok, but what IS Ajax?

(38)

•

Ajax inserts a chunk of code in the browser that handles server queries for small chunks of data used to update a document

Ajax Model

diagram from http://www.adaptivepath.com/ideas/essays/archives/000385.php diagram from http://www.adaptivepath.com/ideas/essays/archives/000385.php

(39)

• 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

But remember…

(40)

•

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

Objects and Events

(41)

• 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

XMLHttpRequest Object

(42)

•

^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)

XMLHttpRequest Methods

(43)

•

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

XMLHttpRequest

Properties

(44)

An Example…

(45)

function makeRequest(url) {function makeRequest(url) {

var http_request = false;var http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari, ...if (window.XMLHttpRequest) { // Mozilla, Safari, ...

http_request = new XMLHttpRequest();http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {if (http_request.overrideMimeType) {

http_request.overrideMimeType('text/xml');http_request.overrideMimeType('text/xml');

}}

if (!http_request) {if (!http_request) {

alert('Giving up :( Cannot create an XMLHTTP instance');alert('Giving up :( Cannot create an XMLHTTP instance');

return false;return false;

}}

http_request.onreadystatechange = function() http_request.onreadystatechange = function()

{{

alertContents(http_request); alertContents(http_request);

}}

http_request.open('GET', url, true);http_request.open('GET', url, true);

http_request.send(null);http_request.send(null);

}} 00_ajax_demo.html: i

(46)

function alertContents(http_request) { function alertContents(http_request) {

if (http_request.readyState == 4) {if (http_request.readyState == 4) {

if (http_request.status == 200) {if (http_request.status == 200) {

alert(http_request.responseText);alert(http_request.responseText);

} else {} else {

alert('There was a problem with the request.');alert('There was a problem with the request.');

}}

}} }}

00_ajax_demo.html: i

(47)

•

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…

Security Concerns

(48)

•

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

Some Examples

(49)

• 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

Jah and Ajah and Ahah:

HA!

(50)

• 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.html for an example (or the copy I've got in the lessons folder)

Jah

(51)

Jah Function

function jah(url,target) { function jah(url,target) {

// native XMLHttpRequest object // native XMLHttpRequest object

document.getElementById(target).innerHTML = 'sending...'; document.getElementById(target).innerHTML = 'sending...';

if (window.XMLHttpRequest) { if (window.XMLHttpRequest) {

req = new XMLHttpRequest();req = new XMLHttpRequest();

req.onreadystatechange = function() {jahDone(target);};req.onreadystatechange = function() {jahDone(target);};

req.open("GET", url, true);req.open("GET", url, true);

req.send(null);req.send(null);

// IE/Windows ActiveX version // IE/Windows ActiveX version

} else if (window.ActiveXObject) { } else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");req = new ActiveXObject("Microsoft.XMLHTTP");

if (req) {if (req) {

req.onreadystatechange = function() {jahDone(target);};req.onreadystatechange = function() {jahDone(target);};

req.open("GET", url, true);req.open("GET", url, true);

req.send();req.send();

}} } }

} }

(52)

Jahdone Function

function jahDone(target) { function jahDone(target) {

// only if req is "loaded"// only if req is "loaded"

if (req.readyState == 4) {if (req.readyState == 4) {

// only if "OK"// only if "OK"

if (req.status == 200) {if (req.status == 200) {

results = req.responseText;results = req.responseText;

document.getElementById(target).innerHTML = results;document.getElementById(target).innerHTML = results;

} else {} else {

document.getElementById(target).innerHTML="jah error:\n" +document.getElementById(target).innerHTML="jah error:\n" +

req.statusText;req.statusText;

}} }}

}}

(53)

Jah in Action

(54)

•

Make live insertions into a page via the DOM

•

We'll do more of this next week

So how can we use this?

(55)