Scribd
Upload
76 views

Introduction to DOM Manipulation in JavaScript

DOM Manipulation in Java

Uploaded by

incognitosoul08
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
76 views

Introduction to DOM Manipulation in JavaScript

DOM Manipulation in Java

Uploaded by

incognitosoul08
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Introduction to

DOM Manipulation
in JavaScript

Milind Gupta
Frontend Developer
Introduction to DOM Manipulation
What is DOM?
The Document Object Model (DOM) represents the structure of your
HTML document as a tree, where each element is a node. JavaScript
allows you to interact with and modify this structure dynamically.

Why Use DOM Manipulation?


Update content dynamically.
Create interactive web applications.
Handle user events like clicks or key presses.

Example: Logging the DOM tree and document title.

Milind Gupta
Frontend Developer
Accessing DOM Elements
Methods to Access Elements:
getElementById(): Select by ID.
getElementsByClassName(): Select by class name (returns a collection).
getElementsByTagName(): Select by tag name (returns a collection).
querySelector() and querySelectorAll(): More versatile for selecting by
CSS selectors.

Example:

Milind Gupta
Frontend Developer
Manipulating DOM Elements
Change content:
innerHTML: Modifies HTML content.
textContent: Updates text without interpreting HTML.
Modify attributes:
setAttribute(), getAttribute(), removeAttribute().
Update styles using style property.

Example:

Milind Gupta
Frontend Developer
Adding and Removing DOM Elements
Adding Elements: Use createElement() and appendChild().
Removing Elements: Use removeChild() or element.remove().
Example:

Milind Gupta
Frontend Developer
Event Handling
Attach events using addEventListener.
Common events: click, mouseover, keydown, etc.
Example:

Milind Gupta
Frontend Developer
Found this
helpful?
Follow for
more

Milind Gupta

You might also like