JavaScript DOM 核心操作：从内容到节点的实战指南
DOM（文档对象模型）是前端开发中操作页面结构、内容和样式的核心，本文聚焦 DOM 中元素内容、属性、样式的读写修改，以及节点的增删改，结合实战示例讲解核心用法与最佳实践。
一、操作元素内容
元素内容操作分为纯文本处理和带 HTML 结构的处理，核心使用 innerText 和 innerHTML 两个属性，二者特性对比如下：
| 方法 | 识别 HTML 标签 | 保留换行 / 空格 | 标准性 | 适用场景 |
|---|---|---|---|---|
| innerText | ❌ | ❌ | 非标准（IE） | 仅读取 / 修改纯文本 |
| innerHTML | ✅ | ✅ | W3C 标准 | 读取 / 修改带 HTML 结构的内容 |
1. innerText：纯文本操作
仅处理文本内容，会忽略 HTML 标签和源码中的换行 / 空格，适合简单文本读写。
// 读操作：获取元素纯文本内容 var text = element.innerText; // 写操作：设置纯文本内容（标签会被当作普通文本） element.innerText = "新文本内容"; 2. innerHTML：HTML 结构操作（高频使用）
可读写包含 HTML 标签的内容，保留源码格式，是动态渲染页面的核心方法。
// 读操作：获取元素包含 HTML 标签的完整内容 var html = element.innerHTML; // 写操作：设置带 HTML 结构的内容（标签会被解析渲染） element.innerHTML = "<span>新的HTML内容</span>"; 示例对比
<div> <span>hello world</span> <span>hello world</span> </div> <script> var div = document.querySelector('div'); // innerText 仅输出文本，无标签、无换行 console.log(div.innerText); // 输出：hello world hello world // innerHTML 输出完整 HTML 结构，保留换行 console.log(div.innerHTML); // 输出：<span>hello world</span>（含换行） div.innerText = '<span>hello js</span>'; // 页面显示：<span>hello js</span> div.innerHTML = '<span>hello js</span>'; // 页面显示：hello js（解析为 span 标签） </script> ⚠️ 注意：innerHTML 存在 XSS 安全风险（如插入恶意脚本），若需插入用户输入内容，需先转义（如将 < 替换为 <、> 替换为 >）。
二、操作元素属性
可直接通过元素对象的属性读写 HTML 标签属性，覆盖图片、表单等各类元素的核心属性。
1. 通用元素属性（如 img/a/div）
以图片为例，直接读写 src、alt、title 等属性：
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花"> <script> var img = document.querySelector('img'); // 读属性：获取完整 URL（src 会自动补全绝对路径） console.log(img.src); // 输出：http://xxx/rose.jpg console.log(img.alt); // 输出：这是一朵花 // 改属性：点击切换图片 img.onclick = function () { if (img.src.includes('rose.jpg')) { img.src = './rose2.png'; } else { img.src = './rose.jpg'; } } </script> 2. 表单元素属性（input/select/textarea）
表单元素有专属核心属性，是实现交互的关键，常用属性如下：
| 属性 | 作用 | 适用场景 |
|---|---|---|
| value | 表单值（输入框 / 按钮文本） | 输入框内容、按钮文本修改 |
| disabled | 是否禁用（true/false） | 禁用按钮 / 输入框 |
| checked | 复选框 / 单选框是否选中 | 全选 / 反选功能 |
| selected | 下拉选项是否选中 | 下拉框默认选中 |
| type | 输入框类型（text/button） | 切换输入框类型 |
示例 1：切换按钮文本（播放 / 暂停）
<input type="button" value="播放"> <script> var btn = document.querySelector('input'); btn.onclick = function () { // 三元表达式快速切换文本 btn.value = btn.value === '播放' ? '暂停' : '播放'; } </script> 示例 2：点击计数（输入框值 + 1）
<input type="text" value="0"> <input type="button" value='点我+1'> <script> var text = document.querySelector('#text'); var btn = document.querySelector('#btn'); btn.onclick = function () { // 注意：value 是字符串，需转为数字再计算 var num = Number(text.value); text.value = num + 1; } </script> 示例 3：复选框全选 / 反选（实战）
<input type="checkbox">我全都要 <br> <input type="checkbox">貂蝉 <br> <input type="checkbox">小乔 <br> <input type="checkbox">安琪拉 <br> <input type="checkbox">妲己 <br> <script> var all = document.querySelector('#all'); var girls = document.querySelectorAll('.girl'); // 全选/取消全选：同步所有子复选框状态 all.onclick = function () { girls.forEach(girl => girl.checked = all.checked); } // 单个选项取消：同步取消全选框 girls.forEach(girl => { girl.onclick = function () { // 检测所有子复选框是否都选中（转为数组使用 every 方法） all.checked = [...girls].every(girl => girl.checked); } }); </script> 三、操作元素样式
样式操作分为 “行内样式”（优先级高）和 “类名样式”（批量修改），按需选择使用。
1. 行内样式（style）
直接修改元素的 style 属性，CSS 属性名需转为驼峰命名（如 background-color → backgroundColor），适合少量样式修改。
// 单个样式修改 element.style.样式名 = 样式值; // 多个样式批量修改（用 cssText） element.style.cssText = "样式名1:值1; 样式名2:值2;"; 示例：点击放大字体
<div>哈哈</div> <script> var div = document.querySelector('div'); div.onclick = function () { // 解析当前字体大小（去掉 px 转为数字） var curSize = parseInt(this.style.fontSize); this.style.fontSize = (curSize + 10) + "px"; // 放大 10px this.style.color = "red"; // 同时修改字体颜色为红色 } </script> 2. 类名样式（className/classList）
适合批量修改样式，通过切换 CSS 类名实现，推荐使用 classList（更灵活，不覆盖原有类名）。
| 方法 | 作用 | 示例 |
|---|---|---|
| className | 覆盖原有所有类名 | elem.className = "box dark" |
| classList.add() | 添加类名（不覆盖原有） | elem.classList.add("dark") |
| classList.remove() | 删除指定类名 | elem.classList.remove("light") |
| classList.toggle() | 切换类名（有则删，无则加） | elem.classList.toggle("dark") |
示例：夜间模式切换（实战）
<style> .container { width: 100%; height: 300px; padding: 20px; } .light { background: #f3f3f3; color: #333; } .dark { background: #333; color: #f3f3f3; } </style> <div>这是一大段测试文本</div> <script> var div = document.querySelector('.container'); div.onclick = function () { // 一行切换夜间/日间模式（toggle 自动判断） this.classList.toggle("dark"); this.classList.toggle("light"); } </script> 四、操作节点：增删改 DOM 树
DOM 树的节点操作是动态修改页面结构的核心，包括 “新增节点” 和 “删除节点” 两类。
1. 新增节点（两步法）
步骤 1：创建节点
核心使用 createElement 创建元素节点，可按需设置节点属性 / 内容。
// 创建元素节点（核心） var newElem = document.createElement('标签名'); // 可选：设置节点属性/内容 newElem.id = "newId"; newElem.className = "newClass"; newElem.innerHTML = "新节点内容"; 📌 扩展：还可创建文本节点（document.createTextNode("文本")）、注释节点（document.createComment("注释")），但实际开发以 createElement 为主。
步骤 2：插入节点
创建的节点需插入到 DOM 树中才会显示，常用两种插入方式：
| 方法 | 作用 | 语法 |
|---|---|---|
| appendChild() | 插入到父节点最后一个子节点后 | 父节点.appendChild(新节点) |
| insertBefore() | 插入到指定子节点之前 | 父节点.insertBefore(新节点, 参考节点) |
示例 1：appendChild 插入到末尾
<div></div> <script> // 1. 创建节点 var newDiv = document.createElement('div'); newDiv.innerHTML = "我是新节点"; // 2. 插入到 container 末尾 var container = document.querySelector('.container'); container.appendChild(newDiv); </script> 示例 2：insertBefore 插入到指定位置
<div> <div>11</div> <div>22</div> </div> <script> var newDiv = document.createElement('div'); newDiv.innerHTML = "插入到22之前"; var container = document.querySelector('.container'); // 插入到第二个子节点（22）之前 container.insertBefore(newDiv, container.children[1]); </script> 📌 扩展：
- 若
insertBefore的参考节点为null，则等价于appendChild； - 同一节点插入多次，仅最后一次生效（节点被 “移动” 而非复制）。
2. 删除节点
传统方式：通过父节点删除
// 父节点删除子节点，返回被删除的节点 var deletedNode = 父节点.removeChild(待删除节点); ⚠️ 注意：待删除节点必须是父节点的直接子节点，否则会报错。
简化方式（ES6+）：节点自行删除
无需找父节点，直接调用 remove() 即可，更简洁。
待删除节点.remove(); 示例：删除指定节点
<div> <div>要删除的节点</div> <div>保留的节点</div> </div> <script> var delElem = document.querySelector('#delMe'); // 方式1：通过父节点删除 delElem.parentElement.removeChild(delElem); // 方式2：自行删除（推荐） // delElem.remove(); </script> 📌 扩展：删除的节点仍在内存中，可重新插入到 DOM 树其他位置；若无需复用，可赋值 null 释放内存（delElem = null）。
