异常教程

JavaScript HTML DOM 改变 HTML 内容（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，JavaScript HTML DOM 改变 HTML 内容是一项核心技能。它允许开发者通过代码动态调整网页的结构、样式或文本，从而实现交互性更强的用户体验。无论是简单的文本替换、复杂的动态加载，还是响应用户操作的实时更新，DOM 操作都是这些功能的技术基础。本文将从零开始讲解如何通过 JavaScript 操控 DOM，逐步深入其原理和实践方法，并通过案例帮助读者掌握关键技巧。

一、理解 DOM：Web 页面的“骨架”与“接口”

1.1 DOM 是什么？

DOM（Document Object Model，文档对象模型） 是浏览器为 HTML 文档创建的树状结构接口。它将网页元素转化为可编程的对象，使开发者能够通过 JavaScript 读取、修改或删除这些元素。可以将其想象为一个“乐高积木”系统：每个 HTML 标签是一个积木块，而 JavaScript 是操作这些积木的工具。

例如，一个简单的 HTML 结构：

<div id="container">
  <p>Hello World</p>
</div>

对应的 DOM 树如下：

  • 根节点（document）
    └── div（id="container"）
    └── p（文本内容 "Hello World"）

1.2 节点类型与层级关系

DOM 中的每个元素都是一个节点（Node），常见的节点类型包括：

  • 元素节点（Element Node）：对应 HTML 标签（如 <div>、<p>）。
  • 文本节点（Text Node）：包含元素内的纯文本内容。
  • 属性节点（Attribute Node）：存储元素的属性（如 id="container"）。

通过层级关系，开发者可以定位任意节点：

  • parent：父节点（如 <div> 是 <p> 的父节点）。
  • children：直接子节点集合。
  • siblings：兄弟节点（同级元素）。

二、获取 HTML 元素：DOM 操作的第一步

要修改 HTML 内容，首先需要通过 JavaScript 定位目标元素。以下是常用的方法：

2.1 getElementById

通过元素的 id 属性直接获取单个元素，速度最快且语法简单：

// HTML 中存在 <div id="myDiv"></div>  
const myDiv = document.getElementById("myDiv");

2.2 querySelector 和 querySelectorAll

使用 CSS 选择器语法，支持更灵活的定位：

  • querySelector 返回第一个匹配的元素： 
    const firstParagraph = document.querySelector("p"); // 获取第一个 <p>
  • querySelectorAll 返回所有匹配元素的 NodeList： 
    const allButtons = document.querySelectorAll("button");

2.3 其他常用方法

  • getElementsByClassName：通过类名获取元素集合。
  • getElementsByTagName：通过标签名获取元素集合。

比喻：这些方法就像在图书馆中查找书籍，id 是书号（唯一），而 CSS 选择器是“按书名或类别”搜索。

三、修改 HTML 内容：核心方法与技巧

3.1 innerHTML：直接替换元素内容

通过 innerHTML 属性，可以完全替换元素的 HTML 内容：

const contentDiv = document.getElementById("content");  
contentDiv.innerHTML = "<h2>New Title</h2><p>New text here.</p>";

注意：

  • innerHTML 会覆盖原有内容，且会自动解析 HTML 标签（可能引入安全风险，如 XSS 攻击）。
  • 如果只需修改文本，建议使用 textContent，它更安全且性能更好。

3.2 textContent：纯文本操作

textContent 仅处理文本内容，不会解析 HTML 标签：

const greeting = document.querySelector("#greeting");  
greeting.textContent = "Hello, " + username; // 动态插入用户名

比喻：innerHTML 是“装修房屋”（可能破坏结构），而 textContent 是“更换家具”（仅调整内容）。

3.3 动态创建与插入元素

通过 createElement 和 appendChild 方法，可以动态生成并添加元素：

// 创建新 <li> 元素  
const newItem = document.createElement("li");  
newItem.textContent = "New Task";  

// 插入到 <ul> 列表末尾  
const taskList = document.querySelector("#task-list");  
taskList.appendChild(newItem);

3.4 删除与替换元素

  • 删除：使用 removeChild 方法： 
    const oldItem = document.querySelector("#old-element");  
oldItem.parentNode.removeChild(oldItem);
  • 替换：用 replaceChild 替换现有节点： 
    const newParagraph = document.createElement("p");  
newParagraph.textContent = "New content";  
const oldParagraph = document.getElementById("old-p");  
oldParagraph.parentNode.replaceChild(newParagraph, oldParagraph);

四、实战案例：动态更新网页内容

4.1 案例 1：按钮点击修改文本

<button id="change-btn">Click Me</button>  
<div id="display"></div>  

<script>  
  document.getElementById("change-btn").addEventListener("click", function() {  
    const displayDiv = document.getElementById("display");  
    displayDiv.textContent = "Button clicked!";  
    displayDiv.style.color = "green"; // 同时修改样式  
  });  
</script>

4.2 案例 2：动态加载列表项

// 假设 HTML 中有 <ul id="list"></ul>  
const listItems = ["Apple", "Banana", "Orange"];  
const list = document.getElementById("list");  

listItems.forEach(item => {  
  const li = document.createElement("li");  
  li.textContent = item;  
  list.appendChild(li);  
});

4.3 案例 3：表单输入实时预览

<input type="text" id="input-field">  
<div id="preview"></div>  

<script>  
  document.getElementById("input-field").addEventListener("input", function() {  
    const preview = document.getElementById("preview");  
    preview.textContent = this.value; // 将输入值实时显示  
  });  
</script>

五、进阶技巧与注意事项

5.1 性能优化：减少 DOM 操作频率

频繁操作 DOM 会影响页面性能。建议：

  • 使用文档碎片（Document Fragment）批量操作： 
    const fragment = document.createDocumentFragment();  
for (let i = 0; i < 100; i++) {  
  const item = document.createElement("div");  
  fragment.appendChild(item);  
}  
document.body.appendChild(fragment); // 一次性插入
  • 避免在循环中直接操作 DOM。

5.2 安全性：防范 XSS 攻击

使用 innerHTML 时，若内容包含用户输入，需严格过滤或转义：

// 错误示例（可能注入恶意代码）  
element.innerHTML = userInput;  

// 正确做法：使用 textContent  
element.textContent = userInput;

5.3 跨浏览器兼容性

部分 DOM 方法在旧浏览器中可能不兼容。使用工具库（如 jQuery）或 polyfill 可简化适配工作。

六、结论

掌握 JavaScript HTML DOM 改变 HTML 内容 的核心方法，是构建交互式网页的基础。从基础的元素获取、内容修改，到动态创建与删除节点，开发者能够通过代码实现几乎任何 UI 变化。本文通过案例演示了常见场景的解决方案，同时强调了性能优化和安全实践的重要性。

对于初学者，建议从简单操作入手，逐步尝试复杂项目；中级开发者则可深入探索虚拟 DOM（如 React）或更高效的操作模式。记住，DOM 是连接静态 HTML 与动态 JavaScript 的桥梁，熟练运用它将为你的 Web 开发之路打开无限可能。

最新发布

查看更多文章