Scribd
Upload
2 views14 pages

COMP 1537 - Week 8 - DOM Creating, And Events (3)

The Document Object Model (DOM) is a data representation of HTML structure that allows for the manipulation of web documents through a specified API. It treats every item in an HTML document as a node, enabling operations like creating, editing, and deleting elements and attributes. Additionally, the document discusses event handling in JavaScript, including types of events and how to respond to them using event listeners.

Uploaded by

Abdullah Anas Al Asmy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views14 pages

COMP 1537 - Week 8 - DOM Creating, And Events (3)

The Document Object Model (DOM) is a data representation of HTML structure that allows for the manipulation of web documents through a specified API. It treats every item in an HTML document as a node, enabling operations like creating, editing, and deleting elements and attributes. Additionally, the document discusses event handling in JavaScript, including types of events and how to respond to them using event listeners.

Uploaded by

Abdullah Anas Al Asmy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

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
 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

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
Copyright Ⓒ 2022, Arron Ferguson
and root element?
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"
,
 The window object (which represents a tab in the browser)
function(event)
{ console.log("…"); },false);
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_Mod
el/Introduction
 https://developer.mozilla.org/en-US/docs/Web/API/Document_object_mod
el
 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

You might also like