Title: Rocking the DOM
1Rocking the DOM
Session 04
2Rocking the DOM
Tonights agenda
- Questions?
- Design time
- The DOM
- Unobtrusive JS
3Questions?
Holler if youve got em
4Design Time
Show us your design face
5The DOM
You already know it
- Document Object Model
- Nesting
Kevin Yanks and Cameron Adams. Simply JavaScript.
SitePoint, 2007
6The DOM
You already know it
Text nodes
Kevin Yanks and Cameron Adams. Simply JavaScript.
SitePoint, 2007
7The DOM
You already know it
Attributes
Kevin Yanks and Cameron Adams. Simply JavaScript.
SitePoint, 2007
8The DOM
Getting what you want
HTML
ltp idintrogtTextlt/pgt
CSS
intro font-size 12px
JavaScript
document.getElementById(intro)
9The DOM
Getting what you want
HTML
ltpgtTextlt/pgt
CSS
p font-size 12px
JavaScript
document.getElementsByTagName(p)
10Lets Do Something
First obtrusively
Event Handler (in HTML)
ltform method"post" id"contact_form"
onsubmit"sayhi()"gt
The JavaScript
ltscript typetext/javascriptgt var first_name
document.getElementById(first_name).value
alert(welcome_message) lt/scriptgt
11Lets Do Something
Now unobtrusively
Waiting for the DOM to load
window.onload function() all your JS
Checking for compatibility
if(!document.getElementsByTagName) return false
Event listening
contact_form.onsubmit function() sayhi()
12Wrap Up
Next time jquery