Scribd
Upload
38 views10 pages

JavaScript DOM Manipulation Basics

This document provides an overview of JavaScript and its interaction with the Document Object Model (DOM) for web development. It covers key concepts such as accessing and manipulating HTML elements, changing content and styles, creating and appending elements, handling events, and traversing the DOM structure. The presentation includes code examples to illustrate these concepts.

Uploaded by

Datla Rohit varma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
38 views10 pages

JavaScript DOM Manipulation Basics

This document provides an overview of JavaScript and its interaction with the Document Object Model (DOM) for web development. It covers key concepts such as accessing and manipulating HTML elements, changing content and styles, creating and appending elements, handling events, and traversing the DOM structure. The presentation includes code examples to illustrate these concepts.

Uploaded by

Datla Rohit varma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

JavaScript & DOM Manipulation

Introduction to JavaScript

• JavaScript is a powerful scripting language used to add interactivity to websites.


• It interacts with the DOM (Document Object Model) to dynamically update HTML
and CSS.
• In this presentation, we'll explore some of the core DOM manipulation concepts.

// Example: Basic JS Function


function greet() {
alert('Welcome to DOM Learning!');
}
What is the Document Object
Model (DOM)?
• DOM represents an HTML page as a tree-like structure of objects.
• Each HTML tag is an element (node) that can be accessed and modified using
JavaScript.
• Think of DOM as a live interface between JS and the webpage.

// Accessing the document root


[Link](document);
// Accessing the body element
[Link]([Link]);
Accessing Elements

• To manipulate HTML elements, you must first access them.


• Methods: getElementById, getElementsByClassName, querySelector,
querySelectorAll.

// Examples:
[Link]('demo');
[Link]('text')[0];
[Link]('#idName');
[Link]('.className');
Changing Content

• You can update text or HTML content dynamically.


• innerText, innerHTML, and textContent are three main properties used.

[Link]('demo').innerText = 'Hello!';
[Link]('demo').innerHTML = '<b>Hello Bold!</b>';
[Link]('demo').textContent = 'Plain text only';
Changing Styles

• Modify an element's CSS directly using the style property.


• Useful for animations and visual effects.

let para = [Link]('demo');


[Link] = 'red';
[Link] = '24px';
[Link] = 'yellow';
Creating Elements

• Create new HTML elements and attach them to the DOM using createElement()
and appendChild().

let newDiv = [Link]('div');


[Link] = 'This is new content!';
[Link](newDiv);
Appending and Removing
Elements
• Add or remove nodes programmatically.

let parent = [Link]('list');


let li = [Link]('li');
[Link] = 'New Item';
[Link](li); // Add
[Link]([Link]); // Remove
Event Handling

• Handle user interactions like clicks, mouseovers, and keypresses using


addEventListener().

[Link]('btn').addEventListener('click', function() {
alert('Button clicked!');
});
Traversing the DOM

• Navigate the DOM structure using parent, child, and sibling relationships.

let child = [Link]('child');


[Link]([Link]); // Access parent
[Link]([Link]); // Next element

You might also like