DOM (Document Object Model)

To have a DHTML or to achieve the full interaction on the web

page, there should be the access to the pieces and part of a web
page at the programming level.
Web browser are required to provide a feature known as the
DOCUMENT-OBJECT-MODEL (DOM).
DOM essentially creates a programmatic interface around all
of the content in a web page.
That is making it possible for any part to be accessed and
modified with script code.
Without DOM, it would be virtually impossible to alter a web
page using script.
DOM consists of the hierarchy of objects that describes every
bit of content in a web page.
 The Dom consists four main types of nodes
Document node: It represents the entire page and it corresponds to
document object. When you access any element, attribute, or text
node you navigate to it via document node.
Element node: It represents the actual element that we want to
access its text and attributes like <h1> to <h6> or <p>.
Attribute node: The opening tag of HTML elements can carry
attribute and these are represented by attribute node in Dom tree.
N.B Attribute nodes are not children of the element that carries rather
they are part of that element.
Text node: Text nodes Can’t have children.
Working with DOM
Accessing and updating the Dom tree involve two steps:
✓ Locate the node that represents the element you want to work with.
✓ Use its text content, child element and attributes.
Step-1 Access the element
❖Select an individual element node. The methods used are getElementById() or
querySelector().
❖Select Multiple elements (Node list). The methods used are
getElementByClassName(), getElementByTagName() or querySelectorAll().
❖ Traversing between Element node: parentNode, previous Sibling/
nextSibling or firstChild/lastChild.
1) Using getElementById()

2 Using getElementByClassName()
 Step-2 Modify the Content
Modify text only: To collect text from element (and ignore any markup
inside the element) textContent property is used on the element. You can
also use this property to update the content of the element; it replaces the
entire content of it (including any markup).
E.g.

In this case textContent property

would return the value: fresh figs.

The textContent property can also be used to update the content.

 Modify HTML Content: innerHTML can be used on any element node. It is
used both to retrieve and replace content. To update an element new
content is provided as a string. Unlike textContent it can contain markup
for descendent element.
Get Content

It will return ‘<em> fresh </em> figs’

Set Content

This code add the content of elContent

variable (including any markup) to the first
item.
Example
N.B Using innerHTML can pose a significant security risks like Cross-site
scripting attack(XSS) attack. So, we have to use with consideration.
Dom Manipulation: offers another technique to add new content to a page.
It involves three steps. createElement(), createTextNode(), appendChild().
When the element node is
created, it is not yet part of the DOM tree. It is not added to the DOM tree
until appendchild() method is called.
Accessing attributes (Attribute Node): After accessing an element
node, properties and methods can be used on that element node to
access and change its attributes.
 Events
When you browse the web, your browser registers different
types of events.
The script can then respond to these events. i.e. updating the
content of the web page (via the Document Object Model) which
makes the page feel more interactive.
In general, event handling consists three processes.
✓ Interaction creates events.
✓ Events trigger code.
✓ Code responds to user.
 Events Types
This table show a selection of events that occur in the browser
while you are browsing the web.
 How Event trigger JavaScript code
As we said earlier, When the user interacts with the HTML on a
web page, there are three steps involved in getting it to trigger
some JavaScript code. The following steps are listed at the
beginning of discussion.
These steps together known as event handling.
Step-1 Select the element node you want the script to respond to.
Step-2 Indicate which event on the selected node will trigger the
response. (Event binding)
Step-3 State the code you want to run when the event occurs.
The next example shows how event handling can be used to
provide feedback to users filling in a registration form.
 Step-1 Select the element
✓ The element in this case is the text
input where they enter the username.
Step-2 Specify Event
✓ When users move out of the text
input, it loses focus, and the blur event
fires on this element.
Step-3 Call Code
✓ When the blur event fires on the
username input, it will trigger a
function called checkUsername().
✓ Event handlers let you indicate which event you are waiting
for on any particular element. There are three types of event
binding mechanism.
1) Html Event handler: Early version of HTML included a set of
attributes that could respond to events on the element they were
added to.
 ✓ The attribute names matched the event names.
✓ The attribute value calls the function that was to run when that
event occurred.
E.g. <a onclick= “hide()”> indicate that when a user clicked on this
<a> element, the hide() function would be called.
N.B This method of event handling is no longer used because it is
better to separate the JavaScript from the HTML.
Dom Event Listener (as a method): They are considered better than
HTML event handlers because they let you separate JavaScript from
the HTML.
✓ The advantage is it is supported in all major browsers. The main
drawback is that you can only attach a single function to any
event.
✓ The Syntax to bind an event to an element using this event
handler is

✓ When a function is called, the parentheses that follow its

name
tell the JavaScript interpreter to "run this code now." In most cases
We don't want the code to run until the event fires, so the
parentheses are omitted from the event handler on the last line.
3)
Event Listeners: They are now the favored way of handling
events.
✓ unlike traditional event handlers, these newer event
listeners allow one event to trigger multiple functions.
✓ The syntax to bind an event to an element using an event
listener is
 Using Parameters with Event handler and Listeners
Problem: We can’t have parentheses after the function names in
event handlers or listeners otherwise it will be invoked immediately
when the page loads rather than waiting until the event triggers it.
Solution: If you need to pass arguments to a function that is called
by an event handler or listener, you wrap the function call in an
anonymous function.
Reading Assignment
Event flow ------------ Event Bubbling vs Event Capturing