JavaScript DOM 核心操作：内容、属性、样式与节点管理

⚠️ 注意：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" 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（更灵活，不覆盖原有类名）。

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

<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 树中才会显示，常用两种插入方式：

示例 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）。