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 ...
Get DOM Enlightenment now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.