1. JavaScript IV ECT 270 Robin Burke

2. Outline DOM JS document model review W3C DOM

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

4. 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

5. Example Modifying document content color rollover add menu item

6. What we can't do Can't access textual content Can't build an HTML document

7. 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

8. HTML DOM Example DOM Example Some text and a link to the lecture. End of page.

9. Internal representation

10. Access via JS Document

11. 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

12. 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

13. 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

14. Modifying document content factory methods of document createElement (tagName) createTextNode node modifiers appendChild (node) removeChild (node) insertBefore (newNode, currentNode) replaceChild (newNode, oldNode)

15. Example add menu item add textual content

16. 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

17. 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

18. 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 =...

19. 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; }

20. Examples text color rollover change style of label if we just want the asterisk red must insert a span anyway

21. 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

22. Wednesday More Style especially positioning special effects