javascript iv ect 270 robin burke. outline dom js document model review w3c dom

Download JavaScript IV ECT 270 Robin Burke. Outline DOM JS document model review W3C DOM

Post on 03-Jan-2016

212 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • JavaScript IVECT 270Robin Burke

  • OutlineDOMJS document model reviewW3C DOM

  • JS Document ModelCollection-baseddocument.formsdocument.imagesdocument.allName-baseddocument.forms[0].total

  • Modifying the documentChanging attributeslike img srclike color rolloverSome parts of the document not so easy to accessespecially textual document contentNot possible to build an HTML document within JS

  • ExampleModifying document contentcolor rolloveradd menu item

  • What we can't doCan't access textual contentCan't build an HTML document

  • W3C DOMDocument Object ModelBased on the DOM for XMLnot (very) HTML-specificMuch more flexiblecan build documentscan access any part of the documentLevels1 Basic standard2 CSS / events

  • HTML

    DOM Example

    DOM Example

    Some text and a link to the lecture. End of page.

  • Internal representation

    text

    HTML

    HEAD

    TITLE

    (text)

    BODY

    H1

    (text)

    DIV

    IM

    A

    P

    (text)

    (text)

    (text)

  • Access via JS Document

  • ProblemThis is a messnew collections added for every purposesome collections browser-specificW3C solutionmethods for traversal of the treeno special collectionsability to generate collectionsbased on tag namebased on id

  • W3C DOMBasic piecesNodegeneral typeNodeListwherever a collection is neededElementHTML elementsubtype of NodeTexta subtype of Nodecontains only unmarked-up character data

  • Accessing DOM contentsdocument methodsgetElementsByTagNamecollected by tag (img, a, div, etc.)getElementByIdmust be labeled by id, not namenode methodsparentNodechildNodesfirstChildlastChildelement methodsgetAttributesetAttribute

  • Modifying document content factory methods of documentcreateElement (tagName)createTextNodenode modifiersappendChild (node)removeChild (node)insertBefore (newNode, currentNode)replaceChild (newNode, oldNode)

  • Exampleadd menu itemadd textual content

  • StyleWhat if we want to mark missing fields in red?DOM solutionadd a new span node with red colorAnother solutionuse style

  • Manipulating styleWe can manipulate style dynamicallyjust like other element propertiesEach element has an associated style objectsetting the properties of this objectchange the element's displayed styleediting embedded style

  • NoteCSS"-" is style name separatorfont-family: Arial, sans-serifJavaScript"-" is subtraction operatorstyle names use lowerUpper syntaxfont-family becomes fontFamilyelem.style.fontFamily = "Arial, sans-serif"Netscapestyle property is missing from "schismatic" Netscape versions (4-5)instead elem.fontFamily = ...

  • Cross-browser solutionStyleAPI 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;}

  • Examplestext color rolloverchange style of labelif we just want the asterisk redmust insert a span anyway

  • SummaryPlusesAvailable in both NS and IEnot true of JS documentConceptually simplerMore capableMinusesCode is wordierImplementation differences in browsersBrowser features not standardized in NS 4 and 5

  • WednesdayMore Styleespecially positioningspecial effects