The Document Object Model

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
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” />
referenced in a JavaScript program as:
can be
Referencing a DOM Object (cont.)
To reference an array of elements based on the tag name, use
where object is an object reference and tag is the name of the element tag.
document.getElementsByTagName(“h1”)gets all the <h1>
tags in the document. To get just the first <h1> tag, write
Related Methods: object.getElementsByClassName(class)
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
<h1>Rick Bournique</h1>
var head1 = getElementsByTagName(“h1”)[0];
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 a
JavaScript program using
object.onevent = function;
<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, use = text
<div id=“hello” style=“color:red”>
Hello, Rick </div>
= “blue”;
Creating Object Collections with CSS Selectors
To create an object collection based on a CSS selector, use
To return only the first object based on a CSS selector, use
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
Dialog Boxes continued
• The confirm dialog box prompts the user for a
yes/no (ok/cancel) response
• Text string input from the user is returned with a
prompt dialog box by using the method
prompt(message, default);
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.

similar documents