JavaScript大前端
JavaScript DOM 核心操作：内容、属性、样式与节点管理
介绍 JavaScript DOM 核心操作，涵盖元素内容（innerText/innerHTML）、属性（value/src/checked）、样式（style/classList）及节点增删改（createElement/appendChild/remove）。通过对比表格和实战示例，讲解如何读写页面结构与样式，并提示 XSS 安全风险。适合前端开发者掌握动态页面交互基础。
介绍 JavaScript DOM 核心操作，涵盖元素内容（innerText/innerHTML）、属性（value/src/checked）、样式（style/classList）及节点增删改（createElement/appendChild/remove）。通过对比表格和实战示例，讲解如何读写页面结构与样式，并提示 XSS 安全风险。适合前端开发者掌握动态页面交互基础。
DOM（文档对象模型）是前端开发中操作页面结构、内容和样式的核心，本文聚焦 DOM 中元素内容、属性、样式的读写修改，以及节点的增删改，结合实战示例讲解核心用法与最佳实践。
元素内容操作分为纯文本处理和带 HTML 结构的处理，核心使用 innerText 和 innerHTML 两个属性，二者特性对比如下：
| 方法 | 识别 HTML 标签 | 保留换行 / 空格 | 标准性 | 适用场景 |
|---|---|---|---|---|
| innerText | ❌ | ❌ | 非标准（IE） | 仅读取 / 修改纯文本 |
| innerHTML | ✅ | ✅ | W3C 标准 | 读取 / 修改带 HTML 结构的内容 |
仅处理文本内容，会忽略 HTML 标签和源码中的换行 / 空格，适合简单文本读写。
// 读操作：获取元素纯文本内容
var text = element.innerText;
// 写操作：设置纯文本内容（标签会被当作普通文本）
element.innerText = "新文本内容";
可读写包含 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 标签属性，覆盖图片、表单等各类元素的核心属性。
以图片为例，直接读写 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>
表单元素有专属核心属性，是实现交互的关键，常用属性如下：
| 属性 | 作用 | 适用场景 |
|---|---|---|
| value | 表单值（输入框 / 按钮文本） | 输入框内容、按钮文本修改 |
| disabled | 是否禁用（true/false） | 禁用按钮 / 输入框 |
| checked | 复选框 / 单选框是否选中 | 全选 / 反选功能 |
| selected | 下拉选项是否选中 | 下拉框默认选中 |
| type | 输入框类型（text/button） | 切换输入框类型 |
<input type="button" value="播放">
<script>
var btn = document.querySelector('input');
btn.onclick = function () {
// 三元表达式快速切换文本
btn.value = btn.value === '播放' ? '暂停' : '播放';
}
</script>
<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>
<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.);
});
});
样式操作分为'行内样式'（优先级高）和'类名样式'（批量修改），按需选择使用。
直接修改元素的 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>
适合批量修改样式，通过切换 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 树的节点操作是动态修改页面结构的核心，包括'新增节点'和'删除节点'两类。
核心使用 createElement 创建元素节点，可按需设置节点属性 / 内容。
// 创建元素节点（核心）
var newElem = document.createElement('标签名');
// 可选：设置节点属性/内容
newElem.id = "newId";
newElem.className = "newClass";
newElem.innerHTML = "新节点内容";
📌 扩展：还可创建文本节点（document.createTextNode("文本")）、注释节点（document.createComment("注释")），但实际开发以 createElement 为主。
创建的节点需插入到 DOM 树中才会显示，常用两种插入方式：
| 方法 | 作用 | 语法 |
|---|---|---|
| appendChild() | 插入到父节点最后一个子节点后 | 父节点.appendChild(新节点) |
| insertBefore() | 插入到指定子节点之前 | 父节点.insertBefore(新节点，参考节点) |
<div></div>
<script>
// 1. 创建节点
var newDiv = document.createElement('div');
newDiv.innerHTML = "我是新节点";
// 2. 插入到 container 末尾
var container = document.querySelector('.container');
container.appendChild(newDiv);
</script>
<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；// 父节点删除子节点，返回被删除的节点
var deletedNode = 父节点.removeChild(待删除节点);
⚠️ 注意：待删除节点必须是父节点的直接子节点，否则会报错。
无需找父节点，直接调用 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）。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online