JavaScript中的DOM操作与事件绑定

# 1. DOM简介

## 1.1 什么是DOM
DOM（Document Object Model，文档对象模型）是一种表示和操作HTML、XML等文档的标准编程接口。它将文档解析成一个由节点对象（元素、属性、文本等）组成的树状结构，开发人员可以通过操作这些节点来修改文档的内容、结构和样式。

## 1.2 DOM的作用
DOM的主要作用是使开发人员能够通过编程语言（如JavaScript）来操作HTML文档中的元素、属性、文本等内容。通过DOM，可以实现动态的页面效果、交互式的用户界面以及数据的动态更新。

## 1.3 DOM的组成部分
DOM由三个主要部分组成：

1. 核心DOM：提供了文档结构的标准表示，支持对文档的增删改查操作。
2. HTML DOM：提供了HTML文档的相关标准表示和操作方法，使得开发人员可以方便地访问和操作HTML元素。
3. CSS DOM：提供了对CSS样式的标准表示和操作方法，使得开发人员可以修改元素的样式属性。

通过DOM，开发人员可以轻松地访问和操作文档中的各个元素，实现页面的动态效果和交互功能。DOM的使用广泛，几乎所有的现代网页都使用DOM来实现页面的交互和动态效果。

# 2. DOM操作

DOM操作是指通过JavaScript来改变HTML文档的结构、内容和样式。DOM操作使得开发者可以动态地更新页面上的元素，从而实现对用户界面的交互和响应。

### 2.1 获取DOM元素

在DOM中，可以通过选择器、元素的ID、类名等方式来获取DOM元素。以下是一些常用的获取DOM元素的方法：

- **querySelector**：使用CSS选择器来获取满足条件的第一个元素。
- **querySelectorAll**：使用CSS选择器来获取满足条件的所有元素。
- **getElementById**：通过元素的ID来获取指定的元素。
- **getElementsByClassName**：通过元素的类名来获取满足条件的所有元素。
- **getElementsByTagName**：通过元素的标签名来获取满足条件的所有元素。

// 使用querySelector
const element = document.querySelector(".example");
console.log(element);

// 使用querySelectorAll
const elements = document.querySelectorAll(".example");
console.log(elements);

// 使用getElementById
const elementById = document.getElementById("example");
console.log(elementById);

// 使用getElementsByClassName
const elementsByClass = document.getElementsByClassName("example");
console.log(elementsByClass);

// 使用getElementsByTagName
const elementsByTag = document.getElementsByTagName("div");
console.log(elementsByTag);

### 2.2 修改DOM元素

#### 2.2.1 修改元素内容

可以使用`innerHTML`属性来修改元素的HTML内容，或者使用`innerText`属性来修改元素的文本内容。

const element = document.querySelector(".example");

// 修改元素的HTML内容
element.innerHTML = "<div>New HTML content</div>";

// 修改元素的文本内容
element.innerText = "New text content";

#### 2.2.2 修改元素样式

可以使用`style`属性来修改元素的样式。`style`属性是一个CSSStyleDeclaration对象，可以通过设置对象的属性来修改样式。

const element = document.querySelector(".example");

// 修改元素的样式
element.style.color = "red";
element.style.fontSize = "24px";
element.style.backgroundColor = "yellow";

### 2.3 创建、插入和删除DOM元素

#### 2.3.1 创建元素

可以使用`createElement`方法来创建一个新的元素，并使用`appendChild`方法将其插入到指定的父元素中。

const parentElement = document.querySelector(".parent");

// 创建新的元素
const newElement = document.createElement("div");
newElement.innerText = "New element";

// 将新元素插入到父元素中
parentElement.appendChild(newElement);

#### 2.3.2 插入元素

除了使用`appendChild`方法插入元素外，还可以使用`insertBefore`方法在指定的位置插入元素。

const parentElement = document.querySelector(".parent");
const referenceElement = document.querySelector(".reference");

// 创建新的元素
const newElement = document.createElement("div");
newElement.innerText = "