The Document Object Model (DOM)

• JavaScript is an object-based language—that is, it’s based on manipulating objects by changing each object’s properties or by applying a method or an action to each object, often in response to an event

• JavaScript supports four kinds of objects– Built-in objects– Document objects– Browser objects– Customized objects

DOM History

The DOM Tree

Referencing Objects and Collections

When more than one of the same type of object exists, these objects

are organized into structures called object collections.

Referencing a DOM Object

To reference an object as part of the collection in a document, use either collection[idref] or collection.idref

where idref is either an index number representing the position of the object in the collection, or the value of the id assigned to that element

Example: <img src=“logo.jpg” id=“logoID” /> can be referenced in a JavaScript program as:

document.images[0] or document.images[logoID] or document.images.logoID

Referencing a DOM Object (cont.)

To reference an array of elements based on the tag name, use object.getElementsByTagName(tag)

where object is an object reference and tag is the name of the element tag.

Example: document.getElementsByTagName(“h1”)gets all the <h1> tags in the document. To get just the first <h1> tag, write document.getElementsByTagName(“h1”)[0]

Related Methods: object.getElementsByClassName(class) document.getElementById(id) document.getElementsByName(name)

Writing HTML Content (HTML5)

The content within an HTML element is also part of the object tree:

– innerHTML property gives you the content only– outerHTML property gives you content and element

Example: <h1>Rick Bournique</h1> var head1 = getElementsByTagName(“h1”)[0]; alert(head1.innerHTML); alert(head1.outerHTML);

Event Handlers as Object Properties

To run a function when the page is initially loaded by the browser, use window.onload = function;

Any document object can be assigned an event handler from within aJavaScript program using

object.onevent = function;

Example: <input type=“button” value=“Play” id=“Angry Birds” />var ABbutton = document.getElementById(“Angry Birds”);Abbutton.onclick = RunAngryBirds;

Setting Inline Styles with JavaScript

To apply an inline style to a document object, useobject.style.property = text

Example: <div id=“hello” style=“color:red”> Hello, Rick </div>

document.getElementById(“hello”).style.color = “blue”;

Creating Object Collections with CSS Selectors

To create an object collection based on a CSS selector, use document.querySelectorAll(selector)

To return only the first object based on a CSS selector, use document.querySelector(selector)

Example: li p {background-color: yellow}

var lips = document.querySelectorAll(“li p”);for( var i=0; i<lips.length; i++) lips[i].style.backgroundColor = “pink”;

Some Useful Dialog Boxes

• JavaScript supports three types of dialog boxes– alert– confirm– prompt

• The alert dialog box is created using alert(message);

Dialog Boxes continued

• The confirm dialog box prompts the user for a yes/no (ok/cancel) response

confirm(message);• Text string input from the user is returned with a

prompt dialog box by using the method prompt(message, default);

Example:var name = prompt(“Name:“, “Enter your name”);

A Final Example: English-French Translation

Using the DOM and the methods/ properties we discussed tonight let’s create a web page that displays a list of phrases in French. Whenever the user mouses over a phrase with the button pressed, the phrase changes from French to English. Lifting the button, changes back to French.

Tricks we’ll use:• this – a JavaScript-reserved name for the current object

owning a function or method.• parseInt – method to take a string with numeric

characters at the beginning and extract the number.