The navigator object
46
¨ information about the web browser application
¨ properties:
¤ appName, appVersion, browserLanguage,
cookieEnabled, platform, userAgent
¨ Some web programmers examine the navigator
object to see what browser is being used, and write
browser-specific scripts and hacks:
if (navigator.appName === "Microsoft Internet Explorer")
{ ...
JS
CSC309
The screen object
47
¨ information about the client's display screen
¨ properties:
¤ availHeight, availWidth, colorDepth,
height, pixelDepth, width
CSC309
The history object
48
¨ the list of sites the browser has visited in this window
¨ properties:
¤ length
¨ methods:
¤ back, forward, go
¨ sometimes the browser won't let scripts view
history properties, for security
CSC309
49 The DOM tree
The DOM tree
50
Types of DOM nodes
51
<p>
This is a paragraph of text with a
<a href="/path/page.html">link in it</a>.
</p> HTML
¨ element nodes (HTML tag)
¤ can have children and/or attributes
¨ text nodes (text in a block element)
¨ attribute nodes (attribute/value pair)
¤ text/attributesare children in an element node
¤ cannot have children or attributes
¤ not usually shown when drawing the DOM tree
Types of DOM nodes
52
<p>
This is a paragraph of text with a
<a href="/path/page.html">link in it</a>.
</p> HTML
CSC309
Traversing the DOM tree
53
name(s) description
start/end of this node's list of
firstChild, lastChild
children
childNodes array of all this node's children
neighboring nodes with the same
nextSibling, previousSibling
parent
the element that contains this
parentNode
node
complete list of DOM node properties
browser incompatiblity information
DOM tree traversal example
54
<p id="foo">This is a paragraph of text with a
<a href="/path/to/another/page.html">link</a>.</p>
HTML
Elements vs text nodes
55
<div>
<p>
This is a paragraph of text with a
<a href="page.html">link</a>.
</p>
</div> HTML
¨ Q: How many children does the div above have?
¨ A: 3
¤ an element node representing the <p>
¤ two text nodes representing "\n\t" (before/after the
paragraph)
¨ Q: How many children does the paragraph have?
¨ Q: The a tag?
Selecting groups of DOM objects
56
¨ methods in document and other DOM objects for
accessing descendants:
name description
returns array of descendents
getElementsByTagName
with the given tag, such as "div"
returns array of descendants
with the given name attribute
getElementsByName
(mostly useful for accessing
form controls)
CSC309
Getting all elem. of a certain type
57
var allParas = document.getElementsByTagName("p");
for (var i = 0; i < allParas.length; i++) {
allParas[i].style.backgroundColor = "yellow";
} JS
<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>You get the idea...</p>
</body> HTML
CSC309
Combining with getElementById
58
var addrParas =
document.getElementById("address").getElementsByTagName("p");
for (var i = 0; i < addrParas.length; i++) {
addrParas[i].style.backgroundColor = "yellow";
} JS
<p>This won't be returned!</p>
<div id="address">
<p>1234 Street</p>
<p>Atlanta, GA</p>
</div> HTML
CSC309
Creating new nodes
59
name description
creates and returns a new empty
document.createElement("tag") DOM node representing an element
of that type
creates and returns a text node
document.createTextNode("text")
containing given text
// create a new <h2> node
var newHeading = document.createElement("h2");
newHeading.innerHTML = "This is a heading";
newHeading.style.color = "green";
JS
¨ merely creating a node does not add it to the page
¨ you must add the new node as a child of an existing
element on the page...
Modifying the DOM tree
60
name description
places given node at end of this
appendChild(node)
node's child list
places the given new node in this
insertBefore(new, old)
node's child list just before old child
removes given node from this node's
removeChild(node)
child list
replaceChild(new, old) replaces given child with new node
var p = document.createElement("p");
p.innerHTML = "A paragraph!";
document.getElementById("main").appendChild(p);
JS
