在前端开发中，DOM（Document Object Model）是 JavaScript 与网页内容交互的核心，掌握它的基础属性与方法，是实现动态页面和组件交互的必备技能。本文将介绍几个常用的 DOM 属性和方法，包括其使用场景和注意事项。
一、className：为元素设置类名
className 用于为 HTML 元素设置一个或多个 CSS 类名，是操作元素样式的重要方式。
const div = document.getElementById('myDiv');
div.className = 'active highlight';
✅ 使用场景：
- 动态切换元素的 CSS 类，例如按钮的激活状态、模块的切换显示等。
- 与 CSS 搭配使用，实现样式动态加载和切换。
❗ 注意事项：
className替代了class，可以直接修改类名。- 如果你想在原有类名基础上添加新的类名，建议使用
classList.add()，更安全、更灵活。
二、createElement：创建新的 DOM 元素
createElement 方法用于动态创建 HTML 元素，是构建动态内容的基础方法之一。
const newDiv = document.createElement('div');
newDiv.className = 'new-element';
document.body.appendChild(newDiv);
✅ 使用场景：
- 动态生成 HTML 内容，例如无限滚动、添加评论、动态表单输入等。
- 在 DOM 操作中灵活构造元素结构。
❗ 注意事项：
- 调用
createElement时需要传入元素标签名，且是字符串形式。- 创建元素后需要通过
appendChild或insertBefore等方法插入到 DOM 中。
三、appendChild：将元素添加到 DOM 结构中
appendChild 是将一个新的子节点添加到指定父节点下的方法，是构建页面结构时常用的 DOM 操作方式。
const parent = document.getElementById('container');
const child = document.createElement('p');
child.textContent = '这是一个新段落。';
parent.appendChild(child);
✅ 使用场景：
- 构建动态的内容结构，如评论、选项卡、模块的动态生成。
- 在数据展示时，根据数据动态创建并挂载元素。
❗ 注意事项：
appendChild会将元素插入到指定位置的最后面。- 插入的元素会自动成为 DOM 树的一部分，并与页面同步更新。
四、innerHTML：设置元素内部的 HTML 内容
innerHTML 是一个非常常用的属性，用于将 HTML 字符串插入到元素中，适合需要动态渲染内容的场景。
const div = document.getElementById('content');
div.innerHTML = '<h1>欢迎访问</h1><p>这是动态内容。</p>';
✅ 使用场景：
- 动态更新页面内容，如动态展示数据、标签替换等。
- 生成 HTML 内容时简化代码，如通过字符串拼接动态生成代码。
❗ 注意事项：
innerHTML把字符串直接插入 DOM，可能存在 XSS 安全风险，应优先使用textContent。innerHTML会清空元素原有内容，插入新的内容。
五、其他常用 DOM 属性和方法
除了上述几个基础方法，还有许多常用的 DOM 属性和方法，可以帮助你更高效地操作页面。
1. textContent：设置或获取元素的文本内容
不同于 innerHTML，textContent 仅处理纯文本，不会解析 HTML。
<JS>
const div = document.getElementById('content');
div.textContent = '这是纯文本内容。';
✅ 使用场景：
- 安全地设置文本内容，避免 XSS 攻击。
- 获取元素的纯文本内容，如用户输入、数据显示等。
2. querySelector 和 querySelectorAll：DOM 查询工具
这两个方法用于查找 DOM 中的节点，相比 getElementById、getElementsByClassName 等方式更灵活高效。
const div = document.querySelector('#myDiv');
const listItems = document.querySelectorAll('li');
✅ 使用场景：
- 动态获取 DOM 元素时，尤其是我们知道选择器的场合。
- 在数据绑定时，快速定位需要操作的节点。
3. removeChild 和 remove：删除元素
removeChild 是将某个子节点从父节点中移除，remove 是直接从 DOM 中移除自己。
const parent = document.getElementById('container');
const child = parent.querySelector('p');
parent.removeChild(child);
// 或者
child.remove();
✅ 使用场景：
- 动态删除列表项、表格行、弹窗等元素。
- 在数据交互时，根据数据变化进行动态更新。
4. cloneNode：复制元素节点
cloneNode 可以复制元素及其内容，常用于数据重复或组建复用。
<JS>
const button = document.getElementById('myButton');
const clonedButton = button.cloneNode(true); // true 表示克隆子节点
document.body.appendChild(clonedButton);
✅ 使用场景：
- 复制按钮、表单项、图片等可重复的内容。
- 在构建动态组件时复用已有的 DOM 节点。
六、使用场景总结
| 属性/方法 | 使用场景 | 注意事项 |
|---|---|---|
className | 动态样式切换，如状态控制 | 无法精细控制类名添加 |
createElement | 动态生成 HTML 结构 | 需要配合 insert 操作 |
appendChild | 在容器中添加子节点 | 将清空元素内容（可慎用） |
innerHTML | 复杂内容替换（如富文本、动态生成 HTML） | 需要警惕 XSS 风险 |
textContent | 安全地设置或获取纯文本内容 | 不会解析 HTML |
querySelector | 定位复杂结构中的元素 | 支持 CSS 选择器语法 |
removeChild | 删除子元素 | 需要父节点的引用 |
remove | 删除元素自身 | 更简洁高效 |
cloneNode | 复制元素（包括子节点） | 可用于组件复用 |
七、结语
DOM 是前端代码能够与浏览器交互的核心，掌握其基础属性和方法，是构建动态 UI 和交互功能的前提。虽然这些方法看起来简单，但在实际项目中却应用广泛，建议在开发过程中熟练使用，提高开发效率和代码质量。
