DOM JavaScript Cheat Sheet

23 Responses to “DOM JavaScript Cheat Sheet”

1. Gary Barber Says:
   June 27th, 2007 at 1:14 pm

   Nice Idea, but aren’t cheat sheets meant to be crammed with info and have a 3 pt font (that you can’t read at a glance) and have no white space. ;-) This one is none of those things.

2. trevor Says:
   June 27th, 2007 at 3:55 pm

   Nice, but a few notes:

   1.) using the object.property vs object.setAttribute() is NOT a wise move, and totally defeats the purpose of the DOM. .[get/set]Attribute() is cleaner, you just need to accomodate the fact that IE doesn’t follow the spec properly for things like class, for, name, frameborder, cellpadding, cellspacing etc.

   Directly setting values on the object make your code look very 1995.

   There should also be a note, that document.getElementById( id ) is broken in IE, and will also greedily return an element with a name matching the id specified.

3. Chris Heilmann Says:
   June 27th, 2007 at 5:31 pm

   @trevor: that is what I thought, too, but a recent survey on snook’s site made me change my mind, as it is about writing code that works as much as it is about following a standard (hey XMLhttpRequest is only a proposal, don’t use it!). In 1995 I wrote assembler, that didn’t look at all like this code.

   As to IE’s greediness when it comes to name/id: This is a problem, but it also means you planned your page badly when you have an ID and name attribute with the same value on two different elements.

4. Steve Clay Says:
   June 27th, 2007 at 7:00 pm

   @trevor: The HTML DOM was standardized to ease the pain for HTML, so I’ve no problem using it. get/setAttribute may be more to the “spirit” of the DOM, but while IE sucks in that dept., no thanks.

   BTW, it’s htmlFor, not HTMLfor. :)

5. Web Dev Digest Episode 1 | ara pehlivanian—Web Standards, Web Culture, Web Everything.™ Says:
   June 28th, 2007 at 5:59 am

   [...] links: Tantek Çelik refocuses on Microformats Safari/WebKit has a new Web Inspector A small DOM cheat sheet A book review of The Art and Science of CSS Adobe AIR Free Book Download Web [...]

6. Javascript News » DOM JavaScript Cheat Sheet Says:
   June 28th, 2007 at 9:13 am

   [...] « Welcome DOM JavaScript Cheat Sheet http://www.wait-till-i.com/index.php?p=460 Small DOM cheatsheet for some developers, pdf version Ever [...]

7. Javascript News » DOM JavaScript Cheat Sheet Says:
   June 28th, 2007 at 9:13 am

   [...] « Welcome DOM JavaScript Cheat Sheet http://www.wait-till-i.com/index.php?p=460 Small DOM cheatsheet for some developers, pdf version Ever [...]

8. goetsu Says:
   June 28th, 2007 at 9:38 am

   I have question about this :
   Real DOM compliant browsers will return linebreaks as text nodes in the childNodes collection, make sure to either remove them.

   Is there an easy way to do that with a DOM method, i am looking how to do it with jquery too and YUI too

9. Chris Heilmann Says:
   June 28th, 2007 at 6:57 pm

   goetsu: I use this

   
   function cleanChildNodes(id){
     // get the element with the id provided
     var x = document.getElementById(id);
     // test if the element exists
     if(x){
       // regular Expression testing if a string is only whitespace
       var reg = /s*/mg;
       // loop over all childNodes of the element
       for(var i=0;x.childNodes[i];i++){
         // if the current item only consists of whitespace…
         var current = x.childNodes[i];
         if(reg.test(current.nodeValue)){
         // … remove it
           current.parentNode.removeChild(current);
         }
         // there is no need to check for the node type
         // as element nodes have a nodeValue of null
       }
     }
   }
   

10. Dennis Says:
    July 6th, 2007 at 5:59 pm

    Thanks for this Chris. I found it useful. An idea for an enhancement…you can put some simple functions on the back/2nd page…

11. Best of May/June 2007 Says:
    July 9th, 2007 at 12:02 pm

    [...] he basics of an extremely useful concept in CSS, which is being used in CSS Sprites. DOM JavaScript Cheat Sheet A small DOM cheatsheet with the most common DOM methods at a glance. [...]

12. Presseschau für Webentwickler - Ausgabe Juli 2007 | Dr. Web Weblog Says:
    July 9th, 2007 at 12:02 pm

    [...] alker über das Wesentliche, was Sie beim Umgang mit der property wissen sollen.

    DOM JavaScript Cheat Sheet
    Listet DOM-Methoden auf, die in der Web-Entwicklung am häufigsten verwend [...]

13. Best of May/June 2007 | Webdesign (css, grafica e altro) Says:
    July 9th, 2007 at 1:16 pm

    [...] he basics of an extremely useful concept in CSS, which is being used in CSS Sprites. DOM JavaScript Cheat Sheet A small DOM cheatsheet with the most common DOM methods at a glance. [...]

14. lost node » Blog Archive » Best of May/June 2007 Says:
    July 9th, 2007 at 3:30 pm

    [...] he basics of an extremely useful concept in CSS, which is being used in CSS Sprites. DOM JavaScript Cheat Sheet A small DOM cheatsheet with the most common DOM methods at a glance. [...]

15. Best of May/June 2007 | Webdesign (css, grafica e altro) Says:
    July 9th, 2007 at 4:14 pm

    [...] he basics of an extremely useful concept in CSS, which is being used in CSS Sprites. DOM JavaScript Cheat Sheet A small DOM cheatsheet with the most common DOM methods at a glance. [...]

16. Cyber Space in One Hand » Blog Archive » Useful references, tutorials, services, tools, techniques and articles by smashingmagazine Says:
    July 10th, 2007 at 3:25 am

    [...] ains the basics of an extremely useful concept in CSS, which is being used in CSS Sprites. DOM JavaScript Cheat Sheet A small DOM cheatsheet with the most common DOM methods at a glance. CSS St [...]

17. Best of May/June 2007 · Style Grind Says:
    July 12th, 2007 at 3:42 am

    [...] basics of an extremely useful concept in CSS, which is being used in CSS Sprites.
    DOM JavaScript Cheat Sheet
    A small DOM cheatsheet with the most common DOM methods at a glance. [...]

18. Best of May/June 2007 | Webdesign (css, grafica e altro) Says:
    July 12th, 2007 at 8:03 am

    [...] he basics of an extremely useful concept in CSS, which is being used in CSS Sprites. DOM JavaScript Cheat Sheet A small DOM cheatsheet with the most common DOM methods at a glance. [...]

19. Best of May/June 2007 | Webdesign (css, grafica e altro) Says:
    July 13th, 2007 at 11:34 am

    [...] he basics of an extremely useful concept in CSS, which is being used in CSS Sprites. DOM JavaScript Cheat Sheet A small DOM cheatsheet with the most common DOM methods at a glance. [...]

20. Best of May/June 2007 at Design Resources Says:
    July 27th, 2007 at 12:14 pm

    [...] he basics of an extremely useful concept in CSS, which is being used in CSS Sprites. DOM JavaScript Cheat Sheet A small DOM cheatsheet with the most common DOM methods at a glance. [...]

21. Best of Feeds - 58 links - programming, tips, business, code, design « Internet Duct Tape Says:
    July 29th, 2007 at 12:12 am

    [...] ) Freeware app to migrate from flickr to google picassa (flickr, photography, software) [JAVASCRIPT] DOM JavaScript Cheat S [...]

22. Andrew Hedges Says:
    June 26th, 2008 at 2:56 am

    @trevor, Using [set/get]Attribute makes your code look a lot like Java, which it’s not. It’s JavaScript, so use the features of the language that make it expressive and clean, like direct assignment to properties.

23. E Says:
    July 22nd, 2008 at 6:36 pm

    Thanks for posting this. Just what I was looking for.

Leave a Reply