The Adventures of Cindy Li

SXSW 2006: How to bluff your way through DOM scripting

March 11 , 2006

DHTML vs Dom Scripting
Aaron Gustafason and Jeremy Keith

DHTML used to be all about animation and interactivity

• Marketing wonks
• Technologies: JS, CSS & HTML
• Baggage: browser-sepcific, forked code, screen only & non-standard markup
• Maintenance nightmare

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

You can recyle your knowledge of CSS and reuse it for DOM

Combines and getters and setters getter { setter } p { color: red; } #footer { font-size: small; }

DOM

Separate getters and setters var myNode - document.getter() myNode.setter() Functions and properties is that the methods and properties they belong to a specific object Method-function anything with a .

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

All three below are the same English:Get the lement with the ID “Content”. CSS:#content {} DOM:document.getElementByID("Content")

A more complex language comparison

English Get all the paragraphcs within the element with the ID "content". CSS: #content p {} DOM: document.getElementByID(“content”).getElement

(Darn it.. the slide changed)

Setters

• Creating nodes
• Inserting nodes

Creating markup the old way was ugly back in the day. It’s nasty you put a ton of markup in between the () document.written() innerHTML Using setters for creating nodes

Setters for creating nodes

document.createElement(tagName) document.createTextNode(text) element.setAttribute(name, value) Using setters for creating nodes

damn.. slide changed again.

Setters for inserting nodes

element.appendChild (newNode) element.insertBefore(newNode, targetNode)

Don’t worry about memorizing

What is it that you want to do? Write a script? Not a javascript. Write what you want. In english.

Find all the blockquotes in a document, start looping through each one

• 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"creatTextNode
• Insert the text into the link appendChild
• Insert the link into the blockquote appendChild

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.

Planning

• What is the script’s purpose?
• How is the script used?
• Is the page usable without it?

But how? Impementation

• Test for method support, not browser
• Test for required “hook”
• Keep ‘em separated (objects, etc.)
• Keep it generic (markup independent)

The</select> replacement: An Example

• Collect all the <i/select><iselect> s and with each…)
• Build a <ul> that is modeled on it)
• Figure out which option is slected by default and highlight it)
• Assign event handlers to trigger various actions)
• expanding/collapsing)
• routing of selections back to the original <select>)
• tracking of : focus to trap keyboard events (for additional..)

(damn slide changed)

More examples

• Email obsfuscation: before and after
• Improving the printed page

(Darn it! slide changed again)

Created footnotes for the page

Code

var tables =document.getElementsByTagName (“table”); for (var 1=0; i

If you use a standards compliant browser you will get an enhanced experiecne You would get a striped content table.

www.drink-drive-lose.com/adchallenge/

Aaron created 800x600 page. It jumps to a wider version of the site

Fixed vs Liquid pages…

domscripting.dev/domsters/index.html

In the striping tables. On a big table would there be a performance hit? A guy that would test it.. Peter Paul Koch(sp??) quarksmode.com

Will framework help me bluff?

No (and yes) Don’t look like a fool Can be used to great effect Start slowly and use incrementally

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