DOM Enlightenment

Preface

This book is not an exhaustive reference on DOM scripting or JavaScript. It may, however, be the most exhaustive book written about the HTML DOM 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 such as 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.

Who Should Read This Book

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 OSes and device distributions (e.g., PhoneGap) and needs to avoid the overhead (i.e., size or size versus use) of a library.

Technical Intentions, Allowances, and Limitations

Before reading this book, make sure you understand the following technical intentions, allowances, and limitations:

• The content and code contained in this book was written with modern browsers (IE 9+, Firefox latest, Chrome latest, Safari latest, Opera latest) 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. This would be too large an undertaking (with little value, in my opinion) given the number of specifications at work and the history/status of browsers correctly implementing the specifications. I have leveraged 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: The Living Standard,” Developer version, and DOM Living 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 handpicked 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 pertaining to XML or XHTML.

• I’ve purposely excluded the form and table APIs to keep the book small. But I can see these sections being added in the future.

License

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

This Book Is Not Like Other Programming Books

Before you begin, it is important to understand various styles employed in this book. Please do not skip this section, because it contains important information that will aid you in understanding these unique styles.

The Enlightenment series (also including jQuery Enlightenment and JavaScript Enlightenment) is written in a style that favors small, isolated, immediately executable code over wordy explanations and monolithic programs. One of my favorite authors, C.S. Lewis, asserts that words are the lowest form of communication that humans traffic in. I totally agree with this assertion and use it as the basis for the style of these books. I feel that technical information is best covered with as few words as possible, in conjunction with just the right amount of executable code and commenting required to express an idea. The style of this book attempts to present a clearly defined idea with as few words as possible, backed with real code. Because of this, when you first start grokking these concepts you should execute and examine the code, thereby forming the foundation of a mental model for the words used to describe the concepts. Additionally, the format of these books attempts to systematically break ideas down into their smallest possible form and examine each one in an isolated context. All of this is to say that this is not a book with lengthy explanations or in-depth coverage on broad topics. Consider yourself warned. If it helps, think of it as a cookbook, but even terser and more succinct than usual.

Color-Coding Conventions

In the code examples, bold text is used to highlight code directly relevant to the concept being discussed. Any additional code used to support the bolded code will be in normal font. Italic is reserved for comments. Here is an example:

Live code

<!DOCTYPE html>
<html lang="en">
<body>
<script>

// this is a comment about a specific part of the code
var foo = 'calling out this part of the code';

</script>
</body>
</html>

jsFiddle

The majority of code examples in this book are linked to a corresponding jsFiddle page, where the code can be tweaked and executed online. The jsFiddle examples have been configured to use the Firebug lite-dev plug-in to ensure that the reader views the console.log prevalent in this book. Before reading this book, make sure you are comfortable with the usage and purpose of console.log.

In situations where jsFiddle caused complications with the code example, I simply chose to not link to a live example.

Conventions Used in This Book

The following typographical conventions are used in this book [see also Color-Coding Conventions]:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Note

This icon signifies a tip, suggestion, or general note.

Using Code Examples

This book is here to help you get your job done. In general, if this book includes code examples, you may use the code in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into your product’s documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “DOM Enlightenment by Cody Lindley (O’Reilly). Copyright 2013 Cody Lindley, 978-1-449-34284-5.”

If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at [e-mail].

Safari® Books Online

Note

Safari Books Online (www.safaribooksonline.com) is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business.

Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.

Safari Books Online offers a range of product mixes and pricing programs for organizations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like O’Reilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and dozens more. For more information about Safari Books Online, please visit us online.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

800-998-9938 (in the United States or Canada)

707-829-0515 (international or local)

707-829-0104 (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://oreil.ly/dom-enlightenment.

To comment or ask technical questions about this book, send email to [e-mail].

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia