The Document Object Model (DOM)

1. 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

2. DOM History

3. The DOM Tree

4. Referencing Objects and Collections • When more than one • of the same type of • object exists, these objects are organized into structures called object collections.

5. Referencing a DOM Object To reference an object as part of the collection in a document, use either collection[idref] or collection.idref where idrefis either an index number representing the position of the object in the collection, or the value of the id assigned to that element Example: <imgsrc=“logo.jpg” id=“logoID” /> can be referenced in a JavaScript program as: document.images[0] or document.images[logoID] or document.images.logoID

6. 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)

7. Writing HTML Content (HTML5) The content within an HTML element is also part of the object tree: • innerHTMLproperty 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);

8. 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” /> varABbutton = document.getElementById(“Angry Birds”); Abbutton.onclick = RunAngryBirds;

9. 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”;

10. 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( vari=0; i<lips.length; i++) • lips[i].style.backgroundColor = “pink”;

11. Some Useful Dialog Boxes • JavaScript supports three types of dialog boxes • alert • confirm • prompt • The alert dialog box is created using alert(message);

12. 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”);

13. 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.