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” />
referenced in a JavaScript program as:
document.images[0]
document.images[logoID]
document.images.logoID
or
or
can be
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 a
JavaScript 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, use
object.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.