JavaScript Essentials - DOM Manipulation

Introduction to Document Object Model (DOM) and its manipulation

The Document Object Model (DOM) is a programming interface for web documents. This tutorial covers the basics of DOM manipulation using JavaScript, allowing you to dynamically change the content, structure, and style of web pages.

Selecting Elements

Elements in the DOM can be selected using various methods. Here are some common methods:

• document.getElementById() - Selects an element by its ID.
• document.getElementsByClassName() - Selects elements by their class name.
• document.getElementsByTagName() - Selects elements by their tag name.
• document.querySelector() - Selects the first element that matches a CSS selector.
• document.querySelectorAll() - Selects all elements that match a CSS selector.

// Select an element by ID
var element = document.getElementById('myElement');

// Select elements by class name
var elements = document.getElementsByClassName('myClass');

// Select elements by tag name
var elements = document.getElementsByTagName('div');

// Select the first element that matches a CSS selector
var element = document.querySelector('.myClass');

// Select all elements that match a CSS selector
var elements = document.querySelectorAll('.myClass');
                

Changing Content

You can change the content of an element using the innerHTML or textContent properties. Here is an example:

var element = document.getElementById('myElement');

// Change the inner HTML
element.innerHTML = 'Hello, World!';

// Change the text content
element.textContent = 'Hello, World!';
                

Modifying Styles

You can modify the styles of an element using the style property. Here is an example:

var element = document.getElementById('myElement');

// Change the background color
element.style.backgroundColor = 'blue';

// Change the font size
element.style.fontSize = '20px';

// Change the text color
element.style.color = 'white';
                

Adding and Removing Classes

You can add and remove classes using the classList property. Here is an example:

var element = document.getElementById('myElement');

// Add a class
element.classList.add('myClass');

// Remove a class
element.classList.remove('myClass');

// Toggle a class
element.classList.toggle('myClass');
                

Creating and Appending Elements

You can create new elements and append them to the DOM using the createElement() and appendChild() methods. Here is an example:

var newElement = document.createElement('div');
newElement.textContent = 'This is a new element.';

// Append the new element to the body
document.body.appendChild(newElement);
                

Removing Elements

You can remove an element from the DOM using the removeChild() method. Here is an example:

var element = document.getElementById('myElement');

// Remove the element from its parent
element.parentNode.removeChild(element);
                

Event Handling

DOM manipulation often involves handling events. You can add event listeners to elements using the addEventListener() method. Here is an example:

var button = document.getElementById('myButton');

button.addEventListener('click', function() {
    alert('Button clicked!');
});
                

HTML for the example button:

Click Me
                

Summary

In this tutorial, you learned about the Document Object Model (DOM) and its manipulation using JavaScript. You explored selecting elements, changing content, modifying styles, adding and removing classes, creating and appending elements, removing elements, and handling events. Understanding DOM manipulation is essential for creating dynamic and interactive web pages.