DOM

Download as txt, pdf, or txt
Download as txt, pdf, or txt
You are on page 1of 3

DOM (Document Object Model) manipulation refers to the process of using JavaScript

to interact with and modify the elements of a webpage. The DOM represents the
structure of a webpage as a tree of objects, where each node corresponds to a part
of the document, such as an element, attribute, or text. By manipulating the DOM,
you can change the content, structure, and style of a webpage dynamically after it
has been loaded in the browser.

Key Concepts in DOM Manipulation


DOM Tree Structure:

The DOM represents the HTML document as a hierarchical tree of nodes. Each element
in the HTML document corresponds to a node in the DOM tree. For example, <html> is
the root node, and it contains child nodes like <head>, <body>, and so on.
Accessing DOM Elements:

To manipulate the DOM, you first need to select the elements you want to work with.
JavaScript provides various methods to access DOM elements.

Common Methods to Access Elements:

javascript
Copy code
// Select by ID
let element = document.getElementById('elementId');

// Select by class name (returns a collection)


let elements = document.getElementsByClassName('className');

// Select by tag name (returns a collection)


let paragraphs = document.getElementsByTagName('p');

// Select using CSS selectors (returns the first matching element)


let firstElement = document.querySelector('.className');

// Select using CSS selectors (returns all matching elements)


let allElements = document.querySelectorAll('.className');
Common DOM Manipulation Techniques
Changing Content:

You can change the inner content of an HTML element using innerHTML, textContent,
or by directly modifying the DOM tree.
javascript
Copy code
let element = document.getElementById('myElement');
element.innerHTML = 'New HTML content'; // Sets HTML content
element.textContent = 'Just text'; // Sets plain text content
Changing Attributes:

You can modify the attributes of an HTML element using setAttribute, getAttribute,
or directly by accessing the property.
javascript
Copy code
let img = document.querySelector('img');
img.setAttribute('src', 'newImage.jpg'); // Change the src attribute
let src = img.getAttribute('src'); // Get the src attribute
Changing Styles:

CSS styles can be changed dynamically by modifying the style property of an


element.
javascript
Copy code
let element = document.getElementById('myElement');
element.style.color = 'blue'; // Changes text color to blue
element.style.fontSize = '20px'; // Changes the font size
Creating and Inserting Elements:

You can create new HTML elements using createElement and insert them into the DOM
using methods like appendChild, insertBefore, or replaceChild.
javascript
Copy code
let newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div';
document.body.appendChild(newDiv); // Adds the new div to the end of the body
Removing Elements:

You can remove elements from the DOM using removeChild or remove.
javascript
Copy code
let element = document.getElementById('myElement');
element.remove(); // Removes the element from the DOM
Event Handling:

DOM manipulation is often used in conjunction with event handling to create


interactive web pages. Events like click, mouseover, and keydown can trigger
changes to the DOM.
javascript
Copy code
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button was clicked!');
});
Example: Basic DOM Manipulation
Here's an example where a button click changes the text of a paragraph:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation Example</title>
</head>
<body>
<p id="myParagraph">This is the original text.</p>
<button id="myButton">Click to change text</button>

<script>
// Access the button and paragraph elements
const button = document.getElementById('myButton');
const paragraph = document.getElementById('myParagraph');

// Add an event listener to the button


button.addEventListener('click', function() {
// Change the text of the paragraph when the button is clicked
paragraph.textContent = 'The text has been changed!';
});
</script>
</body>
</html>
Conclusion
DOM manipulation allows you to dynamically change the content, appearance, and
structure of a webpage using JavaScript.
It involves selecting elements, modifying their content, attributes, and styles,
creating new elements, and handling events.
Mastery of DOM manipulation is essential for creating interactive and dynamic web
applications.

You might also like