JavaScript操作DOM

### 5.1 什么是DOM
DOM（文档对象模型，Document Object Model）是HTML和XML文档的编程接口。它提供了一种方式来访问和操作网页的内容、结构和样式。在DOM中，文档被表示为一个由节点和对象（如元素、属性和文本）组成的树状结构，每个节点和对象都可以通过JavaScript进行访问和操作。

### 5.2 DOM选择器
DOM选择器用于查找和选择DOM树中的元素。以下是一些常用的DOM选择器方法：

- **getElementById()**：通过元素的ID选择元素。
  ```javascript
  const element = document.getElementById('myElement');
  ```

- **getElementsByClassName()**：通过元素的类名选择元素，返回一个HTMLCollection。
  ```javascript
  const elements = document.getElementsByClassName('myClass');
  ```

- **getElementsByTagName()**：通过元素的标签名选择元素，返回一个HTMLCollection。
  ```javascript
  const elements = document.getElementsByTagName('p');
  ```

- **querySelector()**：通过CSS选择器选择第一个匹配的元素。
  ```javascript
  const element = document.querySelector('.myClass');
  ```

- **querySelectorAll()**：通过CSS选择器选择所有匹配的元素，返回一个NodeList。
  ```javascript
  const elements = document.querySelectorAll('.myClass');
  ```

### 5.3 DOM操作（新增、修改、删除元素）
#### 新增元素
要创建新元素，可以使用`document.createElement()`方法，然后使用`appendChild()`或`insertBefore()`将其添加到DOM中。
```javascript
// 创建新元素
const newElement = document.createElement('div');
newElement.innerHTML = 'Hello, World!';

// 添加到body或另一个元素
document.body.appendChild(newElement);
```

#### 修改元素
修改元素的内容或属性可以直接通过属性访问或使用`setAttribute()`方法。
```javascript
// 修改内容
const element = document.getElementById('myElement');
element.innerHTML = 'New content';

// 修改属性
element.setAttribute('class', 'newClass');
```

#### 删除元素
要删除元素，可以使用`removeChild()`方法。
```javascript
// 获取父元素
const parent = document.getElementById('myElement').parentNode;

// 删除元素
parent.removeChild(document.getElementById('myElement'));
```

#### 修改样式
可以直接修改元素的`style`属性来改变样式。
```javascript
const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';
```

#### 绑定事件
可以使用`addEventListener()`方法给元素添加事件监听器。
```javascript
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button clicked!');
});
```

DOM是JavaScript中操作网页内容的核心，通过DOM选择器和DOM操作，你可以创建动态的、交互式的网页。希望这些信息能帮助你更好地理解和使用DOM。如果你有任何问题或需要进一步的解释，请随时提问。