Java Script and the DOM DOM stands for

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

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.

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.

Accessing the DOM is easy 1. Give each of your HTML elements an “ID” 2. Call: var The. Element = document. get. Element. By. ID(“<ID goes here>”) 3. Change the attributes of the element

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

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