javascript iv ect 270 robin burke. outline dom js document model review w3c dom
TRANSCRIPT
JavaScript IV
ECT 270
Robin Burke
Outline
DOMJS document model reviewW3C DOM
JS Document Model
Collection-baseddocument.formsdocument.imagesdocument.all
Name-baseddocument.forms[0].total
Modifying the document
Changing attributeslike img srclike color rollover
Some parts of the document not so easy to accessespecially textual document content
Not possible to build an HTML document within JS
Example
Modifying document contentcolor rolloveradd menu item
What we can't do
Can't access textual content Can't build an HTML document
W3C DOM
Document Object Model Based on the DOM for XML
not (very) HTML-specific Much more flexible
can build documents can access any part of the document
Levels 1 – Basic standard 2 – CSS / events
HTML
<html><head><title>DOM Example</title></head><body><h1>DOM Example</h1><div name="pict" style="text-align: center; border-
width: 3 px; border-style: double"><img name="stickers" src="../w7/img/stickerface.gif"
width="230" height="238"> </div><p>Some text and <a href="lec1110.html">a link to the
lecture</a>. End of page.</p></body></html>
Internal representation
HTML
HEAD
TITLE
(text)
BODY
H1
(text)
DIV
IM
A
P
(text) (text)
(text)
Access via JS Document document links [0]
images [0]all
[0]
[1]
[2]
[3]
[4]
[5]
[6]
[7]
[8]
pict
stickers
HTML
HEAD
TITLE
(text)
BODY
H1
(text)
DIV
IM
A
P
(text) (text)
(text)
Problem
This is a mess new collections added for every purpose some collections browser-specific
W3C solution methods for traversal of the tree no special collections ability to generate collections
• based on tag name• based on id
W3C DOM
Basic pieces Node
• general type NodeList
• wherever a collection is needed Element
• HTML element• subtype of Node
Text• a subtype of Node• contains only unmarked-up character data
Accessing DOM contents
document methods getElementsByTagName
• collected by tag (img, a, div, etc.) getElementById
• must be labeled by id, not name node methods
parentNode childNodes firstChild lastChild
element methods getAttribute setAttribute
Modifying document content
factory methods of documentcreateElement (tagName)createTextNode
node modifiersappendChild (node)removeChild (node)insertBefore (newNode, currentNode)replaceChild (newNode, oldNode)
Example
add menu item add textual content
Style
What if we want to mark missing fields in red?
DOM solutionadd a new span node with red color
Another solutionuse style
Manipulating style
We can manipulate style dynamicallyjust like other element properties
Each element has an associated style objectsetting the properties of this objectchange the element's displayed styleediting embedded style
Note
CSS "-" is style name separator font-family: Arial, sans-serif
JavaScript "-" is subtraction operator style names use lowerUpper syntax
• font-family becomes fontFamily• elem.style.fontFamily = "Arial, sans-serif"
Netscape style property is missing from "schismatic" Netscape
versions (4-5) instead
• elem.fontFamily = ...
Cross-browser solution
StyleAPI fileif (document.layers) isNS = true;
if (document.all) isIE = true;
function setFontFamily (elem, family)
{
if (isIE)
elem.style.fontFamily = family;
else if (isNS)
elem.fontFamily = family;
}
Examples
text color rollover change style of label if we just want the asterisk red
must insert a span anyway
Summary
Pluses Available in both NS and IE
• not true of JS document Conceptually simpler More capable
Minuses Code is wordier Implementation differences in browsers Browser features not standardized in NS 4
and 5
Wednesday
More Styleespecially positioningspecial effects