DOM 操作与事件处理

一、DOM 操作

1. 什么是 DOM？

DOM 是浏览器将 HTML 文档解析成的一个树状结构，每个 HTML 元素都是一个节点（Node）。JavaScript 可以通过 DOM API 访问和操作这些节点。

2. 获取 DOM 元素

通过 JavaScript 获取 DOM 元素的常用方法：

方法	描述	返回值
document.getElementById()	根据 id 获取元素	单个元素
document.getElementsByClassName()	根据 class 获取元素集合	类数组（HTMLCollection）
document.getElementsByTagName()	根据标签名获取元素集合	类数组（HTMLCollection）
document.querySelector()	根据 CSS 选择器获取第一个匹配的元素	单个元素
document.querySelectorAll()	根据 CSS 选择器获取所有匹配的元素	类数组（NodeList）

 示例：

const btn = document.getElementById("btn"); // 获取 id 为 btn 的元素
const headers = document.getElementsByTagName("h1"); // 获取所有 h1 元素
const box = document.querySelector(".box"); // 获取第一个 class 为 box 的元素

3. 修改 DOM 元素

通过 JavaScript 可以修改 DOM 元素的属性、内容、样式等。

（1）修改内容

• innerHTML：设置或获取元素的 HTML 内容。
• textContent：设置或获取元素的纯文本内容。

示例：

const div = document.querySelector(".box");
div.innerHTML = "<strong>Hello</strong>"; // 设置 HTML 内容
div.textContent = "Hello"; // 设置纯文本内容

（2）修改属性

• setAttribute()：设置元素的属性。
• getAttribute()：获取元素的属性。

示例：

const img = document.querySelector("img");
img.setAttribute("src", "image.png"); // 设置 src 属性
const src = img.getAttribute("src");  // 获取 src 属性

（3）修改样式

• style：设置元素的 inline 样式。
• classList：操作元素的 class 属性（添加、删除、切换类名）。

示例：

const div = document.querySelector(".box");
div.style.backgroundColor = "red"; // 设置背景颜色
div.classList.add("active");       // 添加类名
div.classList.remove("active");    // 删除类名
div.classList.toggle("active");    // 切换类名

4. 创建和插入 DOM 元素

• document.createElement(): 创建新元素。
• appendChild(): 将元素插入到父元素的末尾。
• insertBefore(): 将元素插入到指定位置。

示例：

const ul = document.querySelector("ul");
const li = document.createElement("li");
li.textContent = "New Item";
ul.appendChild(li); // 将 li 插入到 ul 的末尾

5. 删除 DOM 元素

• removeChild(): 从父元素中删除子元素。

示例：

const ul = document.querySelector("ul");
const li = ul.querySelector("li");
ul.removeChild(li); // 删除 li

二、事件处理

1. 什么是事件？

事件是用户与页面交互时触发的动作（如点击按钮、输入文本、滚动页面等）。事件处理是通过 JavaScript 监听这些事件并执行相应的逻辑。

---

2. 事件监听

通过 addEventListener() 方法为元素绑定事件。

语法：

element.addEventListener(event, callback);

• event：事件类型（如 click, mouseover, keydown 等）。
• callback：事件触发时执行的函数。

示例：

const btn = document.querySelector("button");
btn.addEventListener("click", function () {  
    alert("Button clicked!");
});

---

3. 常见事件类型

事件类型	描述
click	点击事件
mouseover	鼠标悬停事件
mouseout	鼠标离开事件
keydown	键盘按下事件
keyup	键盘松开事件
input	输入框输入事件
submit	表单提交事件
load	页面加载完成事件

4. 事件对象

事件处理函数的第一个参数是一个 事件对象，它包含事件的相关信息。

示例：

btn.addEventListener("click", function (event) {  
    console.log(event.target); // 触发事件的元素
});

---

5. 事件冒泡与捕获

• 事件冒泡：事件从触发元素向上传播到父元素。
• 事件捕获：事件从父元素向下传播到触发元素。
• event.stopPropagation()：阻止事件冒泡或捕获。

---

6. 事件委托

事件委托是通过将事件绑定到父元素，利用事件冒泡机制处理子元素的事件。这可以减少事件监听器的数量，提高性能。

const ul = document.querySelector("ul");
ul.addEventListener("click", function (event) {  
    if (event.target.tagName === "LI") {    
        alert("You clicked on a list item!");  
    }
});

三、总结

• DOM 操作：可以通过 JavaScript 动态获取、修改、创建、删除页面元素。
• 事件处理：通过 addEventListener 监听用户交互，并执行相应的逻辑。