JavaScript DOM操作实战指南：从元素获取到事件处理全解析
一、DOM操作基础认知
1.1 什么是DOM？
文档对象模型（Document Object Model）是浏览器将HTML文档转换为树形结构的编程接口。每个HTML标签对应一个节点对象，开发者可以通过JavaScript操作这些节点实现页面动态更新。DOM操作包含三个核心方向：元素获取、内容修改和事件交互。
1.2 元素的获取
① ID精准定位：通过元素的id属性进行唯一性查找
使用方法：document.getElementById('idName')
特点：
- 返回单个元素对象
- 查找速度最快（浏览器优化机制）
- 严格区分大小
- 适用场景：快速定位导航栏、页头/页脚等唯一元素
示例：
// ID精准定位（返回单个元素）
const header = document.getElementById('main-header');② 类名批量获取：获取相同类名的元素组
使用方法：document.getElementsByClassName('className')
特点：
- 返回动态HTMLCollection（实时更新）
- 支持多类名查询（空格分隔）
示例：
// 类名批量获取（返回动态集合）
const cards = document.getElementsByClassName('card');③ CSS选择器查询：用于复杂条件下的元素定位
使用方法：
document.querySelector() ：获取首个匹配元素
document.querySelectorAll() ：获取所有匹配元素
特点：
- 支持完整CSS选择器语法
- 返回静态NodeList（适合循环操作）
示例：
// 获取单个元素（首个匹配项）
const btn = document.querySelector('.submit-btn');
// 获取多个元素（静态集合）
const navLinks = document.querySelectorAll('nav a');二、内容操作的三大核心属性
1. innerText：纯文本处理
特性：
- 仅处理可见文本，忽略HTML标签
- 自动合并空白符和换行
- 触发重排（性能敏感场景慎用）
使用场景：
- 显示用户输入的纯文本内容
- 动态更新按钮文字
示例：
你好，世界！
//先获取box元素
var box = document.querySelector('.box');
console.log(box);//打印出 你好，世界！
//修改其内容直接赋值
var newbox = box.innerText = "Hello World!"
console.log(newbox);//打印出 Hello World!2. innerHTML：HTML解析引擎
特性：
- 可插入完整的HTML代码片段
- 自动解析并生成DOM节点
- 存在XSS攻击风险（需转义用户输入）
使用场景：
- 动态加载模板内容
- 第三方富文本编辑器集成
示例：
你好博主
var div1 = document.querySelector('.div1');
div1.innerHTML = div1.innerHTML + '百度'; //增加的是超链接，而不是文字内容3. value：表单元素专用
适用范围：