DOM og scripting Making it come alive

Hva er DOM? Standard for å definere trestrukturen til XML-dokumenter. IDL-spesifikasjon av grensesnitt, egenskaper og metoder. Bindinger til språk, implementasjoner i JavaScript, Java, Python, Ruby, m.m.

DOM - Utvikling ”DOM Level 0” (Nettleseravhengig). DOM Level 1 (W3C). DOM Level 2. Iteratorer, traversatorer, dokumentfragmenter HTML DOM. Enkel tilgang til viktige egenskaper ved HTML-kode. Style DOM. Enkel tilgang til stilark og stilregler. DOM Level 3: Load and Save. Parser, XHR-funksjonalitet. Validering

DOM: Viktige grensesnitt DOM: Node Document Element TextNode ProcessingInstruction NodeList HTML DOM (eksempler): HTMLSelectElement HTMLOptionElement HTMLInputElement

DOM: Viktige egenskaper DOM: Node.firstChild Node.childNodes Document.documentElement HTML DOM (eksempler): HTMLElement.style HTMLElement.className HTMLSelectElement.selectedIndex HTMLSelectElement.options HTMLInputElement.value

DOM: Viktige metoder DOM: Document.getElementById(id) Document.createElement(tagName) Document.createTextNode(text) Element.getElementsByTagName(tagName) Node.appendChild(node) Node.removeChild(node) Node.replaceChild(newNode, oldNode) Node.getAttribute(attrName) Node.setAttribute(attrName,value) HTML DOM (eksempler): HTMLSelectElement.add(option)

JavaScript Klientside-språk. Kjører i nettleseren. Interpretert Svakt typet Java-syntaks Utviklet av Netscape Standardisert av ECMA => ECMAScript

Implementasjon i JavaScript Browserspesifike implementasjoner av grensesnittene. God støtte for DOM og HTML DOM Level 2. Global variabel document

Eksempel var divs = document.getElementsByTagName(’div’); var div = null; for ( var i = 0, i < divs.length; i++) { div = divs[i]; alert(div.getAttribute(’class’)); }

Events og event handlers Events: click, select, change, submit mouseover, mouseout load, unload, … Event handlers: element.addEventListener(event, function ); element.onclick = function;

AJAX Asynchronous JavaScript with XML JavaScript-objekt: XMLHttpRequest Fil som produserer XML på serveren. XHR gir filen parametere og leser data. Synkront eller asynkront. Blocking vs event handler. Data dyttes inn i websiden med DOM. Ingen reload av siden.

Ressurser W3Cs DOM-aktiviteter: W3Cs DOM-spesifikasjoner: ECMAScript-spec’en international.org/publications/standards/Ecma- 262.htm international.org/publications/standards/Ecma- 262.htm XMLHttpRequest-tutorial mlhttpreq.html mlhttpreq.html