$ for your DOM minus jQuery or Garfield minus Garfield for your browser 

First: a cat-veat 

So you think you wanna drop jQuery? I would as soon leave my son a curse as the almighty dollar. ~ Andrew Carnegie Things to consider: ● It's elementary, my dear Watson: retrieval is key ● Events are a many splendored splintered thing ● Proper attribution is essential ● Ajax (and other Achilles heels) ● Style is a matter of taste...and complexity ● APIs: the honey is sweet, but the sting is painful 

Elementary (retrieval), my dear Watson We converse as we live by repeating, by combining and recombining a few elements over and over again just as nature does when of elementary particles it builds a world. ~ William Gass ● Context is of supreme importance here: ○ If you are targeting only modern browers, QSA (querySelectorAll) is your best friend. ○ When aiming at a broad range of browsers, you may have to use choose between cumbersome native DOM methods or a 3rd-party library. ○ Decisions, decisions: how much control do you have? 

Going back to elementary school In elementary school, many a true word is spoken in guess. ~ Henny Youngman ● Pure DOM: ○ document.getElementById (EEI* + IE5+) ○ document.getElementsByTagName (EEI + IE6+) ○ document.getElementsByClassName (EEI) ○ Example: IE<=8 Element retrieval (intnt.com) ○ If backwards compatibility is a must and verbosity is no object, go for it! ○ * Everyone Except IE<9 

Elemental violence The most violent element in society is ignorance. ~ Emma Goldman ● CSS Selectors: div.foo, div > p:lang:(en):nth-child(1n+0):not([data^="user-"]) ○ If only using simple selectors (or only targeting modern browsers), you can likely use document. querySelectorAll. ○ NOTE: querySelectorAll supports the same selectors that the browser's CSS engine supports (very few CSS3 selectors in IE<=8) ○ If you need more complicated selectors consider using Qwery or Sizzle. 

Events are a many splintered thing! Not being able to govern events, I govern myself. ~ Michel de Montaigne ● Browsers handle events differently ○ EEI browsers come with great out-of-the-box event functionality. ○ IE<9 has challenges to overcome when handling events. ● Thanks to Javascript's innate flexibility most of IE<9's event troubles are reasonably easy to overcome 

Current Events Great hearts steadily send forth the secret forces that incessantly draw great events. ~ Ralph Waldo Emerson ● EEI Browsers have a familiar API: ○ this is the element the handler is registered on ○ the first argument is an Event object ■ It has a currentTarget property (this), and ■ a target property: the origin of the event ● Standards: (add|remove)EventListener ○ Works for EEI (Everyone Except IE<9) ○ Example: (add|remove)EventListener 

An eventful day A single event can awaken within us a stranger totally unknown to us. ~ Antoine de Saint-Exupery ● IE<9 has some challenges ○ this is the window object! ○ no event argument--accessed via window.event ○ no currentTarget or target (alt. srcElement though) ● How do we make IE<9 behave? ○ use a wrapper that sets the context and event arg ○ Example: (attach|detach)Event 

● Let's put 'em together: ○ We need a cross-browser way to attach|detach event handlers ○ We'd like it to be as performant as possible. ○ We'd prefer to make no distinctions between EEI and IE<9 ● Example: Cross-browser example Eventually consistent At first, dreams seem impossible, then improbable, and eventually inevitable. -- Christopher Reeve 

Divine attributes We always take credit for the good and attribute the bad to fortune. -- Charles Kuralt ● Attributes are NOT properties! ● The inconsistencies between browsers are inconsistent. ● The class attribute (className property) is unique enough to warrant separate handling. ● As usual the camps are EEI and IE<9 

Attriboots are made for walking Never attribute to malice, that which can be reasonably explained by stupidity. ~ Spider Robinson ● With EEI browsers the problem is simple: "the names have been change to protect the innocent..." ● With IE<9 (wait. for. it....yes, you guessed it) things get a bit more complicated. ● To the code, Robin! 

Attributes: in a class of their own And understand: class differences will not save you. ~ H. Rap Brown ● Due to the CSS effects of multiple classes on a single element it is very useful to ○ detect that a given class is applied (hasClass) ○ properly add/append a new class (addClass) ○ remove a single class (removeClass) ○ add, if not exists or remove, if exists (toggleClass) ● To the code! 

Ajax IS a four-letter word ...he was cut off untimely by the spear of mighty Ajax -- Homer We have no bananas today! 

The substance of style Never offend people with style when you can offend them with substance. -- Sam Brown tl;dr -- put styles in your stylesheet dammit! 

APIs & other buzzing insects BZZZZZZZZZ! 

Where to find ● Selector Engines: ○ Qwery: GitHub project ○ Sizzle: GitHub project ○ MicroJS.com: http://microjs.com/#css ● Event libraries: ○ Events.js: GitHub project ○ Bean: GitHub project 

Contact.me GitHub: aaronmccall Twitter: @aaronmccall Geekli.st: aaronmccall Coderwall: aaronmccall