DOM and jQuery

You may have seen references to a DOM, or Document Object Model.  What this is is a programmatic way of accessing elements within a document.  It most commonly refers to HTML, but there are other DOMs as well.

Traditionally in Javascript, DOM objects are accessed using functions such as document.getElementById. However, these days, script libraries such as jQuery have easier and more flexible ways to access objects. jQuery allows you to use CSS style selectors to identify a set of elements which meet your criteria. The way that the whole library is structured is primarily to focus on dealing with a set of elements instead of a single one. Because the functions generally return the selected elements, you can generally chain together a number of calls into a single line of (surprisingly readable) code very efficiently. For example, to select all anchor tags on a page, give them a CSS class of “test” and make them all fire an alert box when clicked, you would do something like this…

$(‘a’).addClass(‘test’).click(function(){alert(‘Link clicked!’);});

Leave a Reply