Document Object Model (DOM)

a set of JavaScript objects that represent each element on the page

each tag in a page corresponds to a JavaScript DOM object
JS code can talk to these objects to examine elements' state
- e.g. see whether a box is checked
we can change state
- e.g. insert some new text into a div
we can change styles
- e.g. make a paragraph red

How to get DOM elements in JS:

Ask for them by id: document.getElementyById(...)
Query for them with CSS style selectors:
- document.querySelector(...)
- document.querySelectorAll(...)
Make new ones! document.createElement(...)

Getting a DOM element in JS:

HTML


var pTag = document.getElementById("october");

JavaScript

What's inside a DOM object?

For starters, the HTML attributes. This HTML:


<img src="images/puppy.png" alt="A fantastic puppy photo"/>

HTML

Has a DOM object (let's call it puppyImg) with these two properties:

puppyImg.src -- set by the browser to images/puppy.png
puppyImg.alt -- set by the browser to "A fantastic puppy photo"


<p>See our <a href="sale.html" id="saleslink">Sales</a> today!</p>
<img id="icon" src="images/borat.jpg" alt="Borat" />
<caption class="photo user-upload">Beauty.</caption>

HTML


var icon    = document.getElementById("icon");
var theLink = document.getElementById("saleslink");
var caption = document.querySelector("caption");

JavaScript

Property	Description	Example
`tagName`	element's HTML tag	`icon.tagName` is `"IMG"`
`className`	CSS classes of element	`caption.className` is `"photo user-upload"`
`src`	URL target of an image	`icon.src` is `"images/borat.jpg"`
href	URL target of a link	`theLink.href` is `"sale.html"`

`innerHTML` property

All DOM elements have a property called innerHTML that has the contents of the HTML tag as a string:


<ul id="dr-seuss">
    <li>Thing 1</li>
    <li>Thing 2</li>
</ul>

HTML


var elm = document.getElementById("dr-seuss");
// elm.innerHTML : "\n    Thing 1
\n    Thing 2\n"

JavaScript


<a id="fb-link" href="http://www.facebook.com">Facebook</a>

HTML

Before the JavaScript runs, we'd see:

Facebook

And after we run this Javascript:


var link = document.getElementById("fb-link");
link.innerHTML = "MySpace is back in a really big way."

JavaScript

We'd see:

MySpace is back in a really big way.

Unobtrusive JavaScript

JavaScript event code seen previously was obtrusive, in the HTML; this is bad style
now we'll see how to write unobtrusive JavaScript code
- HTML with no JavaScript code inside the tags
- uses the JS DOM to attach and execute all JavaScript event handlers
allows separation of web site into 3 major categories:
- content (HTML) - what is it?
- presentation (CSS) - how does it look?
- behavior (JavaScript) - how does it respond to user interaction?

Obtrusive event handlers (bad)

<button onclick="okayClick();">OK</button>

HTML

// called when OK button is clicked
function okayClick() {
    alert("booyah");
}

JavaScript

this is bad style (HTML is cluttered with JS code)
goal: remove all JavaScript code from the HTML body

Attaching an event handler in JavaScript code

objectName.onevent = function;

<button id="ok">OK</button>

HTML

var okButton = document.getElementById("ok");
okButton.onclick = okayClick;

JavaScript

it is legal to attach event handlers to elements' DOM objects in your JavaScript code
- notice that you do not put parentheses after the function's name
this is better style than attaching them in the HTML

When does my code run?

<html>
<head>
    <script src="myfile.js" type="text/javascript"></script>
</head>
<body> ... </body>
</html>

HTML

var x = 3;
function f(n) { return n + 1; }
function g(n) { return n - 1; }
x = f(x);

myfile.js -- JavaScript

your file's JS code runs the moment the browser loads the script tag
- any variables are declared immediately
- any functions are declared but not called, unless your global code explicitly calls them
at this point in time, the browser has not yet read your page's body
- none of the DOM objects for tags on the page have been created yet

A failed attempt at being unobtrusive

<html>
<head>
    <script src="myfile.js" type="text/javascript"></script>
</head>
<body>
<div><button id="ok">OK</button></div> 
(... more html ...)

HTML

var btn = document.getElementById("ok");
btn.onclick = okayClick;  // this is bad: btn is null at this point

myfile.js -- JavaScript

problem: global JS code runs the moment the script is loaded
script in head is processed before page's body has loaded
- no elements are available yet or can be accessed yet via the DOM
we need a way to attach the handler after the page has loaded...

The `window.onload` event

function functionName() {
    // put code to initialize the page here
}

// instruct window to run the function when the page has loaded:
window.onload = functionName;

JavaScript

there is a global event called window.onload event that happens once everything in the page has been loaded
if you attach a function as a handler for window.onload, it will run at that time

An unobtrusive event handler

<button id="ok">OK</button>   <!-- (1) -->

HTML

// called when page loads; sets up event handlers
function pageLoad() {
    var ok = document.getElementById("ok"); // (3)   
    ok.onclick = okayClick;
}

function okayClick() {
    alert("booyah");                        // (4)
}

window.onload = pageLoad;                   // (2)

JavaScript

Common unobtrusive JS errors

event names are all lowercase, not capitalized like most variables
```
window.onLoad = pageLoad;
window.onload = pageLoad;
```
you shouldn't write () when attaching the handler
(if you do, it calls the function immediately, rather than setting it up to be called later)
```
ok.onclick = okayClick();
ok.onclick = okayClick;
```
- our JSLint checker will catch this mistake

related: can't directly call functions like alert; must enclose in your own function

ok.onclick = alert("booyah");
ok.onclick = okayClick;

function okayClick() { alert("booyah"); }

Anonymous function example

window.onload = function() {
    var ok = document.getElementById("ok");
    ok.onclick = okayClick;
};

function okayClick() {
    alert("booyah");
}

JavaScript

or, the more concise, but perhaps harder to read:

window.onload = function() {
    document.getElementById("ok").onclick = function() {
        alert("booyah");
    };
};

Unobtrusive styling

function okayClick() {
    this.style.color = "red";       // <-- bad style
    this.className = "highlighted"; // <-- better style
}

HTML

.highlighted { color: red; }

CSS

well-written JavaScript code should contain as little CSS as possible
use JS to set CSS classes/IDs on elements
define the styles of those classes/IDs in your CSS file

The danger of global variables

var count = 0;
function incr(n) {
    count += n;
}
function reset() {
    count = 0;
}

incr(4);
incr(2);
console.log(count);

globals can be bad; other code and other JS files can see and modify them
How many global symbols are introduced by the above code?
3 global symbols: count, incr, and reset

Enclosing code in a function

function everything() {
    var count = 0;
    function incr(n) {
        count += n;
    }
    function reset() {
        count = 0;
    }

    incr(4);
    incr(2);
    console.log(count);
}

everything(); // call the function to run the code

JavaScript

the above example moves all the code into a function; variables and functions declared inside another function are local to it, not global
How many global symbols are introduced by the above code?
1 global symbol: everything (can we get it down to 0?)

The "module pattern"

(function() {
    statements;
})();

wraps all of your file's code in an anonymous function that is declared and immediately called
0 global symbols will be introduced!
the variables and functions defined by your code cannot be messed with externally

JavaScript "strict" mode

"use strict";

...your code...

JavaScript

writing "use strict"; at the very top of your JS file turns on strict syntax checking:
- shows an error if you try to assign to an undeclared variable
- stops you from overwriting key JS system libraries
- forbids some unsafe or error-prone language features
You should always turn on strict mode for your code in this class!

JS Skeleton

HTML

(function() {
    window.onload = function() {
       // phew! your code goes here
    };
})();

JavaScript

The DOM

The DOM

Visualizing the tree

Document Object Model (DOM)

How to get DOM elements in JS:

Getting a DOM element in JS:

What's inside a DOM object?

`innerHTML` property

Ok, what do we do with DOM objects?

Unobtrusive JavaScript

Unobtrusive JavaScript

Obtrusive event handlers (bad)

Attaching an event handler in JavaScript code

When does my code run?

A failed attempt at being unobtrusive

The `window.onload` event

An unobtrusive event handler

Common unobtrusive JS errors

Anonymous functions

Anonymous function example

Unobtrusive styling

The danger of global variables

Enclosing code in a function

The "module pattern"

Module pattern example

JavaScript "strict" mode

JS Skeleton

The DOM

The DOM

Visualizing the tree

Document Object Model (DOM)

How to get DOM elements in JS:

Getting a DOM element in JS:

What's inside a DOM object?

innerHTML property

Ok, what do we do with DOM objects?

Unobtrusive JavaScript

Unobtrusive JavaScript

Obtrusive event handlers (bad)

Attaching an event handler in JavaScript code

When does my code run?

A failed attempt at being unobtrusive

The window.onload event

An unobtrusive event handler

Common unobtrusive JS errors

Anonymous functions

Anonymous function example

Unobtrusive styling

The danger of global variables

Enclosing code in a function

The "module pattern"

Module pattern example

JavaScript "strict" mode

JS Skeleton

`innerHTML` property

The `window.onload` event