Client-side
DOM (& JavaScript)
Parke Godfrey
9 November 2011
16 November 2011
CSE-2041
Parke Godfrey
9 November 2011
16 November 2011
CSE-2041
These slides are based in part on ones from the following sources.
HTML DOM Tree (from W3Schools.com).
DOM is an object model for XML.
HTML DOM is an object model for HTML.
DOM represents an XML / HTML document as nested objects.
The Web browser creates a DOM object to represent a page it is presenting.
User actions — and JavaScript-triggered actions — interact with that DOM object.
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
DOM relations (from W3Schools.com).
Each object is called a node.
DOM node = HTML element
Each node has a parent, and can have children and siblings.
Some (HTML) DOM node properties:
x.innerHTML
:
the text value of x
.
(Not in the standards!)
x.nodeName
:
the tag name of x
.
x.nodeValue
:
the value of x
.
x.parentNode
:
the parent node of x
.
x.childNodes
:
the child nodes of x
.
x.attributes
:
the attribute nodes of x
.
Note that x
is an object
representing that DOM node.
How do we get the object?
Some (HTML) DOM node methods:
x.getElementById(id)
:
get the element by a specified id
.
x.getElementsByTagName(name)
:
get all elements with a specified tag name.
x.appendChild(node)
:
insert a child node to x
.
x.removeChild(node)
:
remove a child node from x
.
The root of an HTML DOM tree is the node
document
.
Text content within an element is
implicitly placed within
a #text
child node.
This can really trip you up, unless you know about it!
Why is this done?
Events are actions that can trigger JavaScript functions.
Some DOM events are:
onload
: triggered when the element is finished loading.
<body>
and <img>
.)
onunload
: triggered as the page is being exited.
onclick
: triggered when the element is clicked.
onfocus
: triggered when the element gains focus.
onblur
: triggered when the element loses focus.
See W3School's HTML DOM Event Object for more.
reverse the paragraphs
validate a form entry
zebra-stripe the rows of tables
number the paragraphs
using JQuery: numParJQ.html
using “XPath” and regular DOM: numPar.html