Overview
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a web page and allows developers to manipulate its content, structure, and style using JavaScript. This tutorial will explain the basics of DOM manipulation, including what the DOM is, how to select and modify DOM elements, and how to handle events and user interactions.
Key Points
- What is the DOM?
- Selecting and Modifying DOM Elements
- Handling Events and User Interactions
1. What is the DOM?
The DOM is a hierarchical representation of a web page’s content. It treats the HTML document as a tree structure, where each element, attribute, and piece of text is a node in the tree. JavaScript can be used to traverse this tree and make changes to the document dynamically.
DOM Tree Example
Consider the following HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Example</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph.</p>
</body>
</html>The DOM tree for this document looks like this:
html
└── head
│ └── meta
│ └── title
└── body
└── h1
└── p2. Selecting and Modifying DOM Elements
To manipulate the DOM, you first need to select the elements you want to work with. JavaScript provides several methods for selecting DOM elements.
Selecting Elements
- getElementById(): Selects an element by its ID.
let header = document.getElementById('header');- getElementsByClassName(): Selects elements by their class name.
let items = document.getElementsByClassName('item');- getElementsByTagName(): Selects elements by their tag name.
let paragraphs = document.getElementsByTagName('p');- querySelector(): Selects the first element that matches a CSS selector.
let firstParagraph = document.querySelector('p');- querySelectorAll(): Selects all elements that match a CSS selector.
let allParagraphs = document.querySelectorAll('p');Modifying Elements
Once you have selected an element, you can modify its content, attributes, and styles.
- Changing Content:
let header = document.getElementById('header');
header.innerHTML = 'New Header Text';- Changing Attributes:
let link = document.querySelector('a');
link.setAttribute('href', 'https://www.newurl.com');- Changing Styles:
let paragraph = document.querySelector('p');
paragraph.style.color = 'blue';
paragraph.style.fontSize = '20px';- Adding and Removing Classes:
let box = document.querySelector('.box');
box.classList.add('highlight');
box.classList.remove('highlight');3. Handling Events and User Interactions
Events are actions that occur in the browser, such as clicks, key presses, and mouse movements. JavaScript can be used to respond to these events and make web pages interactive.
Adding Event Listeners
You can add event listeners to elements to respond to user interactions.
- click Event:
let button = document.querySelector('button');
button.addEventListener('click', function() {
alert('Button clicked!');
});- mouseover Event:
let image = document.querySelector('img');
image.addEventListener('mouseover', function() {
image.style.border = '2px solid red';
});- keydown Event:
document.addEventListener('keydown', function(event) {
console.log('Key pressed:', event.key);
});Example: Interactive Web Page
Here is an example of a simple interactive web page that changes the background color of a paragraph when a button is clicked:
<!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>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1 id="header">Interactive Web Page</h1>
<p id="text">Click the button to change my background color.</p>
<button id="changeColorButton">Change Color</button>
<script>
let button = document.getElementById('changeColorButton');
button.addEventListener('click', function() {
let paragraph = document.getElementById('text');
paragraph.classList.toggle('highlight');
});
</script>
</body>
</html>In this example, clicking the button toggles the highlight class on the paragraph, changing its background color.
Conclusion
Understanding and manipulating the DOM is crucial for creating dynamic and interactive web pages. By learning how to select and modify DOM elements and handle events, you can significantly enhance the user experience on your website. Practice these techniques to become proficient in DOM manipulation and create engaging web applications.
