异常教程

JavaScript HTML DOM 实例（长文解析）

更新时间:

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

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

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

在网页开发领域，JavaScript 与 HTML DOM 的结合是实现动态交互的核心技术之一。无论是响应用户点击、更新页面内容，还是根据数据动态生成界面，都离不开对 HTML DOM 的操作。对于编程初学者而言，理解 DOM 的结构与操作方法可能显得有些抽象；而中级开发者则可能希望进一步掌握更灵活的技巧。本文将通过 JavaScript HTML DOM 实例，从基础概念到实战应用，逐步解析这一技术的关键点，帮助读者构建扎实的实践能力。

一、HTML DOM 的基本概念与核心结构

1.1 什么是 DOM？

DOM（Document Object Model，文档对象模型） 是一个编程接口，它将网页文档（如 HTML 或 XML）表示为树状的节点结构，每个节点对应文档中的一个元素、属性或文本。开发者可以通过 JavaScript 操作这个树状结构，实现对页面内容、样式或行为的动态修改。

形象比喻：
可以把 DOM 理解为一本“网页的立体地图”。地图中的每个地标（如建筑物、道路）对应 HTML 中的元素（如 <div>、<button>），而 JavaScript 就像一位导游，可以随时调整地标的位置、颜色，甚至添加新的地标。

1.2 DOM 树的层级与节点类型

DOM 树的根节点是 <html>，其下包含 <head> 和 <body>，再向下延伸到 <div>、<p> 等元素。每个节点可以分为以下类型：

  • 元素节点：如 <h1>, <span>
  • 属性节点：如 <img src="..." alt="..."> 中的 src 和 alt
  • 文本节点：元素内的文字内容，如 <p>你好，世界！</p> 中的文本
  • 注释节点：<!-- 这是注释 -->

1.3 通过 JavaScript 访问 DOM 的方法

要操作 DOM，首先需要获取目标节点。以下是几种常用方法：

// 通过 id 获取元素  
const elementById = document.getElementById("myElement");  

// 通过标签名获取元素（返回 NodeList）  
const elementsByTag = document.getElementsByTagName("div");  

// 通过类名获取元素（返回 HTMLCollection）  
const elementsByClass = document.getElementsByClassName("myClass");  

// 使用 CSS 选择器（推荐方式）  
const elementByQuery = document.querySelector("#myElement");  
const elementsByQuery = document.querySelectorAll(".myClass");

小技巧：querySelector 返回单个元素，querySelectorAll 返回所有匹配元素的 NodeList。

二、基础操作：修改内容、样式与属性

2.1 修改元素内容

通过 textContent 或 innerHTML 可以动态更新元素的内容：

// 修改文本内容  
const title = document.getElementById("title");  
title.textContent = "新标题";  

// 插入 HTML 内容（注意：可能引发 XSS 安全风险）  
const content = document.querySelector("#content");  
content.innerHTML = "<p>这是新内容</p>";

比喻：
修改内容就像用橡皮擦擦掉旧文字，再用笔写上新内容。但 innerHTML 允许插入 HTML 标签，相当于用“带格式的笔”书写。

2.2 动态调整样式

通过 style 属性可以直接修改元素的 CSS 样式：

const box = document.getElementById("box");  
box.style.backgroundColor = "lightblue";  
box.style.padding = "20px";  
box.style.border = "2px solid black";

注意：JavaScript 中的样式属性名需用驼峰命名（如 backgroundColor），而非连字符（如 background-color）。

2.3 操作元素属性

通过 getAttribute 和 setAttribute 可以读取或修改元素的属性：

// 获取属性值  
const img = document.querySelector("img");  
console.log(img.getAttribute("src")); // 输出图片路径  

// 修改属性值  
img.setAttribute("alt", "新描述文本");

三、事件驱动：响应用户交互

3.1 事件监听与回调函数

DOM 元素可以绑定事件监听器，当特定交互发生时（如点击、鼠标悬停），触发回调函数：

const button = document.getElementById("myButton");  

button.addEventListener("click", function() {  
  alert("按钮被点击了！");  
});

关键点：

  • 使用 addEventListener 绑定事件，避免覆盖已有监听器。
  • 事件类型包括 click, mouseover, keydown 等。

3.2 阻止默认行为与事件冒泡

在表单提交或链接跳转场景中，可能需要阻止默认行为：

const form = document.querySelector("form");  

form.addEventListener("submit", function(event) {  
  event.preventDefault(); // 阻止表单提交的默认行为  
  console.log("表单已提交，但页面未刷新");  
});

3.3 实例：动态计数器

<!-- HTML 结构 -->  
<button id="increment">+1</button>  
<span id="count">0</span>  
<button id="decrement">-1</button>  

let count = 0;  
const countDisplay = document.getElementById("count");  

document.getElementById("increment").addEventListener("click", () => {  
  count++;  
  countDisplay.textContent = count;  
});  

document.getElementById("decrement").addEventListener("click", () => {  
  count--;  
  countDisplay.textContent = count;  
});

四、动态创建与操作节点

4.1 创建新元素

使用 document.createElement 动态生成元素，并添加到页面中：

// 创建 <div> 元素并设置内容  
const newDiv = document.createElement("div");  
newDiv.textContent = "新添加的元素";  

// 将新元素添加到 body 的末尾  
document.body.appendChild(newDiv);

4.2 插入、替换与删除节点

// 在目标元素前插入新节点  
const referenceNode = document.getElementById("existingNode");  
referenceNode.parentNode.insertBefore(newDiv, referenceNode);  

// 替换节点  
const oldNode = document.getElementById("oldNode");  
oldNode.parentNode.replaceChild(newDiv, oldNode);  

// 删除节点  
const nodeToRemove = document.getElementById("toBeRemoved");  
nodeToRemove.parentNode.removeChild(nodeToRemove);

4.3 实例：待办事项列表

<input type="text" id="taskInput">  
<button id="addTask">添加任务</button>  
<ul id="taskList"></ul>  

document.getElementById("addTask").addEventListener("click", () => {  
  const input = document.getElementById("taskInput");  
  const taskText = input.value.trim();  

  if (taskText) {  
    // 创建新列表项  
    const li = document.createElement("li");  
    li.textContent = taskText;  

    // 添加删除按钮  
    const deleteBtn = document.createElement("button");  
    deleteBtn.textContent = "删除";  
    deleteBtn.addEventListener("click", () => {  
      li.remove(); // 直接调用 remove() 方法删除节点  
    });  
    li.appendChild(deleteBtn);  

    // 将新项添加到列表  
    document.getElementById("taskList").appendChild(li);  

    // 清空输入框  
    input.value = "";  
  }  
});

五、高级技巧与常见问题

5.1 使用 CSS 选择器优化代码

通过 querySelector 的灵活选择器，可以大幅简化代码：

// 获取 class 为 "active" 的最后一个子元素  
const lastActiveItem = document.querySelector(".active:last-child");  

// 获取 id 为 "sidebar" 的元素下的所有 <a> 标签  
const sidebarLinks = document.querySelectorAll("#sidebar a");

5.2 处理动态加载的内容

当页面内容通过 AJAX 或 JavaScript 动态生成时，直接绑定事件监听器可能无效。此时可以使用 事件委托：

document.getElementById("listContainer").addEventListener("click", function(event) {  
  if (event.target && event.target.classList.contains("delete-btn")) {  
    // 删除对应的列表项  
    event.target.parentElement.remove();  
  }  
});

5.3 性能优化：避免频繁操作 DOM

频繁修改 DOM 会降低页面性能。可以通过以下方式优化：

  • 使用 documentFragment 缓存多个节点后再一次性添加到页面。
  • 将样式修改集中为单次操作（如先修改 style.display，再统一更新）。

六、总结与展望

通过本文的 JavaScript HTML DOM 实例，我们系统地学习了从基础操作到高级应用的多种技巧。掌握 DOM 操作不仅能让网页更具交互性，还能为后续学习框架（如 React、Vue）奠定基础。

对于初学者，建议从简单的事件监听和内容修改开始练习，逐步尝试动态节点操作；中级开发者则可以探索事件委托、性能优化等进阶主题。记住：实践是掌握技术的唯一捷径，尝试将本文的代码示例嵌入到自己的项目中，或设计一个完整的交互式页面，你将收获更多！

未来，随着 Web 技术的发展，DOM 操作的工具和最佳实践可能不断演变，但其核心逻辑始终围绕“通过 JavaScript 操控页面结构”这一主题。保持对新技术的敏感度，同时扎实基础，你将能在前端开发领域游刃有余。

最新发布

查看更多文章