DOM Enlightenment

Chapter 12. Creating dom.js: A Wishful jQuery-Inspired DOM Library for Modern Browsers

12.1 dom.js Overview

I want you to take the information and knowledge from this book and leverage it as I walk you through a foundation for a wishful, modern, jQuery-like DOM library called dom.js. Think of dom.js as the foundation to a modern library for selecting DOM nodes and doing something with them. Not unlike jQuery, the dom.js code will provide a function for selecting something from the DOM (or creating something) and then doing something with it. Here are some examples of the dom() function that shouldn’t look all that foreign if you are familiar with jQuery or any DOM utility for selecting elements.

/* select in a document all li's in the first ul and get the innerHTML for the first li
       */
dom('li','ul').html();

//create html structure using a document fragment and get the innerHTML of ul
dom('<ul><li>hi</li></ul>').html()

For most readers, this chapter is simply an exercise in taking the information in this book and applying it to a JavaScript DOM library. For others, this might just shed some light on jQuery itself and any DOM manipulation logic used in JavaScript frameworks today. Ideally, in the end, I hope this exercise inspires readers to craft their own micro-DOM abstractions on an as-needed basis when the situation is right. With that said, let’s begin.

12.2 Creating a Unique Scope

To protect our dom.js code from the global scope, I will first create a unique scope within which it ...