How does DOM manipulate web pages?

The DOM manipulates web pages through a set of methods and properties that allow developers to interact with the elements of a document. Here are some common ways to manipulate web pages using the DOM:

Selecting Elements: You can select elements using methods like getElementById, getElementsByClassName, getElementsByTagName, or querySelector.
```
const element = document.getElementById('myElement');
```
Changing Content: You can change the text or HTML content of an element using the innerHTML or textContent properties.
```
element.textContent = 'New content';
```
Modifying Styles: You can change the CSS styles of an element using the style property.
```
element.style.color = 'blue';
```
Adding and Removing Elements: You can create new elements using createElement, and then append them to the document using appendChild or insertBefore. You can also remove elements using removeChild.
```
const newElement = document.createElement('div');
document.body.appendChild(newElement);
```
Handling Events: You can add event listeners to elements to respond to user interactions, such as clicks or key presses.
```
element.addEventListener('click', function() {
    alert('Element clicked!');
});
```

By using these methods and properties, developers can create dynamic and interactive web pages that respond to user actions and changes in data.