Client-side Web Technology

CSC8740

Document Object Model (DOM)

School of Sciences, USQ

Workshop 7-A, S2 2021

Workshop 7-A, S2 2021 1

The Document Tree

▶ The HTML document defines a “tree” of elements.
▶ The browser “parses” the HTML document and constructs an
element tree within memory — the entire contents of the
document is stored in memory.
▶ Once constructed within memory — the document tree is
traversed (in depth order) and the viewport image is
constructed.
▶ If all browsers create the same “tree” then all browsers should
— display the document the same way and JavaScript code
should behave the same way.
▶ Only HTML5 defines how the document is to be parsed and
how errors are to be interpreted.
▶ Should(?) be the same behaviour from all browsers!
▶ XHTML guarantees the identical internal “tree” for all parsers.

Workshop 7-A, S2 2021 2

The Document Tree

Workshop 7-A, S2 2021 3

The DOM

▶ The DOM is an Application Programming Interface (API) —

a library of predefined procedures that can be used to access
the browser’s internal document representation.
▶ It is designed to allow access to XML documents in general —
not just HTML documents.
▶ The DOM allows the browser’s internal JavaScript engine
direct access to the internal document representation.
▶ Every part of a loaded document can be accessed and
changed using procedures in the DOM library.
▶ The DOM API is defined by the structure of XML documents
not any one language—it can lead to confusion.
▶ Many languages provide the DOM API — JavaScript, Python,
C, C++, &c.

Workshop 7-A, S2 2021 4

The Document Object Model
The DOM…

▶ Browsers that contain a JavaScript interpreter provide access

to the DOM via JavaScript code — not all browsers have a
JavaScript interpreter!
▶ Try not to rely on JavaScript for critical functions — always
plan for a graceful fallback!
▶ The DOM API defines methods (procedures) and properties
(variables) — they are defined using Object Oriented
language.
▶ The OO metaphor can lead to confusion — JavaScript
objects, methods and properties are a variant on the OO
metaphor.

Workshop 7-A, S2 2021 5

JavaScript and the DOM

▶ JavaScript code is run at the point in the document load it is

discovered.
▶ The JavaScript code is run to completion — it will not be
interrupted — all other loading is paused.
▶ A fatal bug: code that never finishes — page loading hangs.
▶ Code that is accessing the document’s DOM — must run
after the page has loaded and the DOM fully created.
▶ Normal practice is to run code at the end of the
document—script placed at end of the HTML document.
▶ A file containing a library of procedures (no code to execute
immediately) can be loaded at the top of the HTML page.
Functions will be parsed and ready to be used by the script at
the end of the document.

Workshop 7-A, S2 2021 6

The Document Object Model
JavaScript and the DOM…
▶ Use the HTML script element to load JavaScript.
▶ Example:
<script type="text/javascript" src="Dynamic.js">
// Contains functions that can be used to add
// some non-CSS dynamic effects to the page
</script>
▶ Add comments to describe the purpose of the loaded
JavaScript file.
▶ Most browsers require explicit begin and end script tags.
For example—
<script type="text/javascript" src="Dynamic.js"></script>
The parsers appear to needs it to know where the JavaScript
finishes.
▶ Never use the src attribute and include explicit JavaScript in
the same tag. Undefined results!
Workshop 7-A, S2 2021 7

The Document Object Model

JavaScript and the DOM…

▶ Many lines of JavaScript within <script>...</script> is

not a good idea (as a lot of explicit CSS is not a good idea).
▶ Try and keep languages apart: HTML in HTML file, CSS in
CSS file and JavaScript in JavaScript file. All mixed together
it is difficult to maintain and debug the page.
▶ Imagine a single page containing large amounts of HTML,
CSS and JavaScript — and trying to understand the content
and debugging it!
▶ Good modular practice:
▶ Load JavaScript file(s) at top of page. Defining all the
functions and global variables required.
▶ At the bottom explicitly within the the
<script>...</script> tag call one function—the main
function that is the entry point of the code for the page.

Workshop 7-A, S2 2021 8

The Document Object Model
DOM Interfaces
▶ As the DOM has been developed for XML generally the API is
very general but also incorporates specific additions for
standard XML languages: HTML, SVG, HTML Canvas,
SMIL, &c.
▶ A DOM interface defines the methods, properties and
recognised events associated with a specific part of the
document tree.
▶ “Interface” — DOM term as it provides an API to access a
particular aspect of the document tree.
▶ DOM methods will return JavaScript objects that represent a
DOM Interface and allow access to interface methods and
properties (OO programming: an instantiated class).
▶ A JavaScript object may allow access to the methods,
properties and events of more than one interface—as one
interface may be a child of another.
Workshop 7-A, S2 2021 9

The Document Object Model

Predefined DOM object

▶ If only DOM methods can produce DOM objects how do you

start?
▶ There is one predefined DOM object used as the entrance into
the DOM.
▶ “document” variable — predefined object into the DOM
Document Interface
▶ Allows access to the document root and all its children.
▶ Also allows access to the window containing the document —
if it is a Web Browser constructing the DOM

Workshop 7-A, S2 2021 10

The Document Object Model
Predefined DOM object

▶ To access the Interface methods and properties — use the

standard dot notation —
▶ used to access the contents of “abstract data types” such as
JavaScript objects
▶ For example:
var win = document.defaultView
var url = document.documentURI
var sec = document.createElement("section");
document.getElementById('Chapter_1').appendChild(sec);
▶ Dot notation is interpreted left-to-right so it can be
concatenated without the addition of new variables.

Workshop 7-A, S2 2021 11