The following are my panel notes from SXSW. As I am not the fastest typer I have paraphrased what was said. Should you notice any mistakes please do point them out in the comments for corrections.
Jeremy Keith and Aaron Gustafson
DOM scripting is the new CSS.
AG: DHTML vs DOM SCripting
People thought it was a language all to itself. You have a lot of code forking. People did a lot of stuff for screen only and it also used a lot of non-standard markup. DHTML is a maintenance nightmare - browser detection etc.
Once web standards came along it then became possible to get into JS again. Browser independent, no detection required. It's a more hi-fi experience. How does the DOM see the document. The DOM is like a tree where each of the elements are represented as nodes. With children and siblings of all the nodes. Beyond that you have text nodes and anchor nodes.
This gives a lot of control to manipulate the document.
JK: The DOM is another way of looking at a page. You can get and set styles with CSS (getter and setters) for example
p { color: red }In javascript you use methods to get and set properties.
var myNode = document.getter();If it has parentheses it's a method, if it doesn't it's a variable.
Examples of getters:
document.getElementById(ID)
document.getElementByTagName(tagname)
myElement.getAttribute(attributeName)English: get the element with the ID content
CSS: #content { }
DOM: document.getElementId("content")
You can also create nodes. You can clone and destroy nodes too. (unlimited power)
document.write is nasty, innerHTML vomits markup into the page. InnerHTML is a sledgehammer to crack a walnut but is widely supported.
Using setters to createnodes:
When you create an element you need to assign it to a variable.
var myElementNode = document.createElement(tagname)Appendchild allows you append that node as a child of the node.
Creating markup in a useable way:
Blockquotes, and cite attribute.
Find all of the blockquotes in the document.
Get the value ofd the cite attribute
Create and new link element node
Set the href attribute
Create and new text node with the word source
insert the text into the link
insert the link into the blockquote
Additional steps are to use a paragraph element to contain the link so that it's valid markup.
AG:
who's used onclicks (everyone) Do unto others as they do to you.
Unobtrusive
no JS that's cool enjoy the content.
Got JS? Let me improve you experience
Don't support this method? Ok I'll go away
Planning:
What is the script's purpose?
How is the script used?
Is the page usable without it?
Implementation:
Test for the method support no browsers
Test for required "hooks"
Keep 'em separated
Keep it generic (markup independent)
The select replacement: an example
Replace with an unordered list.
Collect all of the selects and build a unordered list. Assign event handlers to make it behave like the select. Return the value of the selected item back to the form so the value is stored. Track focus so that it works with the keyboard.
hide the select and show the ul
email obfuscation. Write that email address using javascript so that the mailto: works. converts joeblog[at]site[dot]com to working mailto: link.
Improving the printed page :before and :after
Script goes through and puts the links as references at the bottom of the page.
Adding stripes to tables:
Find all the tables in the document
loop through the table
find all the rows
loop through every second row
change the background color of the row. (better way is to use a class name)
now the style changes are in the CSS file
Check for the method geElementsByTagname and if the method isn't supported it won't run the code.
Q: the practicalities of using the DOm to generate content.
InnerHTML is faster.
Simon Willison: It's easier to create the structure of everything and then add it to the document rather doing it on the fly.
Frameworks.
ProtoTypes:
Start slowly and work incrementally. The dollar function saves you having to keep writing document.getElementById