Loose notes from SXSW 2006 session “How To Bluff Your Way In DOM Scripting”
DHTML vs. DOM scripting: DHTML was created by marketing wonks – a bunch of bluffers. The problem with DHHTML was that it had a lot of baggage – browser-specific code, lots of forking (yourself and your application). Lots of people doing stuff for screen only. Lots we can do improve accessibility. DOM scripting is the best approach to adding interactivity with respect for web standards. DHTML was a maintainability nightmare.
Aaron Gustafson and Jeremy Keith.
This session was very code heavy and I couldn’t keep up with the typing. Gave up at a certain point. Slides from the session should be posted at domscripting.com.
CSS was last year’s “bluff” session, but CSS is yeterday’s news (kidding).
Web standards is what enabled us to harness the structure of the DOM. DOM is a standardized API, can be used against any language (Python if you like). Embraces graceful degradation (which is becoming passe’ in favor of progressive enhancement).
The DOM is like a sitemap, or pagemap. Each piece is a node, with <HTML> as the parent element, wich children, siblings, yadda yadda.
Inside the paragraph containing a link, broken into nodes, you have the text node, an anchor element, an attribute node (the href), etc.
There are many ways of looking at a page, depending on your mindset. Using CSS, you view a page in terms of named elements. So there’s strong linkage between CSS and DOM scripting. So you can recycle your CSS knowledge.
CSS contains getters and setters:
getter { setter }
selector { styles }
The DOM is different in that it has separate getters and setters.
var myNode = document.getter()
myNode.setter()
A method is a function and a property is a variable.
document.getElementById(ID)
document.getElementsByTagName(tagName)
element.getAttribute(attributeName) — you must already have an element to use this.
Ussing getters
var myEleemnt = docuemnt.getElement(ID)
Syntax of three languages: English, CSS, and the DOM:
Get the element with the ID ‘content’.
#content { }
document.getElementByID(“content”)
Get all the paragraphs i a docuemnt
p { }
document.getElementsByTagName(“p”)
Get all the paragphs withi the elemnt with the ID “content”.
#content p { }
document.getElementByID(“content”).getElementsByTagName(“p”)
Setters – So you can manipulate elements after they’ve alredy been loaded into the browser.
The old way:
document.write()
innerHTML — pukes out everything – like using a sledgehammer to crack a walnut, whereas the DOM setters are like a scalpel
The new way:
document.createElement(tagName)
document.createTextNode(text)
element.setAttribute(name,value)
Using setters for creating nodes:
var myElementNode = docuemnt.createElement(tagName)
Creating an element and displaying it are two different things. So you must use a variable.
var myTextNode = docuemt.createTextNode(text)
myElementNode.setAttributge(name,value)
Setters for inserting nodes:
element.appendChild(newNode)
element.insertBefore(newNode,targetNode)
Example: Make use of the cite attribute in blockquotes:
Default browser behavior is to do bugger all – nothing. So it’s been ignored. But semantically, it’s lovely.
– Find all the blockquotes in a document
– Get the value of the cite attribute for each
– Create a new link element node
– Set the href attribute of the link
– Create a new text node with the word “source”
– Inser the text into the link
– Insert the link into the blockquote
Now translate it into javascript using the DOM vocabulary:
(Code not readable — get slides for this?)
UNOBTRUSIVE JAVASCRIPT = The golden rule. No JS? That’s cool, enjoy the content. Got JS? Let me try to improve your experience. Don’t support this method? NO big deal, I’ll go away.
Good planning. What is thescript’s purpose? How is the script used? Is your page usable without it?
Implementation: Test for methods, not browsers. Test for required “hooks.” Keep ’em separated (objects, etc.) Keep it generic (makrup independent).
Striking a balance between fixed and liquid layout: JavaScript that displays different design based on the browser viewport size: resize the window and the complete design changes.