JavaScript DOM

HTML DOM
DOM stands for Document Object Model. When a browser loads a web page, the browser
creates a Document Object Model of that page. The HTML DOM is created as a tree of
Objects.
The HTML DOM is a standard for how to get, change, add, or delete HTML
elements.
Example:
<html>
<head>
<title>My Page Title</title>
</head>
<body>
<script type="text/javascript">
</script>
<div>
<h1>This is browser DOM</h1>
</div>
</body>
</html>
HTML DOM
For this HTML a graphical representation of the Document Object Model is
shown below.
HTML DOM
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
DOM Methods
The HTML DOM can be accessed with JavaScript (and with

other programming languages).
In the DOM, all HTML elements are defined as objects.
The programming interface is the properties and methods of
each object.
A property is a value that you can get or set (like changing the
content of an HTML element).
A method is an action you can do (like add or deleting an
HTML element).
DOM Methods (Example)
The following example changes the content (the innerHTML) of the <p> element with id="demo":
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
World!";
</script>
</body>
</html>
In the example above, getElementById is a method, while innerHTML is a property.

DOM Document
DOM Document
DOM Document
DOM Document
DOM Elements
With JavaScript, you want to manipulate HTML elements.

To do so, you have to find the elements first. There are several
ways to do this:
• Finding HTML elements by id
• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections
DOM Elements
DOM Elements
DOM Elements
DOM Elements
DOM Elements
HTML DOM
The HTML DOM allows JavaScript to change the content of

HTML elements.
• Change HTML Content
• Change the Value of an Attribute
• Dynamic HTML content
HTML DOM
• Change HTML Content

HTML DOM
• Change the Value of an Attribute

HTML DOM
• Dynamic HTML content

HTML DOM
• Document.write()
DOM Forms
HTML form validation can be performed automatically by the

browser:
DOM Forms
HTML form validation can be performed manually:

DOM Forms
HTML form validation for numeric values:

DOM CSS
document.getElementById(id).style.property = new style:
DOM CSS
Using Events
The HTML DOM allows you to execute code when an event
occurs.
Events are generated by the browser when "things happen" to
HTML elements:
•An element is clicked on
•The page has loaded
•Input fields are changed
DOM CSS
DOM 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
Examples of HTML events:
•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
DOM Events
DOM Events
DOM Events
HTML Event Attributes

DOM Events
Assign Events Using the HTML DOM

DOM Events
The onload and onunload Events
The onload and onunload events are triggered when the user enters or leaves the page.
The onload event can be used to check the visitor's browser type and browser version, and load the proper
version of the web page based on the information.
The onload and onunload events can be used to deal with cookies.
DOM Events
The onchange Event
The onchange event is often used in combination with validation of input fields.
Below is an example of how to use the onchange. The upperCase() function will be called when a user changes
the content of an input field.
DOM Events
The onmouseover and onmouseout Events
DOM Events
The onmousedown, onmouseup and onclick Events
DOM Event Listener
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.
You can add many event handlers of the same type to one element, i.e two "click" events.
You can add event listeners to any DOM object not only HTML elements. i.e the window object.
The addEventListener() method makes it easier to control how the event reacts to bubbling.
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 marku
You can easily remove an event listener by using the removeEventListener() method.
DOM Event Listener
DOM Event Listener
Add an Event Handler to an Element

DOM Event Listener
DOM Event Listener
Add Many Event Handlers to the Same

Element
DOM Event Listener
Add an Event Handler to the window Object

DOM Event Listener
Passing Parameters
Event Bubbling or Event Capturing?
There are two ways of event propagation in the HTML DOM, bubbling and capturing.
Event propagation is a way of defining the element order when an event occurs. If you
have a <p> element inside a <div> element, and the user clicks on the <p> element, which
element's "click" event should be handled first?
In bubbling the inner most element's event is handled first and then the outer: the <p>
element's click event is handled first, then the <div> element's click event.
In capturing the outer most element's event is handled first and then the inner: the <div>
element's click event will be handled first, then the <p> element's click event.
With the addEventListener() method you can specify the propagation type by using the
"useCapture" parameter:
addEventListener(event, function, useCapture);
The default value is false, which will use the bubbling propagation, when the value is set
to true, the event uses the capturing propagation.
<!DOCTYPE html>
<html> <script>
<head> document.getElementById("myP1").addEven
<style> tListener("click", function() {
#myDiv1, #myDiv2 { alert("You clicked the white element!");
background-color: coral; }, false);
padding: 50px;
} document.getElementById("myDiv1").addEv
#myP1, #myP2 { entListener("click", function() {
background-color: white; alert("You clicked the orange element!");
font-size: 20px; }, false);
border: 1px solid;
padding: 20px; document.getElementById("myP2").addEven
} tListener("click", function() {
</style> alert("You clicked the white element!");
<meta content="text/html; charset=utf-8" }, true);
http-equiv="Content-Type">
</head> document.getElementById("myDiv2").addEv
<body> entListener("click", function() {
<h2>JavaScript addEventListener()</h2> alert("You clicked the orange element!");
<div id="myDiv1"> }, true);
<h2>Bubbling:</h2> </script>
<p id="myP1">Click me!</p>
</div><br> </body>
<div id="myDiv2"> </html>
<h2>Capturing:</h2>
<p id="myP2">Click me!</p>
</div>
<!DOCTYPE html>
<html>
DOM Event Listener (Remove)
<head>
<style> <script>
#myDIV { document.getElementById("myDIV").addEventList
background-color: coral; ener("mousemove", myFunction);
border: 1px solid;
padding: 50px; function myFunction() {
color: white; document.getElementById("demo").innerHTML =
font-size: 20px; Math.random();
} }
</style>
</head> function removeHandler() {
<body>
document.getElementById("myDIV").removeEvent
<h2>JavaScript removeEventListener()</h2> Listener("mousemove", myFunction);
}
<div id="myDIV"> </script>
<p>This div element has an onmousemove
event handler that displays a random number </body>
every time you move your mouse inside this </html>
orange field.</p>
<p>Click the button to remove the div's
event handler.</p>
<button onclick="removeHandler()"
id="myBtn">Remove</button>
</div>
<p id="demo"></p>
DOM Event Listener(Remove)
Image gallery with thumbnails in JavaScript
The image gallery should be as shown in the image below. When you click on the image
thumbnail, the respective image should be displayed in the main section of the page.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgStyle
{
width:100px;
height:100px;
border:3px solid grey;
}
</style>
</head>
<body>
<img id="mainImage" style="border:3px solid grey"
src="Images/1.jpg" height="500px" width="540x"/>
<br />
<div id="divId" onclick="changeImageOnClick(event)">
<img class="imgStyle" src="Images/1.jpg" />
</div>
var images = document.getElementById("divId") .getElementsByTagName("img");
for (var i = 0; i < images.length; i++)

{
images[i].onmouseover = function ()
{
this.style.cursor = 'hand';
this.style.borderColor = 'red';
}
images[i].onmouseout = function ()
{
this.style.cursor = 'pointer';
this.style.borderColor = 'grey';
}
}
function changeImageOnClick(event)
{
event = event || window.event;

var targetElement = event.target || event.srcElement;
document.getElementById("mainImage").src = targetElement.getAttribute("src");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgStyle
{
width:100px;
height:100px;
border:3px solid grey;
}
</style>
</head>
<body>
<img id="mainImage" style="border:3px solid grey"
src="Images/1.jpg" height="500px" width="540x"/> <br />
<div id="divId" onclick="changeImageOnClick(event)">
</div>
var images = document.getElementById("divId").getElementsByTagName("img");
for (var i = 0; i < images.length; i++)

{
images[i].onmouseover = function ()
{
this.style.cursor = 'hand';
this.style.borderColor = 'red';
}
images[i].onmouseout = function ()
{
this.style.cursor = 'pointer';
this.style.borderColor = 'grey';
}
}
function changeImageOnClick(event)
{
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == "IMG")
{
mainImage.src = targetElement.getAttribute("src");
}
}
</script>
</body>
</html>

JavaScript DOM

Uploaded by

JavaScript DOM

Uploaded by

HTML DOM

The HTML DOM can be accessed with JavaScript (and with

In the example above, getElementById is a method, while innerHTML is a property.

With JavaScript, you want to manipulate HTML elements.

The HTML DOM allows JavaScript to change the content of

• Change HTML Content

• Change the Value of an Attribute

• Dynamic HTML content

HTML form validation can be performed automatically by the

HTML form validation can be performed manually:

HTML form validation for numeric values:

HTML Event Attributes

Assign Events Using the HTML DOM

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

Add an Event Handler to an Element

Add Many Event Handlers to the Same

Add an Event Handler to the window Object

var images = document.getElementById("divId") .getElementsByTagName("img");

for (var i = 0; i < images.length; i++)

event = event || window.event;

var images = document.getElementById("divId").getElementsByTagName("img");

for (var i = 0; i < images.length; i++)

You might also like