How to bluff your way in DOM Scripting
Aaron Gustafson and Jeremy Keith
DHTML vs. DOM Scripting
- DHTML used to be all about animation and interactivity
- Marketing wonks
- Technologies: JS, CSS & HTML
- Baggage: browser-specific, forked code, screen only & non-standard markup
- Maintenance nightmare
DHTML vs. DOM Scripting
- DOM Scripting is the web standards approach to manipulating documents
- Only requires a scripting language and valid markup
- Browser independent
- Graceful degradation and progressive enhancement
- Just makes sense
The Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/XHTML1/DTD/XHTML1-strict.dtd">
<html xmlns="http://www.w3.org/1999/XHTML" xml:lang="en" lang="en">
<head>
<title>Page Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph with a <a href="http://easy-reader.net">link</a></p>
<ul>
<li>a list item</li>
<li>another list item</li>
<li>a third list item</li>
</ul>
</body>
</html>The "Tree"-tops
Digging deeper
CSS
- Combines getters and setters
getter { setter }p { color: red; }#footer { font-size: small; }
DOM
- Separate getters and setters
var myNode = document.getter()myNode.setter()
Getters
document.getElementById(ID)document.getElementsByTagName(tagName)element.getAttribute(attributeName)
Using getters
var myElement = document.getElementById(ID)var myArray = document.getElementsByTagName(tagName)var myString = myElement.getAttribute(attributeName)
A language comparison
-
English
Get the element with the ID "content".
-
CSS
#content { } -
DOM
document.getElementById("content")
Another language comparison
-
English
Get all the paragraphs in a document.
-
CSS
p { } -
DOM
document.getElementsByTagName("p")
A more complex language comparison
-
English
Get all the paragraphs within the element with the ID "content". -
CSS
#content p { } -
DOM
document.getElementById("content").getElementsByTagName("p")
Setters
- Creating nodes
- Inserting nodes
Creating markup the old way
document.write()innerHTML
Setters for creating nodes
document.createElement(tagName)document.createTextNode(text)element.setAttribute(name,value)
Using setters for creating nodes
var myElementNode = document.createElement(tagName)var myTextNode = document.createTextNode(text)myElementNode.setAttribute(name,value)
Setters for inserting nodes
element.appendChild(newNode)element.insertBefore(newNode,targetNode)
Example
Make use of the cite attribute in blockquotes.
Breakdown
- Find all the blockquotes in a document
- Get the value of the cite attribute
- Create a new link element node
- Set the href attribute of the link
- Create a new text node with the word "source"
- Insert the text into the link
- Insert the link into the blockquote
Breakdown by method
- Find all the blockquotes in a document getElementsByTagName
- Get the value of the cite attribute getAttribute
- Create a new link element node createElement
- Set the href attribute of the link setAttribute
- Create a new text node with the word "source" createTextNode
- Insert the text into the link appendChild
- Insert the link into the blockquote appendChild
Code
var quotes = document.getElementsByTagName("blockquote");
for (var i=0; i<quotes.length; i++) {
var source = quotes[i].getAttribute("cite");
if (source) {
var link = document.createElement("a");
link.setAttribute("href",source);
var text = document.createTextNode("source");
link.appendChild(text);
quotes[i].appendChild(link);
}
}Expanded code
var quotes = document.getElementsByTagName("blockquote");
for (var i=0; i<quotes.length; i++) {
var source = quotes[i].getAttribute("cite");
if (source) {
var link = document.createElement("a");
link.setAttribute("href",source);
var text = document.createTextNode("source");
link.appendChild(text);
var para = document.createElement("p");
para.className = "attribution";
para.appendChild(link);
quotes[i].appendChild(para);
}
}Finished example
Make use of the cite attribute in blockquotes.
Unobtrusive?!?
Do unto others:
- 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.
But how?
- Planning
- What is the script’s purpose?
- How is the script used?
- Is the page usable without it?
But how?
- Implementation
- Test for method support, not browsers
- Test for required "hooks"
- Keep ’em separated (objects, etc.)
- Keep it generic (markup independent)
- External is better than inline
The <select> Replacement: An Example
- Starting with a clean/functional document…
- …solve a problem
The <select> Replacement: How It’s Done
- Collect all the
<select>s and with each… - Build a
<ul>that is modelled on it - Figure out which option is selected by default and highlight it
- Assign event handlers to trigger various actions
- Expanding/collapsing
- Routing of selections back to the original
<select> - Tracking of
:focusto trap keyboard events (for additional accessibility)
- hide the
<select>and show the<ul>
More Examples
Will Frameworks Help Me Bluff?
- No (and yes)
- Don’t look like a fool
- Can be used to great effect
- Start slowly & use incrementally —
$()instead ofdocument.getElementById( 'theID' )
It all depends on the document
- You can bluff your way in CSS
- You can bluff your way in DOM Scripting
- You can't bluff your way in markup