Week 13 - 14 Advanced JavaScript (DOM & JSON) - 1

Document Object
Model (DOM)
Manipulation
John Rovie Balingbing | WS101

TOPICS TO TACKLE
1. Document Object Model (DOM) Manipulation

2. Form Validation and Interactive Web Forms
3. Event Handling and Listeners
Document Object Model (DOM) Manipulation
When a web page is loaded,

the browser creates a
Document Object Model of
the page.
The HTML DOM model is

constructed as a tree of
Objects:
WHY LEARN DOM MANIPULATION?
With the object model, JavaScript gets all the power it needs to
create dynamic HTML:
● JavaScript can change all the HTML elements in the page

● JavaScript can change all the HTML attributes in the page
● JavaScript can change all the CSS styles in the page
● JavaScript can remove existing HTML elements and attributes
● JavaScript can add new HTML elements and attributes
● JavaScript can react to all existing HTML events in the page
● JavaScript can create new HTML events in the page
What is
Document Object
Model (DOM)?
What is DOM?
The DOM defines a standard for accessing documents:
"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."
The W3C DOM standard is separated into 3 different parts:
● Core DOM - standard model for all document types

● XML DOM - standard model for XML documents
● HTML DOM - standard model for HTML documents
What is HTML DOM?
The HTML DOM is a standard object model and programming
interface for HTML. It defines:
● The HTML elements as objects

● The properties of all HTML elements
● The methods to access all HTML elements
● The events for all HTML elements
In other words: The HTML DOM is a standard for how to get,

change, add, or delete HTML elements.
Let’s talk about
DOM Methods~
What is HTML DOM Methods?
HTML DOM methods are actions you can

perform (on HTML Elements).
HTML DOM properties are values (of HTML

Elements) that you can set or change.
DOM Methods Examples
DOM Properties Examples
DOM
Programming
Interface
<html>
<body>
<p id="demo"></p>
The following <script>

example changes document.getElementById("demo").innerHTML =
the content (the "Hello World!";
innerHTML) of the </script>
<p> element with
id="demo": </body>
</html>
The getElementById Method
The most common way to access an HTML

element is to use the id of the element.
In the example above the getElementById

method used id="demo" to find the element.
The innerHTML Property
The easiest way to get the content of an element

is by using the innerHTML property.
The innerHTML property is useful for getting or

replacing the content of HTML elements.
The HTML DOM
Document Object
The HTML DOM Document Object
The document object represents your web page.
If you want to access any element in an HTML

page, you always start with accessing the
document object.
Finding HTML Elements
Changing HTML Elements
Adding and Deleting Elements
JavaScript Form
Validation
JavaScript Form Validation
HTML form validation can be done by JavaScript.
If a form field (fname) is empty, this function

alerts a message, and returns false, to prevent the
form from being submitted:
<head>
<script>
function validateForm() {
let x =
document.forms["myForm"]["fname"].value;
The following
if (x == "") {
example changes
alert("Name must be filled out");
the content (the
return false;
innerHTML) of the
}
<p> element with
}
id="demo":
</script>
</head>
JavaScript DOM
Events
JavaScript Events
A JavaScript can be executed when an event

occurs, like when a user clicks on an HTML
element.
To execute code when a user clicks on an element,
add JavaScript code to an HTML event attribute:
onclick=”JavaScript Code”
JS DOM Events Examples
● When a user clicks the mouse

● When a web page has loaded
● When an image has been loaded
● When the mouse moves over an element
● When an input field is changed
● When an HTML form is submitted
● When a user strokes a key
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>
In this example, the
content of the <h2
<h1> element is onclick="this.innerHTML='Ooops!'">C
changed when a lick on this text!</h2>
user clicks on it:
</body>
</html>
HTML Event Attributes
To assign events to HTML elements you can use

event attributes.
<button onclick="displayDate()">Try it</button>

The onmouseover
and onmouseout
Events
The onmouseover and onmouseout events can be used to trigger a
function when the user mouses over, or out of, an HTML element:
<!DOCTYPE html> <script>
<html> function mOver(obj) {
<body> obj.innerHTML = "Thank You"
<h1>JavaScript HTML Events</h1> }
<h2>The onmouseover Attribute</h2> function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
<div onmouseover="mOver(this)" onmouseout="mOut(this)" }
style="background-color:#D94A38;width:120px;height:20p </script>
x;padding:40px;">
</body>
Mouse Over Me</div>
</html>
The onmousedown,
onmouseup and
onclick Events
The onmousedown, onmouseup
and onclick Events
The onmousedown, onmouseup, and onclick events are all
parts of a mouse-click. First when a mouse-button is
clicked, the onmousedown event is triggered, then, when
the mouse-button is released, the onmouseup event is
triggered, finally, when the mouse-click is completed, the
onclick event is triggered.
The onmouseover and onmouseout events can be used to trigger a
function when the user mouses over, or out of, an HTML element:
<!DOCTYPE html> <script>
<html> function mDown(obj) {
<body> obj.style.backgroundColor = "#1ec5e5";
<h1>JavaScript HTML Events</h1> obj.innerHTML = "Releasev Me";
<h2>The onmousedown Attribute</h2> }
function mUp(obj) {
<div onmousedown="mDown(this)" obj.style.backgroundColor="#D94A38";

onmouseup="mUp(this)"
obj.innerHTML="Thank You";
style="background-color:#D94A38;width:90px;height:20px;
padding:40px;"> }
Click Me</div> </script>

The addEventListener()
method
The addEventListener() method
document.getElementById("myBtn").addEventListener("click", displayDate);
The addEventListener() method attaches an event handler to the

specified element.
The addEventListener() method attaches an event handler to an

element without overwriting existing event handlers.
You can add many event handlers to one element.

The addEventListener() method
When using the addEventListener() method, the JavaScript is

separated from the HTML markup, for better readability and allows
you to add event listeners even when you do not control the HTML
markup.
You can easily remove an event listener by using the

removeEventListener() method.
Syntax: document.element.addEventListener(event, function, useCapture);

THANK YOU!
Do you have any questions?

Week 13 - 14 Advanced JavaScript (DOM & JSON) - 1

Uploaded by

Copyright:

Available Formats

Week 13 - 14 Advanced JavaScript (DOM & JSON) - 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Week 13 - 14 Advanced JavaScript (DOM & JSON) - 1

Uploaded by

Copyright:

Available Formats

Document Object

John Rovie Balingbing | WS101

1. Document Object Model (DOM) Manipulation

When a web page is loaded,

The HTML DOM model is

● JavaScript can change all the HTML elements in the page

"The W3C Document Object Model (DOM) is a platform and

The W3C DOM standard is separated into 3 different parts:

● Core DOM - standard model for all document types

● The HTML elements as objects

In other words: The HTML DOM is a standard for how to get,

HTML DOM methods are actions you can

HTML DOM properties are values (of HTML

The following <script>

The most common way to access an HTML

In the example above the getElementById

The easiest way to get the content of an element

The innerHTML property is useful for getting or

The document object represents your web page.

If you want to access any element in an HTML

HTML form validation can be done by JavaScript.

If a form ﬁeld (fname) is empty, this function

A JavaScript can be executed when an event

● When a user clicks the mouse

To assign events to HTML elements you can use

<button onclick="displayDate()">Try it</button>

<!DOCTYPE html> <script>

<html> function mOver(obj) {

<body> obj.innerHTML = "Thank You"

<h1>JavaScript HTML Events</h1> }

<h2>The onmouseover Attribute</h2> function mOut(obj) {

obj.innerHTML = "Mouse Over Me"

<div onmouseover="mOver(this)" onmouseout="mOut(this)" }

<!DOCTYPE html> <script>

<html> function mDown(obj) {

<body> obj.style.backgroundColor = "#1ec5e5";

<h1>JavaScript HTML Events</h1> obj.innerHTML = "Releasev Me";

<h2>The onmousedown Attribute</h2> }

<div onmousedown="mDown(this)" obj.style.backgroundColor="#D94A38";

Click Me</div> </script>

The addEventListener() method attaches an event handler to the

The addEventListener() method attaches an event handler to an

You can add many event handlers to one element.

When using the addEventListener() method, the JavaScript is

You can easily remove an event listener by using the

Syntax: document.element.addEventListener(event, function, useCapture);

You might also like