1. HTML DOM
The Document Object Model is a Javascript class that defines HTML elements as objects. It supports …
properties
methods
events
Image from
See for more on the DOM

2. DOM Elements
Finding elements: document.getElementById(id) document.getElementsByTagName(tag) document.getElementsByClassName(class)
Finding HTML objects: document.links document.readyState document.lastModified
Changing elements: element.innerHTML = new html content element.attribute = new value element.setAttribute(attribute, value) element.style.property = new property
Arguments must be passed as strings
See for more HTML objects
readyState is either loading, interactive, or complete (returned as a string)

3. HTML DOM Events
There are 3 ways of registering event handlers for a DOM element:
HTML Attribute: <button id="mybutton" onclick="alert('Hello world!')">
Event Listener: var myButton = document.getElementById("mybutton"); myButton.addEventListener('click', function(){alert('Hello world');}, false);
DOM Element Property: myButton.onclick = function(event){alert('Hello world');};
See for how to register handlers
See for a list of event handlers

4. Types of Events Mouse events Keyboard events Form events Media events
onclick, ondblclick
onmousedown, onmouseup
onmouseover, onmouseout
Keyboard events
onkeydown, onkeypress, onkeyup
Form events
onfocus, onblur
onchange, onselect
onsubmit
Media events
oncanplay, onwaiting, onpause
See for a complete listing

5. Event Functions
Event handlers can accept an argument of this to refer to what was clicked on function changeIt(obj) { obj.innerHTML = "I've changed!"; } … <p onclick="changeIt(this)"> Click on this paragraph to change it </p>
Event handlers can also accept an argument of event: to access the event's properties function locateIt(evt) { var xval = evt.clientX; var yval = evt.clientY; alert("Clicked at " xval + ", " + yval); } … <p onclick="changeIt(this)"> Click somewhere on this paragraph to see a location </p>
See for how to register handlers
See for a list of event handlers

6. Event Object Properties
Event handlers can accept an argument of this to refer to what was clicked on function changeIt(obj) { obj.innerHTML = "I've changed!"; } … <p onclick="changeIt(this)"> Click on this paragraph to change it </p>
Event handlers can also accept an argument of event: to access the event's properties function locateIt(evt) { var xval = evt.clientX; var yval = evt.clientY; alert("Clicked at " xval + ", " + yval); } … <p onclick="changeIt(this)"> Click somewhere on this paragraph to see a location </p>
See for how to register handlers
See for a list of event handlers
See for event properties, and for a discussion on how these properties vary among web browsers.

7. Example: Slideshow
1) Create containers using absolute-positioned container elements <header>
<h1>Visions of Maine</h1>
</header>
<div id="leftscroll"> <button onclick="scrollleft()">
<<</button></div>
<div id="rightscroll">
<button onclick="scrollright()">
>></button></div>
<div id="imgcontainer">
<img id="myimage">
</div>

8. Example: Slideshow
2) Style the elements so that they are centered #leftscroll {
position: absolute;
left: 0px; top: 50%; height: 50px;
margin: -25px px; }
#rightscroll {
right: 0px; top: 50%; height: 50px;
margin: -25px 20px 0 0;
#imgcontainer {
left: 150px; top: 100px; right: 150px; bottom: 30px;
img {
position: relative;
height: 100%; width: auto;
margin: 0 auto 0 auto;
See for tips on centering divs

9. Example: Slideshow
3) Define the images in an array var plist = new Array("img1.jpg", "img2.jpg", "img3.jpg");
var pindex = 0;
var plen = plist.length;
4) Define the scrolling functions var myImage = document.getElementById("myimage");
myImage.src = plist[0];
function scrollright() {
pindex++;
if (pindex >= plen) pindex = 0;
myImage.src = plist[pindex]; }
function scrollleft() {
pindex--;
if (pindex < 0) pindex = plen-1;