1. The Document Object Model (DOM) 1 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 DOM History 2

3. The DOM Tree The DOM Tree 3

4. Referencing Objects and Collections 4 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 Referencing a DOM Object 5 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: 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.) 6 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 tags in the document. To get just the first tag, write document.getElementsByTagName(“h1”)[0] Related Methods: object.getElementsByClassName(class) document.getElementById(id) document.getElementsByName(name)

7. Writing HTML Content (HTML5) Writing HTML Content (HTML5) 7 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: Rick Bournique var head1 = getElementsByTagName(“h1”)[0]; alert(head1.innerHTML); alert(head1.outerHTML);

8. Event Handlers as Object Properties 8 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: var ABbutton = document.getElementById(“Angry Birds”); Abbutton.onclick = RunAngryBirds;

9. Setting Inline Styles with JavaScript 9 To apply an inline style to a document object, use object.style.property = text Example: Hello, Rick document.getElementById(“hello”).style.color = “blue”;

10. Creating Object Collections with CSS Selectors 10 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”;

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

12. Dialog Boxes continued Dialog Boxes continued 12 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 A Final Example: English-French Translation 13 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.