宁德市网站建设_网站建设公司_无障碍设计_seo优化

DOM（文档对象模型）是前端开发中操作页面结构、内容和样式的核心，本文聚焦 DOM 中元素内容、属性、样式的读写修改，以及节点的增删改，结合实战示例讲解核心用法与最佳实践。

一、操作元素内容

元素内容操作分为纯文本处理和带 HTML 结构的处理，核心使用innerText和innerHTML两个属性，二者特性对比如下：

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）

表单元素有专属核心属性，是实现交互的关键，常用属性如下：

示例 1：切换按钮文本（播放 / 暂停）

<input type="button" value="播放"> <script> var btn = document.querySelector('input'); btn.onclick = function () { // 三元表达式快速切换文本 btn.value = btn.value === '播放' ? '暂停' : '播放'; } </script>

示例 2：点击计数（输入框值 + 1）

<input type="text" id="text" value="0"> <input type="button" id="btn" 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" id="all">我全都要 <br> <input type="checkbox" class="girl">貂蝉 <br> <input type="checkbox" class="girl">小乔 <br> <input type="checkbox" class="girl">安琪拉 <br> <input type="checkbox" class="girl">妲己 <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 style="font-size: 20px; font-weight: 700;">哈哈</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（更灵活，不覆盖原有类名）。

示例：夜间模式切换（实战）

<style> .container { width: 100%; height: 300px; padding: 20px; } .light { background: #f3f3f3; color: #333; } .dark { background: #333; color: #f3f3f3; } </style> <div class="container light">这是一大段测试文本</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 树中才会显示，常用两种插入方式：

示例 1：appendChild 插入到末尾

<div class="container"></div> <script> // 1. 创建节点 var newDiv = document.createElement('div'); newDiv.innerHTML = "我是新节点"; // 2. 插入到 container 末尾 var container = document.querySelector('.container'); container.appendChild(newDiv); </script>

示例 2：insertBefore 插入到指定位置

<div class="container"> <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 class="container"> <div id="delMe">要删除的节点</div> <div>保留的节点</div> </div> <script> var delElem = document.querySelector('#delMe'); // 方式1：通过父节点删除 delElem.parentElement.removeChild(delElem); // 方式2：自行删除（推荐） // delElem.remove(); </script>

📌 扩展：删除的节点仍在内存中，可重新插入到 DOM 树其他位置；若无需复用，可赋值null释放内存（delElem = null）。