Starter kit for developing your own jQuery-compatible DOM library
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Do-It-Yourself DOM Library


diy-dom-library is a starter kit for developing you’re own jQuery-based DOM library. It includes:

  • a basic JavaScript class (DomWrapper) with placeholder methods and a global $ shortcut to the class’ constructor
  • an HTML playground to mess around with some DOM
  • unit tests so you can feel good about your progress

The purpose of this is of course to learn. And have fun. You’ll love to find out how jQuery uses these low-level DOM APIs internally to build an expressive, powerful and flexible API on top of it.

Why jQuery?

Because it has become the de facto standard and everyone is familiar with its API. If you’ve never used jQuery, you’re probably not into front-end web development. Zepto is also based on a jQuery-compatible API.

Getting started

git clone
cd diy-dom-library
git submodule init # for qunit
git submodule update


Open test/index.html in a browser of your choice.

“Is this thing complete?”

Definitely not! Feel free to add missing methods and tests.


First of all, please don’t waste your time with cross-browser compatibility first. Start by coding for and testing in your favourite browser only. This way you won’t encounter quirks that require you to find two different solutions to the same problem before considering it done. You will progress much faster and will be much more motivated.

You might want to iterate on your project by multiple steps. Then this could be a pretty good road map to have:

(already baked in with love)



The Basics


.text([text]) (be careful about how you decide to get or set…)
.html([html]) (be careful about how you decide to get or set…)




.find([selector]) (watch out for duplicates!)

.css (accept numbers for pixel values, but there’s a catch…)

.on(event, callback)

Always make sure calling methods on empty DomWrapper sets doesn’t break!

Grown Up

$(selector, context)

.addClass, .removeClass, .toggleClass with multiple classes





.on('event1 event2 event3', callback)

Then you could start thinking about cross-browser support.

Advanced (overkill…)


.append, .prepend, .before and .after with multiple arguments


event delegation



Just skim through The Great Compatibility Tables and you’ll learn plenty. Other articles are also worth mentioning:

Mozilla Developer Network

Of course.


Surprisingly awesome resource for anything client-side, including massive amounts of cross-browser tips.

Can I use?

Scroll to the bottom, click “Show all” and explore!

Random clues

querySelectorAll, createContextualFragment, insertAdjacentHTML, getComputedStyle, matchesSelector


And while you’re here to learn… why not try to write this DOM library semicolonless from top to bottom? See if you can look back after then… ;)