Document Object Model

1
Document Object Model
2
Back to the DOM
3
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

4
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

• 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?twauthoring
5
DOM Tree

• The usual parent/child relationship between node
• Like any other tree, you can walk this

diagram from http//www.w3schools.com/htmldom/defa
ult.asp
6
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

7
A div example
ltdiv id"mydiv"gt This is some simple html to
display lt/divgt

• the div is an element with an id of mydiv
• It contains a text element, which can be
  referenced by childNodes0 (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

8
Zen Garden Example 1

• A loop of code to list the links.

for (var i 0 i lt document.links.length i)
document.write("ltbgtLink number " i " has
these propertieslt/bgtltbr/gt")
document.write("ltigtnodeName islt/igt "
document.linksi.nodeName "ltbr/gt")
document.write("ltigtnodeType islt/igt "
document.linksi.nodeType "ltbr/gt")
document.write("ltigtparentNode.nodeValue islt/igt "
document.linksi.parentNode.nodeValue
"ltbr/gt") document.write("ltigtfirstChild
islt/igt " document.linksi.firstChild
"ltbr/gt") document.write("ltigtfirstChild.nodeValu
e islt/igt " document.linksi.firstChild.
nodeValue "ltbr/gt") document.write("ltigthref
islt/igt " document.linksi.href "ltbr/gt")

9
Zen Garden Example 2

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

10
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

11
Zen Garden Example 2
var look_for"span" document.write("ltpgtLooking
for " look_for " tagslt/pgt") var
xdocument.getElementsByTagName(look_for) for
(var i 0 i lt x.length i)
document.write("ltbgtTag " look_for " number "
i " has these propertieslt/bgtltbr/gt")
document.write("ltigtnodeName islt/igt "
xi.nodeName "ltbr/gt") document.write("ltigtnod
eValue islt/igt " xi.nodeValue "ltbr/gt")
document.write("ltigtnodeType islt/igt "
xi.nodeType "ltbr/gt") document.write("ltigtid
islt/igt " xi.id "ltbr/gt")
document.write("ltigtname islt/igt " xi.name
"ltbr/gt") document.write("ltigtparentNode islt/igt
" xi.parentNode "ltbr/gt")
document.write("ltigtparentNode.nodeValue islt/igt "
xi.parentNode.nodeValue "ltbr/gt")
document.write("ltigtfirstChild islt/igt "
xi.firstChild "ltbr/gt") document.write("ltigtf
irstChild.nodeValue islt/igt " xi.firstChild.nod
eValue "ltbr/gt")
12
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.

13
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.valu
e'document.body.' attr '"' value
'"'
gecko_test01.html
14
Gecko Test version 1

• And a select

ltselect onChange"setBodyAttr('text',
this.optionsthis.selectedIndex.value)"gt
ltoption value"blue"gtblue ltoption
value"green"gtgreen ltoption value"black"gtblack
ltoption value"darkblue"gtdarkblue ltoption
value"white"gtwhite lt/selectgt
gecko_test01.html
15
Gecko Test version 1

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

gecko_test01.html
16
Gecko Test version 2

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

var select_string'ltoption value"blue"gtbluelt/opti
ongt\ ltoption value"green"gtgreenlt/optiongt\ ltoption
value"black"gtblacklt/optiongt\ ltoption
value"darkblue"gtdarkbluelt/optiongt\ ltoption
value"white"gtwhitelt/optiongt\ ltoption
value"0xFF5555"gt0xFF5555lt/optiongt'
gecko_test02.html
17
Gecko Test version 2

• And now, I can call that list with a write
• How could I further refine this?

ltselect onchange "setBodyAttr('bgColor',
this.optionsthis.selectedIndex.value)"gt ltscript
type"application/x-javascript"gt document.write(s
elect_string) lt/scriptgtlt/selectgtlt/pgt
gecko_test02.html
18
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_d
  iv")
• Keep in mind that it's the element itself that's
  returned, not any particular property

19
Using divs

• Div properties can be dynamically manipulated
• You can use this to make menus more dynamic

20
colors The first version

• The basic div

ltdiv id"item1" class"content"
onMouseOver"changeColor('item1', 'fdd')"
onMouseOut"changeColor('item1', 'cff')"gt lta
href"http//www.unc.edu/"gtUNClt/agtltbrgt lt/divgt ltbrgt
colors01.html
21
colors The First Version

• And a function (notice the alert)

ltscriptgt function changeColor(item, color)
document.getElementById(item).style.backgroundCol
or color //alert(document.getElementBy
Id(item).childNodes1) document.getElementByI
d(item).childNodes1.style.backgroundColor
color lt/scriptgt
colors01.html
22
In Action

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

23
Version 2

• The div structure, sans link

ltdiv id"item1" class"content"
onMouseOver"changeColor('item1',
change_color)" onMouseOut"changeColor('item1'
, start_color)" onClick"document.location'ht
tp//www.unc.edu'" gt UNC lt/divgt
colors02.html
24
Version 2

• And the function, with some vars

ltscriptgt function changeColor(item, color)
document.getElementById(item).style.backgroundCol
orcolor var start_color"cff" var
change_color"fdd" lt/scriptgt
colors02.html
25
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)

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

27
Using These.

• You can reference any named element with
  getElementById()
• You can read from or write to that element with
  innerHTML
• For examplegetElementById("mydiv").innerHTML
  "new text string"

28
A Simple DOM example
ltdiv id"mydiv"gt ltpgt This some ltigtsimplelt/igt html
to display lt/pgt lt/divgt ltform id"myform"gt ltinput
type"button" value"Alert innerHTML of mydiv"
onclick" alert(getElementById('mydiv').in
nerHTML) " /gt lt/formgt
simple_dom_example.html
29
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)
triggerdocument.getElementById("showhide")
target_elementdocument.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
30
Manipulating Visibility

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

else target_element.style.displ
ay 'none' trigger.innerHTML 'Show
example'
31_dhtml_example.html
31
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
i0 iltstuff.length i)
stuffi.onclickfunction() return false

source from Mike Harrison via chugalug.org
35_disable_links.html
32
Controlling the back end

• and reenable them

function resurrectAll() var stuff
document.getElementsByTagName("A") for (var
i0 iltstuff.length i)
stuffi.onclickfunction() return true

source from Mike Harrison via chugalug.org
35_disable_links.html
33
Getting fancier

• check out Nifty Corners Cubehttp//www.html.it/a
  rticoli/niftycube/index.html
• And zoomhttp//valid.tjp.hu/zoom/index_en.html
  

34
What else can you do?

• Ant

35
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

36
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

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

38
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

39
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/ess
ays/archives/000385.php
40
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

41
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

42
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

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

44
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

45
An Example
46
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
47
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
48
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

49
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

50
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

51
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
• Seehttp//homepage.mac.com/kevinmarks/staticjah.
  htmlfor an example (or the copy I've got in the
  lessons folder)

52
Jah Function
function jah(url,target) // native
XMLHttpRequest object document.getElementById(
target).innerHTML 'sending...' if
(window.XMLHttpRequest) req new
XMLHttpRequest() req.onreadystatechange
function() jahDone(target)
req.open("GET", url, true)
req.send(null) // IE/Windows ActiveX
version else if (window.ActiveXObject)
req new ActiveXObject("Microsoft.XMLHTTP")
if (req)
req.onreadystatechange function()
jahDone(target) req.open("GET",
url, true) req.send()

53
Jahdone Function
function jahDone(target) // only if req is
"loaded" if (req.readyState 4)
// only if "OK" if (req.status 200)
results req.responseText
document.getElementById(target).innerHTML
results else
document.getElementById(target).innerHTML"jah
error\n" req.statusText

54
Jah in Action
55
So how can we use this?

• Make live insertions into a page via the DOM
• We'll do more of this next week