AVA Cript: HTML Doms

JAVASCRIPT
HTML DOMS
MS. SUNITA D.RATHOD
JavaScript HTML DOM
With the HTML DOM, JavaScript can access and change all the
elements of an HTML document.
The HTML DOM (Document Object Model)

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:

The HTML DOM Tree of Objects
Uses
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 the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
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."
parts:
What is the DOM?

Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
What is the 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
JavaScript - 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.
The DOM Programming Interface
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).
Example
<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.
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 innerHTML property can be used to get or change
any HTML element, including <html> and <body>.
Finding HTML Elements by Tag Name
OUTPUT :
Finding HTML Elements by Class Name
OUTPUT :
Finding HTML Elements by CSS
Selectors
If you want to find all HTML elements that

matches a specified CSS selector (id, class names,
types, attributes, values of attributes, etc), use the
querySelectorAll() method.
OUTPUT :
Changing the Value of an Attribute
OUTPUT :
Changing HTML Style
OUTPUT :
AFTER CLICKING BUTTON

Using Events
OUTPUT :
AFTER CLICKING BUTTON

Add an Event Handler to an Element
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to

add many events on the same button.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML +=
"Moused over!<br>";
}
function mySecondFunction() {
"Clicked!<br>";
}
function myThirdFunction() {
"Moused out!<br>";
}
</script>
</body>
</html>
OUTPUT :
THAT’S ALL FOR THE DAY

AVA Cript: HTML Doms

Uploaded by

AVA Cript: HTML Doms

Uploaded by

JAVASCRIPT

The HTML DOM (Document Object Model)

The HTML DOM model is constructed as a tree of Objects:

JavaScript can change all the HTML elements in the page

The DOM defines a standard for accessing documents:

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

What is the DOM?

The HTML elements as objects

HTML DOM methods are actions you can perform (on

HTML DOM properties are values (of HTML Elements)

In the DOM, all HTML elements are defined as objects.

The programming interface is the properties and

A property is a value that you can get or set (like

A method is an action you can do (like add or deleting an

In the example above, getElementById is a method, while

The innerHTML Property

If you want to find all HTML elements that

AFTER CLICKING BUTTON

AFTER CLICKING BUTTON

<p>This example uses the addEventListener() method to

<button id="myBtn">Try it</button>

You might also like