THE DOCUMENT
OBJECT MODEL
CSS has one way of ‘seeing’ an HTML
page – a kind of document selector
model. JavaScript has a different way
of exposing the structure of an HTML
document. The JavaScript language uses
the programming concept of objects to
expose APIs. Browsers, for example,
provide a window object to JavaScript
that describes the current browser
window. The HTML page inside that
window is exposed through another
object called the document object. Unlike
CSS, with its vocabulary of selectors,
JavaScript ‘sees’ an HTML page through
this Document Object Model or DOM.
During the bad old days of the browser
wars in the 1990s, when JavaScript first
arrived on the scene, browsers shipped
with conflicting DOM vocabularies.
Netscape Navigator had one way of
describing a document – document.layers –
while Microsoft’s Internet Explorer used
document.all instead. Developers had to
fork their code, using feature detection tofigure out which code to send to which
browser. It was intolerable.
Eventually browsers converged on
a standardised vocabulary for DOM
scripting. Methods like document.
getElementsByTagName and document.
getElementById were the JavaScript
equivalents of element selectors and ID
selectors in CSS.
Using JavaScript and the DOM,
developers were able to add extra
interactivity to their otherwise static
pages. To begin with, the interactions
were quite basic. Image rollovers were
popular: when the user moved their
cursor over an image, JavaScript could
swap out the image. Form validation was
another common use of JavaScript and
the DOM. Scripts can ‘listen’ for events- like when a user submits a form – and
execute code to check that the inputs
conform to certain criteria.
Interestingly, both of those use cases
can now be accomplished without
JavaScript. If you want to change how
an element looks when the user mouses
it, you can use :hover in CSS. If you want
form fields to only allow certain kinds of
values, you can use HTML5 input types
like email, URL and number. These
popular use cases have made their way
down from the powerful – but fragile
–scripting layer into the more forgiving –
but less powerful – declarative layers.JQUERY, AJAX
AND MORE
Most DOM scripting patterns – like
image rollovers and form validation –
involve finding a particular part of a
document and then executing code when
a particular event is fired. You could
summarise these patterns as: ‘Find stuff
and do stuff to it’.
To ‘f ind st uf f’, you needed to use DOM
methods. But, in the mid-2000s, John
Resig created a JavaScript library to
make it easier for developers to do DOM
scripting. He called it jQuery.
There were many other JavaScript
libraries around at the time –
script.aculo.us, MooTools and more.
What distinguished jQuery was that
it enabled you to ‘find stuff’ using the
selector syntax of CSS. If you already
knew CSS, you no longer had to learn a
separate vocabulary for interacting with
HTML. This was hugely empowering for
designers and developers who understood
HTML and CSS but were intimidated by
the steeper learning curve of JavaScript.
jQuery was so popular that it influenced
the design of the DOM’s vocabulary. You
can now use the document.querySelector
method to ‘find stuff’ in an HTML
document using CSS selectors.
With the rise of jQuery, the web saw an
increase of interactive widgets. Carousels,
modal windows and fly-out menus
became commonplace. At the same time,
the web was being swept by Ajax fever.
Ajax is a JavaScript technique that allows
the document currently loaded in the
browser window to send and receive data
from a web server without refreshing the
whole page. Now the web was a viable
medium for applications. Gmail and‘Find stuff and do stuff to it’ was the unofficial mantra of the
jQuery project. “Write less, do more” is the library’s tagline
(https://jquery.com/)FEATURES
Connect the web’s building blocks