it-ebooks - DOM Enlightenment

Exploring the relationship between JavaScript and the modern HTML DOM

From: http://www.domenlightenment.com/

By Cody Lindley Version: 0.6.0

I make websites. Sometimes I make music. Over the years, Ive noticed an interestingpattern of behavior from some musiciansoften self-taughtwho think of themselvesas creative types: they display an aversion to learning any music theory. The logic, theysay, is that knowing the theory behind music will somehow constrain their creativeabilities. Ive never understood that logic (and I secretly believe that its a retroactiveexcuse for a lack of discipline). To my mind, I just dont see how any kind of knowledgeor enlightenment could be a bad thing.

Alas, I have seen the same kind of logic at work in the world of web design. There aredesigners who not only dont know how to write markup and CSS, they actively refuseto learn. Again, they cite the fear of somehow being constrained by this knowledge (andagain, I believe thats a self-justifying excuse).

In the world of front-end development, that attitude is fortunately far less prevalent.Most web devs understand that theres always more to learn. But even amongst developerswho have an encyclopediac knowledge of HTML and CSS, there is often a knowledgegap when it comes to the Document Object Model. Thats understandable. Youdont need to understand the inner workings of the DOM if youre using a library likejQuery. The whole point of JavaScript libraries is to abstract away the browsers internalAPI and provide a different, better API instead.

Nonetheless, I think that many front-end devs have a feeling that they should knowwhats going on under the hood. Thats the natural reaction of a good geek when presentedwith a system theyre expected to work with. Now, thanks to DOM Enlightenment,they can scratch that natural itch.

Douglas Crockford gave us a map to understand the inner workings of the JavaScriptlanguage in his book JavaScript: The Good Parts. Now Cody Lindley has given us thecorresponding map for the Document Object Model. Armed with this map, youll gainthe knowledge required to navigate the passageways and tunnels of the DOM.ix

You might not end up using this knowledge in every project. You might decide to use alibrary like jQuery instead. But now it will be your decision. Instead of having to use alibrary because thats all that you know, you can choose if and when to use a library.Thats a very empowering feeling. Thats what knowledge provides. That is true enlightenment.

Jeremy Keith, founder and technical director of clearleft.com, and author ofDOM Scripting: Web Design with JavaScript and the Document Object Model

This book is not an exhaustive reference on DOM scripting or JavaScript. It may, however, be the most exhaustive book written about DOM scripting without the use of a library/framework. The lack of authorship around this topic is not without good reason. Most technical authors are not willing to wrangle this topic because of the differences that exist among legacy browsers and their implementations of the DOM specifications (or lack thereof).

For the purpose of this book (i.e. grokking the concepts), I'm going to sidestep the browser API mess and dying browser discrepancies in an effort to expose the modern DOM. That's right, I'm going to sidestep the ugliness in an effort to focus on the here and now. After all, we have solutions like jQuery to deal with all that browser ugliness, and you should definitely be leveraging something like jQuery when dealing with deprecated browsers.

While I am not promoting the idea of only going native when it comes to DOM scripting, I did write this book in part so that developers may realize that DOM libraries are not always required when scripting the DOM. I also wrote for the lucky few who get to write JavaScript code for a single environment (i.e. one browser, mobile browsers, or HTML+CSS+JavaScript-to-native via something like PhoneGap). What you learn in this book may just make a DOM library unnecessary in ideal situations, say for example, some light DOM scripting for deployment on a Webkit mobile browser only.

As I authored this book, I specifically had two types of developers in mind. I assume both types already have an intermediate to advanced knowledge of JavaScript, HTML, and CSS. The first developer is someone who has a good handle on JavaScript or jQuery, but has really never taken the time to understand the purpose and value of a library like jQuery (the reason for its rhyme, if you will). Equipped with the knowledge from this book, that developer should fully be able to understand the value provided by jQuery for scripting the DOM. And not just the value, but how jQuery abstracts the DOM and where and why jQuery is filling the gaps. The second type of developer is an engineer who is tasked with scripting HTML documents that will only run in modern browsers or that will get ported to native code for multiple OS's and device distributions (e.g. PhoneGap) and needs to avoid the overhead (i.e. size or size v.s. use) of a library.

• The content and code contained in this book was written with modern (IE9+, Firefox latest, Chrome latest, Safari latest, Opera latest) browsers in mind. It was my goal to only include concepts and code that are native to modern browsers. If I venture outside of this goal I will bring this fact to the readers attention. I've generally steered away from including anything in this book that is browser specific or implemented in a minority of the modern browsers.
• I'm not attempting in this book to dogmatically focus on a specific DOM, CSS, or HTML specification. Its not my goal here to dogmatically represent a specific specification. This would be too large of an undertaking (with little value IMO) given the number of specifications at work and the history/status of browsers correctly implementing the specifications. I have leverage and balanced in a very subjective manner the content from several specifications (Document Object Model (DOM) Level 3 Core Specification, DOM4, Document Object Model HTML , Element Traversal Specification, Selectors API Level 2, DOM Parsing and Serialization, HTML 5 Reference, HTML 5 - A vocabulary and associated APIs for HTML and XHTML, HTML Living Standard, HTML 5 - A technical specification for Web Developers, DOMLiving Standard). The content for this book is based more on where the community is and less on dogmatically attempting to express a specific spec.
• I'm covering several hand picked topics that are not DOM specific. I've included these topics in this book to help the reader build a proper understanding of the DOM in relationship to CSS and JavaScript.
• I've purposely left out any details as it pertains to XML or XHTML.
• I've purposely excluded the form and table api's to keep the book small. But I can see these sections being added in the future.

The DOM Enlightenment HTML version is released under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 unported license.

O'Reilly will release and sell a hard copy & eBook in the near future.

Cody Lindley is a client-side engineer (aka front-end developer) and recovering Flash developer. He has an extensive background working professionally (11+ years) with HTML, CSS, JavaScript, Flash, and client-side performance techniques as it pertains to web development. If he is not wielding client-side code he is likely toying with interface/interaction design or authoring material and speaking at various conferences. When not sitting in front of a computer, it is a sure bet he is hanging out with his wife and kids in Boise, Idaho training for triathlons, skiing, mountain biking, road biking, alpine climbing, reading, watching movies, or debating the rational evidence for a Christian worldview.