Scribd
Upload
5 views15 pages

Javascript? 34

The document provides an overview of Document Object Model (DOM) manipulation in JavaScript, explaining how it allows access and modification of webpage elements such as text, images, and buttons. It details methods for accessing elements by ID, class name, and tag name, as well as retrieving and setting text and HTML content. Additionally, it encourages further learning through resources like MDN Web Docs for enhanced coding skills.

Uploaded by

anant05.dbz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views15 pages

Javascript? 34

The document provides an overview of Document Object Model (DOM) manipulation in JavaScript, explaining how it allows access and modification of webpage elements such as text, images, and buttons. It details methods for accessing elements by ID, class name, and tag name, as well as retrieving and setting text and HTML content. Additionally, it encourages further learning through resources like MDN Web Docs for enhanced coding skills.

Uploaded by

anant05.dbz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

ASHFAQ AHMED

DOM
MANIPULATION IN
JAVASCRIPT
ASHFAQ AHMED

What is DOM

The DOM is like a map of a webpage. It


helps computers see all the parts of the
page (like text, images, and buttons) so
they can change them.

For example, it allows a program to add


new text or make a button work when
you click it.
ASHFAQ AHMED

Accessing elements by ID
Key Points
The id must be unique on the page.
getElementById() returns the first element
with the given id.
You can then use properties like
.textContent or .innerHTML to work with
the content, or .style to change the style.
ASHFAQ AHMED

Accessing elements by
Class name
The getElementsByClassName() method
in JavaScript gives you a list of all
elements with the class name you
specify. You can access each element in
this list using a number, starting from 0.
ASHFAQ AHMED

Accessing elements by TAG


name
The getElementsByTagName() method
gives you a list of all elements of a
certain type (like <div> or <p>) on a
webpage, and the list automatically
updates if the page changes.
ASHFAQ AHMED

Accessing the First Matching


Element
To access the first matching element in
JavaScript, you can use querySelector() to
get the first element that matches CSS
selector or getElementsByClassName) and
select the first element from the returned
list using [0].
ASHFAQ AHMED

Accessing All Matching


Elements
To access all matching elements in
JavaScript, you can use querySelectorAll()
to get all elements that match a CSS
selector, or getElementsByClassName() to
get all elements with a specific class
name.
ASHFAQ AHMED

Getting Text Content


To get the text inside an element in
JavaScript, you can use the .innertext
property, which retrieves all the text inside
the element, including text from its child
elements.
ASHFAQ AHMED

Getting HTML Content


To get the HTML content of an element in
JavaScript, you can use the .innerHTML
property. This retrieves everything inside
the element, including HTML tags.
ASHFAQ AHMED

Getting Attribute Values


To get the value of an attribute from
an element in JavaScript, you can use
the .getAttribute() method, which
retrieves the value of a specified
attribute from the element.
ASHFAQ AHMED

Accessing attributes by Index


To access attributes by index in JavaScript,
you can use the .attributes property, which
returns a collection of all attributes of an
element, and then use the index to access a
specific attribute.
ASHFAQ AHMED

Setting text and HTML Content


To set the text or HTML content of an
element in JavaScript, you can use the
.textContent or .innerHTML properties.
ASHFAQ AHMED

Enhance Web pages with DOM


Manipulation

DOM manipulation lets you use


JavaScript to change the webpage, like
updating text, adding or removing items,
and making the page respond to actions
like clicks.
ASHFAQ AHMED

LEARN MORE
Visit MDN Web Docs for detailed
tutorials and examples. Practice writing
loops to Visit MDN Web Docs for
detailed tutorials and examples.
Practice writing loops to enhance
coding skills and build more efficient
programs! enhance coding skills and
build more efficient programs
Save post

ASHFAQ AHMED

Follow for more Coding Content like this


Repost Share post

You might also like