Filtering a Selection (^) ❘ 35
Of course, the concept of having unique id names is not something the browser can enforce; you
must enforce this when you create your documents. If you don’t consciously consider this, the
browser will happily allow you to create multiple elements with the same id name. If you do create
multiple elements with the same id name, you miss out on the benefi ts of optimizations that involve
narrowing the scope of possible elements in a selection by using the id name as an initial selector. If
you use unique id names, then similarly to a database, the browser can build a fast index to access
those elements in the DOM. Because it can fi nd those elements quickly, applications built on top of
optimizations using id names can also be much quicker.
Think of the DOM like a database table. Even if you aren’t familiar with relational databases (like
MySQL, SQL Lite, Postgres SQL, or Microsoft SQL Server), the analogy is helpful to understand a
little something about how computers organize information for effi cient lookup. Like this book, if you
want to locate information about a particular topic quickly, your best bet is going to be the book’s
index section. It has information broken down by topics and phrases, sorted alphabetically, and pro-
vides a listing of pages those topics or phrases appear on. Relational databases work much the same
way; they contain a warehouse of information, but they need indexes of their own to fi nd information
quickly. A relational database has a collection of physical locations on the hard disk, and indexes,
just like with physical books, help provide a way of looking up that information quickly. The docu-
ment object model is no different. It is a collection of HTML elements, and those elements each have
attributes that can be used to organize that data. The DOM is also organized like a tree; it has a root
element, , and from there it branches, adding children and children of children until the entire
DOM is mapped. So, when you provide extra metadata like id and class names, you are providing a
way to identify those elements in the DOM, using both JavaScript and CSS. Of course, you don’t have
to always use id or class names. Sometimes you can use just the name of the element itself to identify
the element, and sometimes you need only a handful of class or id names to meaningfully organize
your document in a way that makes it easy to style with CSS or program with JavaScript. You can also
identify elements using HTML attributes, which is more common in my experience, with elements
such as elements, where you might want to apply style based on whether an element is a text
input or a password input. And now with HTML5, we have a dozen or so possible types of inputs.
When it comes to the DOM, however, it is best to design your dynamic, interactive applications
in the most effi cient way possible, and more often than not, that starts with a selection involving an
id name. The second most effi cient way to select an element will be using class names. Class names
differ from id names in that class names can be applied to many elements. Elements with the same
class name should share some common characteristics. You should be essentially saying that ele-
ments with the same class name are the same, but they appear multiple times in your document.
One example might be a class name that applies to an element that serves as a container for labels
for input elements. You might have many such labels in your document, and each label will have the
same characteristics in terms of its look and feel. You might have a few variations on the look and
feel to accommodate edge cases in the visual layout. For those edge cases you might invent a few
new class names that can modify the base look and feel for those situations.
Whatever the situation you are creating an application to accommodate, your id and class names
should be designed to aid in both effi cient styling with CSS and effi cient lookup using the DOM in
JavaScript. You want your application to fi nd these elements as quickly as possible, using the least
amount of additional metadata that is necessary. This will feel like a statement that is at odds with
itself, and in some ways it is. You don’t want to be too liberal in creating and assigning id and class
names because that will make your document more bulky. When it comes to bandwidth, you want
http://www.it-ebooks.info
elliott
(Elliott)
#1