JavaScript IV ECT 270 Robin Burke

Outline DOM JS document model review W3C DOM

JS Document Model Collection-based document.forms document.images document.all Name-based document.forms[0].total

Modifying the document Changing attributes like img src like color rollover Some parts of the document not so easy to access especially textual document content Not possible to build an HTML document within JS

Example Modifying document content color rollover add 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 DOM Example DOM Example Some text and a link to the lecture. End of page.

Internal representation

Access via JS Document

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 document createElement (tagName) createTextNode node modifiers appendChild (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 solution add a new span node with red color Another solution use style

Manipulating style We can manipulate style dynamically just like other element properties Each element has an associated style object setting the properties of this object change the element's displayed style editing 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 file if (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 Style especially positioning special effects