JS HTML Dom

Java Script – HTML DOM
1
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:
2
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
3
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."
• 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
4
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
In other words: The HTML DOM is a

standard for how to get, change, add, or
delete HTML elements.
5
HTML DOM Methods and Properties
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).
EX: <script>
document.getElementById("demo").innerHTML = "Hello
World!“;</script>
6
The HTML DOM Document
Object
The document object represents the web page.
•If you want to access any element in an HTML page, you

always start with accessing the document object.
•Below are some examples of how you can use the
document object to access and manipulate HTML.
Finding HTML Elements

Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName( Find elements by tag name
name)
document.getElementsByClassNam Find elements by class name
e(name)
7
Changing HTML Elements /Add/Deleting elements
Property Description
element.innerHTML = new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML

element
element.style.property = new style Change the style of an HTML element
Method Description
element.setAttribute(attribute, value) Change the attribute value of an HTML

element
Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element
document.replaceChild(new, old) Replace an HTML element
document.write(text) Write into the HTML output stream
8
Changing HTML Content
The easiest way to modify the content of an HTML
element is by using the innerHTML property.
To change the content of an HTML element,
syntax:
document.getElementById(id).innerHTML = new HTML
This example changes the content of a <p> element:
<html><body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script></body></html>
HTML DOM Collection Object
•The getElementsByTagName() method

returns an HTMLCollection object.
•An HTMLCollection object is an array-like list
(collection) of HTML elements.
•The following code selects all <p> elements in a
document
<!DOCTYPE html><html><body>
<h2>JavaScript HTML DOM</h2>
<p>Hello World!</p>
<p>Hello Norway!</p>
<p id="demo"> Hai Para </p><script>
const myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "This document contains " +
myCollection.length + " paragraphs.";
</script></body></html>

JS HTML Dom

Uploaded by

JS HTML Dom

Uploaded by

Java Script – HTML DOM

The HTML DOM (Document Object Model)

•JavaScript can change all the HTML elements in the

• The DOM defines a standard for accessing documents:

• The W3C DOM standard is separated into 3 different parts:

• Core DOM - standard model for all document types

In other words: The HTML DOM is a

•If you want to access any element in an HTML page, you

Finding HTML Elements

element.innerHTML = new html content Change the inner HTML of an element

element.attribute = new value Change the attribute value of an HTML

element.style.property = new style Change the style of an HTML element

element.setAttribute(attribute, value) Change the attribute value of an HTML

document.removeChild(element) Remove an HTML element

•The getElementsByTagName() method

You might also like