COMP 1537

The Document Object Model (DOM)

& Events
Copyright Ⓒ 2022, Arron Ferguson
 WHAT IS THE DOCUMENT OBJECT MODEL?

 The DOM is the data representation within the runtime environment that represents
HTML structure
 Where structure could be:
 An entire HTML document (including, but not limited to the current loaded document)
 HTML snippets that are in-memory
 The W3C DOM:
 Has a specified set of programming calls
memorize
 Referred to as an Application Programming Interface (API)
 Has programming language bindings for Java, PHP, C#, C++, ECMA Script (so JavaScript,
ActionScript)
 A model driven parser (tree based)
 Reads the entire XML (HTML in our case) document into memory
 And load the XML elements, attributes, comments, namespaces, etc., into memory
 Where each element item is an in-memory object
 This creates an in-memory hierarchical representation of the document

"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." Copyright Ⓒ 2022, Arron Ferguson
DOM CONCEPTS (1/4)

 Different things in a page are represented by different data structures

 But all objects in the DOM are of type node; node is like the Object class in Java
 Node is the super type of the following:

Copyright Ⓒ 2022, Arron Ferguson

DOM CONCEPTS (2/4)

 The DOM treats every item in an XML (HTML too) document as a node (this is the
super type)
 The node super type has several sub types:
 Elements, text, PI, namespace, document, comment, entity, attribute, and a few others
 Each of the node types is represented in memory using programming language objects
 Allowing the manipulation (add/edit/delete) of each type in a concise & consistent manner

 NodeList is the type returned when asking for a node's child nodes (could be
elements, text, etc.)
 The NodeList object is a collection of child nodes
 List of types for DOM
 So, how does the W3C DOM see an XML/HTML document?

Copyright Ⓒ 2022, Arron Ferguson

DOM CONCEPTS (3/4)

 A few things to note:

 Document is a node (and a subtype of the
node data type)
 The document node has 3 child nodes: PI,
DOCTYPE, and the root element
 The XML declaration does not show up as a
child node of the document node (but PIs,
DOCTYPE declarations do)
 Strings of continuous text are considered
nodes too
 Even tabs, new lines and space are considered
“textual data” and are considered nodes
 As how the previous diagram demonstrates
 With the exception being the root of the
document
 Parsers usually ignore the text nodes before the
root element
 Notice the newline between the PI and
DOCTYPE
 And the newline between the DOCTYPE
and root element?

Copyright Ⓒ 2022, Arron Ferguson

DOM CONCEPTS (4/4)

 Attributes are not considered “child nodes” of the their surrounding element
 They are considered “properties” of the element they are contained within
 Attributes do have text nodes
 Or rather they have a text node
 Since only one the API call doesn't require a call to child nodes

Copyright Ⓒ 2022, Arron Ferguson

CREATING ELEMENTS & ATTRIBUTES

 The document (which is of type document) object has many properties and many
methods as well (see DOM-creating.html)
 Some properties that are commonly used:
 body, forms, images, links, scripts
 Some methods that are commonly used:
 createTextNode(), getElementById(), createAttribute(), getElementsByClassName(),
getElementsByName(), getElementsByTagName(), querySelector(), querySelectorAll(),
appendChild(), setAttribute(), replaceChild(), createElement() – to name a few!

 Can also programmatically add style too (see DOM-styling-

programmatically.html)
 And very important to traverse/find elements (see DOM-traversing.html)

Copyright Ⓒ 2022, Arron Ferguson

DOM SUMMARY

 With JavaScript, we can:

 Create new elements, style elements, add attributes, change attributes
 Use CSS selectors to select elements and sub-trees
 You can replace certain parts of a document with newly created content
 You’ll be doing this for your next assignment

 Look at DOM examples now …

Copyright Ⓒ 2022, Arron Ferguson

INTRO TO DOM EVENTS

 Events are 'things' that happen

 E.g., page loaded, user clicked on a button,
 E.g., user dragged an icon onto a div
 E.g., user moused over a form, video finished playing
 Events in JavaScript are generated by the JavaScript runtime
 And are represented by event objects
 E.g., MouseEvent, KeyEvent
 Each of these types of events has properties and methods that can be called

Copyright Ⓒ 2022, Arron Ferguson

TYPES OF DOM EVENTS

 There are event types for various different things that happen
 Mouse events – mouse click, mouse over, etc.
 Key events – key pressed, key down, key up, etc.
 Window events – page finished loading, etc.
 Form events – user attempted to submit, etc.
 Clipboard events – user copied/pasted, etc.
 Media events – media data is loaded, etc.
 For more on each of the event types, see:
 https://developer.mozilla.org/en-US/docs/Web/Events

Copyright Ⓒ 2022, Arron Ferguson

RESPONDING TO EVENTS (1/3)

 How to respond to events?

 Use event listeners – listeners are almost identical to callbacks
 Listeners are specific to UI runtimes

 Event listeners are objects that respond to a certain type of event

 You create an event listener method that catches the event
 And (hopefully) does something meaningful as a response

 Event listener methods:

 addEventListener, removeEventListener

Copyright Ⓒ 2022, Arron Ferguson

RESPONDING TO EVENTS (2/3)

 Element addEventListener:
element.addEventListener(event, function,
useCapture);
 Where:
 Element is a DOM element (e.g., div)
 Event is an event (e.g., click)
 Function is a defined function, could be a(n):
 Anonymous function expression
 Function declaration
 useCapture: true or false
 Capture is at the beginning of the event
 Bubble is at the end of the event

Copyright Ⓒ 2022, Arron Ferguson

RESPONDING TO EVENTS (3/3)

 Which objects do you use to capture events?

 Any DOM element
document.getElementById("p1").addEventListener("click",
function(event) { console.log("…"); },false);
 The window object (which represents a tab in the browser)
window.addEventListener("load", function(event) {
console.log("…"); }, false);

 Look at DOM event examples now …

Copyright Ⓒ 2022, Arron Ferguson

RESOURCES (1/1)

 https://developer.mozilla.org/en-
US/docs/Web/API/Document_Object_Model/Introduction
 https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model
 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
 https://developer.mozilla.org/en-US/docs/Web/Events
 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
 https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-
phases

Copyright Ⓒ 2022, Arron Ferguson