JavaScript DOM Manipulation and Event Handling

What is DOM Manipulation?

DOM (Document Object Model) manipulation refers to the ability to change the content, structure, and style of a web page dynamically using JavaScript. It allows you to interact with elements like text, images, buttons, and more on the page.

Example of DOM Manipulation

Below is a simple example where clicking a button changes the content and style of a paragraph:

This is the original content.

Quiz: Test Your Knowledge

1. What does DOM stand for?

Document Object Model
Document Object Module
Dynamic Object Model

2. Which of the following is used to change the content of an HTML element?

document.getElementById()
innerHTML
document.querySelector()