Scribd
Upload
122 views

DOM Js

The document discusses the Document Object Model (DOM) in JavaScript. It explains that the DOM represents HTML and XML documents as nodes that can be manipulated with JavaScript to dynamically update web pages. It provides examples of using DOM methods like getElementById, getElementsByClassName, and querySelector to select elements, and then manipulating element properties and children through things like textContent, innerHTML, appendChild, and removeChild.

Uploaded by

Nour El Amal Mbarek
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
122 views

DOM Js

The document discusses the Document Object Model (DOM) in JavaScript. It explains that the DOM represents HTML and XML documents as nodes that can be manipulated with JavaScript to dynamically update web pages. It provides examples of using DOM methods like getElementById, getElementsByClassName, and querySelector to select elements, and then manipulating element properties and children through things like textContent, innerHTML, appendChild, and removeChild.

Uploaded by

Nour El Amal Mbarek
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

AkshatGarg

What is
Document object model
(Dom)
in
javascript ?
Document Object Model (DOM)

DOM is a programming interface for


HTML and XML documents.
It represents the web page so that
programs can change the document
structure, style, and content.
The DOM represents the document as
nodes and objects, which can be
manipulated with JavaScript to update
the web page dynamically.

AkshatGarg
Working with dom

To work with the DOM in JavaScript, we need


to first select the element we want to work
with using one of the following methods :

getElementById
getElementsByClassName
getElementsByTagName
querySelector

AkshatGarg
Using getElementById :

This method selects an element with a


specific ID.

const element = document.


getElementById
("example-id");

AkshatGarg
Using getElementsByClassName :

This method selects all elements with a


specific class name.

const elements = document.


getElementsByClassName
("example-class");

AkshatGarg
Using getElementsByClassName :

This method selects all elements with a


specific class name.

const elements = document.


getElementsByClassName
("example-class");

AkshatGarg
Using querySelector :

This method selects the first element that


matches a CSS selector.

const element = document.


querySelector
(".example-selector");

AkshatGarg
Once we have selected an element,
we can manipulate its properties or
add and remove using these child
elements :

.textContent()
.innerHTML()
.appendChild()
.removeChild()

AkshatGarg
Changing an Element's Text

element.textContent =
"New text";

AkshatGarg
Changing an element's HTML :

element.innerHTML = "
<p>New HTML</p>";

AkshatGarg
Adding a child element:

const newElement =
document.createElement("p");
newElement.textContent = "New
paragraph";
element.appendChild(newElement);

AkshatGarg
Removing an element :

element.parentNode.re
moveChild(element);

AkshatGarg
AkshatGarg

THANK
YOU

Akshat Garg

Follow for more.

You might also like