1. How to bluff your way in DOM Scripting

    Aaron Gustafson and Jeremy Keith

    Easy Designs Clearleft
  2. DHTML vs. DOM Scripting

  3. DHTML vs. DOM Scripting

  4. 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>
  5. The "Tree"-tops

    A visual representation of the document tree for the above document
  6. Digging deeper

    A visual representation of the document tree for the above document, from the paragraph down
  7. CSS

  8. DOM

  9. Getters

    Using getters

  10. A language comparison

  11. Another language comparison

  12. A more complex language comparison

  13. Setters

  14. Creating markup the old way

  15. Setters for creating nodes

    Using setters for creating nodes

  16. Setters for inserting nodes

  17. Example

    Make use of the cite attribute in blockquotes.

    View HTML

  18. Breakdown

  19. Breakdown by method

  20. 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);
      }
    }
  21. 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);
      }
    }
  22. Finished example

    Make use of the cite attribute in blockquotes.

    View HTML

  23. Unobtrusive?!?

    Do unto others:

  24. But how?

  25. But how?

  26. The <select> Replacement: An Example

  27. The <select> Replacement: How It’s Done

  28. More Examples

  29. Will Frameworks Help Me Bluff?

  30. It all depends on the document

  31. Thanks.