Overview

About

To be honest, DOM API isn't one of the best designed APIs ever. It's quite verbose, unintuitive and it lacks some essential features. Combined with the fact that browser developers didn't care so much about standards in the past resulted in situation where working with the DOM in pure JS was a real nightmare.

jQuery with its clean and crossbrowser API seemed to be something like a godsend to me when I first saw it... Side effect of overusing it for virtually everything in the past years is that many developers nowadays doesn't have a clue whats going on under the hood and without jQuery they are simply lost. This usually doesn't matter... until it comes to a performance - jQuery is really nice to work with, but also relatively slow and it can represent a huge performance bottleneck.

Fortunatelly things are evolving as the time goes on. Browsers doesn't remind wild west anymore, DOM API has some cool new features and working with the DOM in vanilla JS isn't so terrible experience as before. If you don't have to care about old crap(IE8, etc) then you can safely consider to "go native" at least while solving prerformance issues. What you'll gain is a noticeable performance boost and finally an idea of how things actually works.

This web isn't meant to be a comprehensive manual. Think of it as a cheat sheet. For further info look e.g. at the great Mozilla's MDN.

Prerequisities

All examples are written with the upcomming DOM4 standard in mind. To make things work, add this polyfill to the page and you are ready:

<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.7.0/dom4.js"></script>

Once older browsers vanishes, you can simply drop polyfill while keeping your codes unchanged as they will work natively.

shopify traffic stats