Stage-17

Interactive Websites: DOM and Events

Table of Contents

1. Introduction
2. Understanding the DOM
3. Manipulating the DOM
4. Common DOM Methods
5. Event Handling
6. Examples

Introduction

In this guide, we will explore how to create interactive websites using the Document Object Model (DOM) and event handling in JavaScript.

Understanding the DOM

The DOM is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.

Manipulating the DOM

JavaScript provides several methods to manipulate the DOM, such as getElementById, querySelector, createElement, and appendChild.

Common DOM Methods

Here are some commonly used DOM methods:

• getElementById(id): Selects an element by its ID.
• getElementsByClassName(className): Selects all elements with the specified class name.
• getElementsByTagName(tagName): Selects all elements with the specified tag name.
• querySelector(selector): Selects the first element that matches the specified CSS selector.
• querySelectorAll(selector): Selects all elements that match the specified CSS selector.
• createElement(tagName): Creates a new element with the specified tag name.
• appendChild(node): Adds a new child node to an element.
• removeChild(node): Removes a child node from an element.
• replaceChild(newNode, oldNode): Replaces a child node with a new node.
• setAttribute(name, value): Sets the value of an attribute on an element.
• getAttribute(name): Gets the value of an attribute on an element.
• classList.add(className): Adds a class to an element's class list.
• classList.remove(className): Removes a class from an element's class list.
• classList.toggle(className): Toggles a class in an element's class list.

These methods allow you to select, create, and manipulate elements in the DOM to build dynamic and interactive web pages.

Event Handling

Events are actions that occur when the user interacts with the web page. JavaScript can respond to these events using event listeners.

Examples

Here are some examples of DOM manipulation and event handling:

// Example of DOM manipulation
const element = document.getElementById('myElement');
element.textContent = 'Hello, World!';

// Example of event handling
const button = document.querySelector('button');
button.addEventListener('click', () => {
    alert('Button was clicked!');
});