JavaScript and the browser DOM Web Technologies I Krišs Rauhvargers, 2012

DOM •  A JavaScript interpreter is built into modern browsers •  The interpreter has access to document object model (DOM) of the browser: –  it imitates JavaScript object interface, –  all objects are proxies – by altering their properties, things change on screen •  body.style.backgroundColor="red";! •  //now document background is red

•  Every time you change a visual property, browser re-paints all the page

Collaboration of scripts and browser •  Every item on the page has its place in DOM. •  Each DOM element can be changed by scripts •  Scripts are attached to events •  Changes in DOM yield page re-painting Diagramma Douglas Crockford, The theory of DOM, http://yuiblog.com/assets/ crockford/theory.zip

What's inside the dom •  Initially, DOM model is constructed from HTML document which is loaded, something that resembles this. •  The global document object allows accessing parts of HTML document. document.head!

document.body!

4

Additional things in the DOM. •  Browser environment contains a lot more than HTML document –  user interaction –  current location –  information about display device ...

•  "The beginning" is the window object whose properties –  document is just one of those properties

document   structure  of   actual  html   document  

window  

loca2on   current  URL   (read/write)   screen   display  device   (resolu5on,  color   depth,  posi5on)   navigator   user  agent   (version,  language   support)    

history   (browsing   history)  

localStorage   local  "database"  at   the  user  agent   (modern  browsers)  

Accessing DOM from scripts •  window object is available everywhere in JavaScript code •  document, location, screen, ... are attributes (properties) of window object! window.location = "http://asdf.com";! window.document.title = "Another document";!

•  window object corresponds to "global" object of jasvascript –  all "global variables" are actually properties of window. –  you can add your own properties to window object: •  var test="test";! •  alert(window.test)!

–  functions which seem to be global, are actually methods of window object •  alert() →window.alert()

DOM standard •  Originally meant for XML structure –  XHTML and HTML are just one of uses –  Many parts of dom are not relevant to HTML

•  Different DOM standards: –  DOM level 1: •  http://www.w3.org/TR/DOM-Level-1/ •  http://www.xml.com/1999/07/dom/xml_dom.gif

–  DOM level 2: •  http://www.w3.org/TR/DOM-Level-2-Core/

–  DOM level 3: •  http://www.w3.org/TR/DOM-Level-3-Core/core.html 7

DOM support in browsers •  Typically, only partial support: –  http://en.wikipedia.org/wiki/ Comparison_of_layout_engines_(Document_Object_Model)

•  Many features of DOM standard are not implemented or have specific implementations •  Additional features are added which are not part of DOM standard –  e.g., .innerHTML attribute 8

FINDING ELEMENTS IN DOM AND WORKING WITH THEM 9

What to do with the DOM? •  Typically, you need to change some element in the page. •  You know where it was in HTML, but how to find it in the DOM tree?

Finding a known element •  If the required element is assigned an ID, you can use the document.getElementById method to find it. –  object hierarchy is ignored –  document.getElementById(some_id) –  if element with such ID is not found, returns null

•  document is a global object and is available just as document starts loading 11

GetElementById example ! ! ! var article = document.getElementById("article");! article.style.border="1px solid red";! 12

Ways to select multiple elements •  These methods return an array of matching elements (which may be empty) –  element.getElementsByTagName(tag)! •  by the HTML element tag name, e.g. all DIV elements

–  document.getElementsByName(name)! •  by "name" attribute assigned to element, useful on input elements

•  In modern browsers –  document.getElementsByClassName(class)! •  foofoo

–  document.querySelectorAll(selector) •  works like a CSS selector 13

WORKING WITH DOM SEARCH RESULTS 14

DOM node attributes •  Once you find the required element, you can change its properties –  properties pf DOM object match attributes of original HTML element –  for instance •  DOM node of an element has attribute .src – once you change it, another image is loaded

15

Example: IMG attributes •  Img element has at least these properties –  –  –  –  –  –  –  –  –  –  – 

align alt border height hspace id isMap src useMap vspace width

'none', 'top', 'left', ... string integer (pixels) integer (pixels) integer (pixels) string boolean url url integer (pixels) integer (pixels)

Slide from Douglas Crockford, The theory of DOM,

http://yuiblog.com/assets/

crockford/theory.zip

What attributes and methods to use? •  Each HTML element has its own attributes, each DOM object has different things you can do with it. •  It is best to lookup HTML DOM reference: –  Googling by required keyword + "object", e.g. "div object" –  Mozilla Developer Network https://developer.mozilla.org/en/ Gecko_DOM_Reference#HTML_interfaces

–  or elsewhere e.g., W3Schools documentation http://www.w3schools.com/HTMLDOM/dom_obj_body.asp

Changing element "outfit" by setting another CSS clsas •  CSS class can be changed by setting className attribute