以下是以资深软件开发工程师的视角，对“JavaScript HTML DOM – 改变 HTML”的专业回答。我将详细讲解如何通过 JavaScript 操作 HTML DOM 来改变 HTML 内容，包括方法、属性和使用实例，结合清晰的结构，包含目录、小标题、表格、代码示例和内部链接，确保内容技术准确、逻辑清晰且易于理解。回答基于截至 2025 年 3 月 17 日的最新 JavaScript 标准（ES2023+）和现代浏览器环境。
JavaScript HTML DOM – 改变 HTML
目录
1. 引言
通过 JavaScript 操作 HTML DOM 改变 HTML 内容是动态网页开发的核心功能，可以实时更新页面结构和内容。本教程将介绍多种方法及其应用场景，帮助您掌握 DOM 操作的技巧。
2. 改变 HTML 的方法概述
- 目标：使用 JavaScript 修改 DOM 树中的 HTML 元素、内容或属性。
- 主要方式：
- 修改内容：更改元素的文本或 HTML 结构。
- 添加/删除元素：动态插入或移除 DOM 节点。
- 修改属性：调整元素的特性（如
id、src）。 - 特点：
- 操作直接影响页面显示。
- 支持灵活的结构调整。
3. 操作 HTML 的具体方式
3.1 修改内容
属性：
属性 说明 示例innerHTML 设置或获取元素内部 HTML el.innerHTML = "<p>Hi</p>"textContent 设置或获取元素纯文本内容 el.textContent = "Hello"示例： const el = document.querySelector('div'); el.innerHTML = '<strong>加粗文本</strong>'; el.textContent = '纯文本';3.2 添加和删除元素
添加方法：
方法 说明 示例appendChild() 添加子节点 parent.appendChild(newEl)insertBefore() 在指定子节点前插入 parent.insertBefore(newEl, refEl)删除方法：
方法 说明 示例
—————– ——————————- ————————–removeChild() 删除子节点 parent.removeChild(child)remove() 直接移除元素（ES5+） el.remove()示例： const newP = document.createElement('p'); newP.textContent = '新段落'; document.body.appendChild(newP); newP.remove();3.3 修改属性
方法：
方法 说明 示例setAttribute() 设置属性值 el.setAttribute('id', 'newId')getAttribute() 获取属性值 el.getAttribute('id')removeAttribute() 删除属性 el.removeAttribute('id') 直接属性访问： el.id = 'newId'; el.src = 'image.jpg';
- 示例：
const img = document.querySelector('img'); img.setAttribute('src', 'new.jpg'); 4. 完整实例 4.1 动态更新文本- 目的：根据输入更新元素内容。
- 实例：
<!DOCTYPE html> <html> <body> <input id="input" placeholder="输入内容"> <button onclick="updateText()">更新</button> <div id="output">原始内容</div> <script> function updateText() { const text = document.getElementById('input').value; const output = document.getElementById('output'); output.textContent = text || '默认内容'; } </script> </body> </html>- 说明：测试
textContent修改。
- 目的：动态管理列表。
- 实例：
<!DOCTYPE html> <html> <body> <ul id="list"> <li>项目 1</li> </ul> <button onclick="addItem()">添加</button> <button onclick="removeItem()">移除</button> <script> const list = document.getElementById('list'); let count = 1; function addItem() { const newItem = document.createElement('li'); newItem.textContent = `项目 ${++count}`; list.appendChild(newItem); } function removeItem() { const lastItem = list.lastElementChild; if (lastItem) list.removeChild(lastItem); } </script> </body> </html>- 说明：测试
appendChild和removeChild。
- 目的：点击按钮切换图片来源。
- 实例：
<!DOCTYPE html> <html> <body> <img id="photo" src="https://via.placeholder.com/150" alt="图片"> <button onclick="switchImage()">切换图片</button> <script> const photo = document.getElementById('photo'); let isAlt = false; function switchImage() { isAlt = !isAlt; photo.setAttribute('src', isAlt ? 'https://via.placeholder.com/150/0000FF' : 'https://via.placeholder.com/150'); } </script> </body> </html>- 说明：测试
setAttribute修改src。
- 安全性：避免用
innerHTML处理用户输入，防止 XSS 攻击，优先用textContent。 - 性能：批量操作 DOM 时，尽量减少重排（如用文档片段
DocumentFragment）。 - 引用管理：移除元素后确保不再使用其引用。
- 属性选择：简单属性用直接访问（如
el.id），复杂属性用setAttribute。 - 调试：用开发者工具检查 DOM 结构变化。
- 文档：参考 MDN DOM 文档。
- 结构：包含目录、带锚点的小标题、表格和代码示例，逻辑清晰。
- 实用性：实例从基础到高级应用，可直接运行。
- 内部链接：通过
<a href="#ID">跳转，如 操作 HTML 的具体方式。 - 出站链接：嵌入正文，指向权威资源。
发表回复