一、DOM 核心概念：先搞懂「是什么」
DOM（Document Object Model）是浏览器把 HTML/XML 文档转换成的树形对象结构，简单说就是把网页的每一个标签、文本、属性都变成 JavaScript 能操作的「对象」。
- 类比理解：把网页看作一棵「树」，
<html>是根节点，<head>/<body>是分支节点，<div>/<p>/<a>等是子节点，文本、属性是节点的「属性 / 内容」。 - 核心作用：JavaScript 通过 DOM 可以动态修改网页内容、样式、结构，实现交互（比如点击按钮换内容、输入框实时验证、动态加载数据）。
二、DOM 核心操作：四大核心能力（附代码示例）
1. 查找 / 获取 DOM 元素（最基础，先找到才能操作）
这是所有 DOM 操作的第一步，常用方法如下：
javascript
运行
// 1. 通过ID获取（唯一，返回单个元素） const box = document.getElementById('box'); // 2. 通过类名获取（返回元素数组） const items = document.getElementsByClassName('item'); // 3. 通过标签名获取（返回元素数组） const ps = document.getElementsByTagName('p'); // 4. 通过选择器获取（最灵活，CSS选择器语法） const btn = document.querySelector('#btn'); // 单个元素（第一个匹配项） const lis = document.querySelectorAll('ul li'); // 所有匹配元素（伪数组）2. 修改 DOM 元素（内容、样式、属性）
找到元素后，可修改其内容、样式、属性，实现动态效果：
javascript
运行
// ① 修改内容 const title = document.querySelector('#title'); title.innerText = '新的标题'; // 纯文本（推荐，防XSS） title.innerHTML = '<span style="color:red">带标签的标题</span>'; // 解析HTML标签 // ② 修改样式（行内样式，优先级高） title.style.color = 'blue'; title.style.fontSize = '24px'; // 注意：CSS的-连接符转驼峰 // ③ 修改CSS类（推荐，批量样式管理） title.classList.add('active'); // 添加类 title.classList.remove('active'); // 移除类 title.classList.toggle('active'); // 切换类（有则删，无则加） // ④ 修改属性 const img = document.querySelector('img'); img.src = 'new-img.jpg'; // 修改图片地址 img.alt = '新图片'; // 修改alt属性3. 添加 / 删除 DOM 元素（修改页面结构）
可动态创建、插入、删除元素，实现「新增内容」「删除内容」：
javascript
运行
// ① 创建新元素 const newDiv = document.createElement('div'); newDiv.innerText = '我是新增的div'; newDiv.classList.add('new-item'); // ② 插入元素（放到某个父元素里） const container = document.querySelector('#container'); container.appendChild(newDiv); // 插入到父元素最后 container.insertBefore(newDiv, container.firstChild); // 插入到第一个子元素前 // ③ 删除元素 container.removeChild(newDiv); // 父元素删除子元素 newDiv.remove(); // 元素自身删除（更简单）4. 监听 DOM 事件（实现交互）
给元素绑定事件（点击、鼠标移入、输入等），触发时执行代码：
javascript
运行
const btn = document.querySelector('#btn'); // 方式1：直接绑定 btn.onclick = function() { alert('按钮被点击了！'); }; // 方式2：addEventListener（推荐，可绑定多个同类型事件） btn.addEventListener('click', function() { // 点击后修改自身文本 this.innerText = '已点击'; // 同时修改其他元素样式 document.querySelector('#box').style.backgroundColor = 'pink'; }); // 常见事件：click（点击）、mouseover（鼠标移入）、input（输入框输入）、load（页面加载完成）三、实战小案例：完整 DOM 交互 demo
以下是一个综合案例，实现「点击按钮新增列表项，点击列表项删除自身」：
html
预览
<!DOCTYPE html> <html> <head> <style> .list-item { margin: 5px; padding: 5px; border: 1px solid #ccc; } .active { color: red; } </style> </head> <body> <button id="addBtn">新增列表项</button> <ul id="list"></ul> <script> // 1. 获取元素 const addBtn = document.querySelector('#addBtn'); const list = document.querySelector('#list'); // 2. 绑定新增按钮点击事件 addBtn.addEventListener('click', function() { // 创建新列表项 const li = document.createElement('li'); li.className = 'list-item'; li.innerText = `列表项${list.children.length + 1}`; // 给新列表项绑定删除事件 li.addEventListener('click', function() { this.remove(); // 点击自身删除 }); // 插入到列表中 list.appendChild(li); }); </script> </body> </html>总结
- DOM 核心本质：把网页转换成 JS 可操作的树形对象，核心是「找元素→改元素→加 / 删元素→绑事件」。
- 常用操作优先级：查找元素优先用
querySelector/querySelectorAll（灵活），修改样式优先用classList（易维护），事件绑定优先用addEventListener（多事件兼容）。 - 核心注意点：操作 DOM 前必须确保元素已加载（可把 JS 放
</body>最后，或用DOMContentLoaded事件），避免「找不到元素」的报错。
