JavaScript Tutorial: Document Object
Model (DOM)
[this page | pdf | back links]
The JavaScript
HTML Document Object Model (‘DOM’) provides a way for JavaScript to access all
elements of an HTML webpage. Fuller details of the DOM are given here. There is an
associated Browser Object Model (BOM), details of which are given here.
The browser creates a DOM
(i.e. a document object) for a
page when the page is first loaded. This has a tree structure, with the root
element (or ‘node’) being the page’s <html> element.
The root element then has two sub-elements (or ‘nodes’), i.e. the <head> element
and the <body>
element.
The <head> element
will in turn often include as one of its ‘child’ nodes a <title>
element. The <body>
element contains the main body of the webpage and will typically contain many
different elements, some nested within others. JavaScript can change all the
elements (including all their attributes), can add new elements or remove
existing ones, can react to all existing events
and create new ones.
Formally, the DOM is a
W3C (World Wide Web Consortium) standard. It has the following aim, according
to W3C: “The W3C Document Object Model (DOM) is a platform and language-neutral
interface that allows programs and scripts to dynamically access and update the
content, structure and style of a document.” It is formally subdivided into
three parts: (a) the Core DOM for all document types, (b) the XML DOM for XML
documents, and (c) the HTML DOM for HTML documents. It adopts an
object-orientated programming approach, with the HTML elements being objects
which have properties and to which can be applied methods. The
elements can also trigger events.
A common way of accessing
an element is to assign it an id (i.e. set its id attribute object to
a prespecified value). The element can then be identified in Javascript by
applying the getElementById method
to the document object, returning an object corresponding to the element. Its
properties (e.g. its innerHTML property, which is the text within an element)
can be set by assigning values to the relevant property of the element object.
For example, the following example returns a web page that says “hello”.
<html>
<body>
<div id="example"></div>
<script>document.getElementById("example").innerHTML
= "hello"</script>
</body>
</html>
Common ways of accessing
the DOM include:
Aim
|
Example JavaScript
|
Description
|
Finding / accessing
elements
|
document.getElementById(id)
|
Returns object
corresponding to element with this id attribute
|
document.getElementsByTagName(name)
|
Returns collection of elements
by tag name (i.e. by type of element)
|
document.getElementsByClassName(name)
|
Returns collection of
elements by class name
|
|
document.querySelectorAll(CSSSelector)
|
Returns collection of
elements by CSSSelector
|
Changing elements
|
element.innerHTML = HTMLcontent
|
Change inner HTML of
element
|
element.attribute = value
|
Change attribute value
of element (value needs to be valid for that attribute)
|
element.setAttribute(attribute, value)
|
Change attribute value
for a given element
|
Adding and deleting
elements
|
document.createElement(element)
|
Creates HTML element
|
document.appendChildElement(element)
|
Add HTML element
|
document.removeChildElement(element)
|
Remove HTML element
|
document.replaceChildElement(element)
|
Remove HTML element
|
document.write(element)
|
Write directly to HTML
output
|
Other points to note
about the DOM include:
(a)
The DOM uses the idea of nodes and a node tree. This involves a tree
structure where each branching point is a separate node. So, nodes belong to
(are children of) just one other node (their parent) back to the root node
(which in the DOM is the document
object)
(b)
HTML elements are ‘element’ nodes, the attributes of these elements are
‘attribute’ nodes, the text within HTML elements are ‘text’ nodes and comments
are ‘comment’ nodes
(c)
A NodeList object represents a set of nodes, e.g. an HTML element’s
collection of child nodes. These will be indexed and each node within the
NodeList can then be associated with another NodeList (its children)
(d)
The HTML document, once it has been loaded into the web browser, is
formally part of the corresponding Window object and can therefore be accessed
via window.document
(e)
The DOM supports a range of (own) methods and properties, see here.
(f)
HTML elements (‘nodes’) within the DOM also support a range of more
generic methods and properties, see here.
These also apply to the document
object itself but do not always make much sense when applied in this manner.
(g)
HTML element attributes are represented by an Attr object. These are
always children of a specific HTML element. The properties and methods that
apply to Attr objects are shown here.
(h)
A NamedNodeMap object represents an unordered collection of nodes, e.g.
the set of attributes assigned to a given HTML element. Properties and methods
that apply to NamedNodeMap objects are shown here.
(i)
The DOM object and its components can be thought of as an example of an
XML document. XML documents have several methods and properties not otherwise
covered in the above (such as XMLHTTPRequest, which can be used to send,
request and receive data from the server once a webpage has loaded), see here.
Further details are set
out in the following pages and in links within them:
1.
DOM
own properties and methods
2.
HTML
Element objects: Properties and Methods
3.
HTML
Attribute objects: Properties and Methods
4.
NamedNodeMap
objects: Properties and Methods
5.
Event
objects: Properties and Methods
6.
MouseEvent
objects: Properties and Methods
7.
KeyboardEvent
objects: Properties and Methods
8.
HashChangeEvent
objects: Properties and Methods
9.
PageTransitionEvent
objects: Properties and Methods
10.
FocusEvent
objects: Properties and Methods
11.
AnimationEvent
objects: Properties and Methods
12.
TransitionEvent
objects: Properties and Methods
13.
WheelEvent
objects: Properties and Methods
14. TouchEvent
objects: Properties and Methods
I.
Style
objects: Properties and Methods
II.
Creating and
Accessing HTML Elements in JavaScript
III.
Standard
HTML DOM properties and methods
IV. The JavaScript BOM (Browser
Object Model)
V.
The
JavaScript XML DOM
NAVIGATION LINKS
Contents | Prev | Next | JavaScript