HTML and CSS Reference
In-Depth Information
The Document Object Model is a technology and language independent API for interacting
with HTML documents. The API allows developers to access nodes in the document, tra-
verse the document, and manipulate elements in the document.
Each element in the DOM tree is represented by an object. These objects support an API
that allows them to be manipulated. As you will see when we start using jQuery; some-
times we will still encounter native DOM objects, but usually they will be wrapped inside
jQuery specific versions of the objects, and expose additional functionality.
All web browsers that support JavaScript support a JavaScript implementation of the DOM
API. The specific version of the API they support will depend on the browser however, and
this, along with inconsistencies in their implementations, can lead to issues for JavaScript
programmers.
In order to see the DOM API in action, open the Chrome console and type the following:
> document
This will return the DOM representation of the HTML document, which is the exact same
representation we saw from the Elements tab of the developer tools above. This may differ
from the literal document: for instance if the HTML document was not well formed (e.g. it
was missing closing tags), the browser will attempt to construct a well-formed representa-
tion of the document (according to the rules specified in the HTML5 specification).
The DOM API allows us to access elements based on their characteristics; for instance, we
can access the
table
elements with:
> document.getElementsByTagName('table')
In addition to querying, traversing and manipulating the document, the DOM API also al-
lows event listeners to be added to the nodes in the document. These can be used to detect
users clicking buttons, or text being typed into input fields, along with many other types of
event.
jQuery does not allow you to do anything with the DOM that could not be done using the
native JavaScript API, in fact, jQuery is implemented using the native DOM API, and is
therefore essentially an abstraction or wrapper of the DOM API.
Since jQuery does not do anything that cannot be done with the native DOM API you may
wonder what is the use of learning jQuery. For one thing, jQuery provides a genuine cross
browser implementation of the DOM API, and alleviates the quirks that are found in many
browser implementations.
