1. Java Script and the DOM DOM stands for: –The Document Object Model When a browser reads a web page, it converts it’s contents from HTML into a hierarchical programming structure called the “DOM”.

2. Objects “Objects” are the focus for “Object Oriented Programming”. The concept is simple, anything you want your program to talk to is an object. Objects can have different “attributes” and you can change these through programming. In the DOM, all your HTML elements have become “objects” that your program can manipulate.

3. Typical DOM Objects Window – the browser window Document – the web page Image – an image Div – a div tag Heading – a heading tag See where this is going? All of your HTML elements become objects in the DOM.

4. Accessing the DOM is easy 1.Give each of your HTML elements an “ID” 2.Call: var TheElement = document.getElementByID(“ ”) 3.Change the attributes of the element

5. What you can change The source of an image The color of just about anything Borders, fonts, font sizes, margins, padding, etc. The position and size of elements (yes you can make them move around on the screen!).

6. You can also: Create “popup” windows Make maps zoom and pan Animate charts (now I’m excited!)