异常教程

JavaScript HTML DOM（建议收藏）

更新时间:

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

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

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

前言

在网页开发的世界中，JavaScript 和 HTML DOM（文档对象模型）是构建交互体验的核心工具。想象一个网页就像一座房屋：HTML 提供框架，CSS 负责装饰，而 JavaScript 则赋予它“生命”。JavaScript HTML DOM 就像这座房屋的神经系统，它允许开发者通过代码与网页中的每一个元素（如按钮、文本框、图片）进行“对话”。无论是响应用户的点击动作，还是动态更新页面内容，DOM 都是实现这一切的桥梁。

本文将从基础概念逐步深入，通过案例和代码示例，帮助编程初学者和中级开发者掌握 DOM 的核心操作，并理解其在实际项目中的应用场景。

什么是 JavaScript HTML DOM？

DOM（Document Object Model，文档对象模型） 是一个编程接口，它将网页内容（HTML 或 XML）表示为树状结构的对象集合。每个 HTML 元素、属性、文本内容都对应 DOM 中的一个节点。而 JavaScript HTML DOM 则是指通过 JavaScript 操纵这些节点的能力。

形象比喻：
可以将 DOM 想象为一座图书馆的目录系统。HTML 是书架上的书籍，DOM 就是书架的索引卡片，帮助你快速找到任何一本书（元素）。而 JavaScript 就是图书管理员，可以根据指令（代码）添加、删除或修改书籍的位置或内容。

DOM 的核心特性

  1. 树状结构：DOM 将 HTML 元素组织为父子层级关系，例如 <div> 是父节点，其内部的 <p> 是子节点。
  2. 可操作性：通过 JavaScript，开发者可以读取、修改或删除 DOM 中的节点。
  3. 事件驱动：DOM 元素可以绑定事件（如点击、鼠标悬停），触发对应的 JavaScript 函数。

JavaScript HTML DOM 的基础操作

1. 获取 DOM 元素

要操作 DOM，首先需要找到目标元素。以下是几种常用的方法：

通过 getElementById 获取单个元素

// HTML 中的元素  
<div id="myDiv">Hello World!</div>  

// JavaScript 代码  
const myElement = document.getElementById("myDiv");  
console.log(myElement.textContent); // 输出："Hello World!"

关键点：id 必须是页面中唯一的，否则只能获取到第一个匹配项。

通过 querySelector 和 querySelectorAll 获取元素

这两个方法支持 CSS 选择器语法，灵活性更高：

// 获取第一个匹配的元素  
const firstParagraph = document.querySelector("p");  

// 获取所有匹配的元素（返回 NodeList）  
const allLinks = document.querySelectorAll("a");

其他常用方法

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

2. 修改元素内容与属性

修改文本内容

通过 textContent 或 innerHTML 属性可以直接更新元素的内容：

const title = document.getElementById("page-title");  
title.textContent = "New Page Title"; // 安全更新文本，不解析 HTML  
title.innerHTML = "<strong>加粗标题</strong>"; // 允许插入 HTML 标签

注意：使用 innerHTML 时需谨慎，避免 XSS（跨站脚本攻击）风险。

修改元素属性

通过 setAttribute 或直接操作元素的属性对象：

const imgElement = document.getElementById("myImage");  
imgElement.setAttribute("src", "new-image.jpg"); // 修改图片路径  
imgElement.alt = "New Image Description"; // 直接设置 alt 属性

动态添加或删除元素

// 创建新元素并添加到页面  
const newDiv = document.createElement("div");  
newDiv.textContent = "这是一个新元素";  
document.body.appendChild(newDiv);  

// 删除元素  
const oldElement = document.getElementById("remove-me");  
oldElement.remove(); // 或 oldElement.parentNode.removeChild(oldElement);

事件处理与交互逻辑

DOM 的真正威力在于它能够响应用户的操作。通过 事件监听器，开发者可以定义当某个事件（如点击、输入、鼠标移动）发生时执行的代码。

添加事件监听器

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

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

关键点：

  • 使用 addEventListener 可绑定多个事件处理函数。
  • 事件类型包括 click、mouseover、keydown 等。

事件对象与目标元素

事件函数可以接收一个 event 对象，包含事件的详细信息：

document.querySelector("input").addEventListener("input", function(event) {  
  console.log("输入的内容：", event.target.value);  
});

常见问题与解决方案

问题 1：元素未找到，返回 null 或 undefined

原因：

  • 元素的 id 或选择器写错了。
  • JavaScript 代码在 DOM 完全加载前执行（例如将脚本放在 <head> 中）。

解决方案：

  • 检查元素的 id 和选择器是否正确。
  • 使用 DOMContentLoaded 事件或将脚本放在 <body> 底部： 
    document.addEventListener("DOMContentLoaded", function() {  
  // 代码安全执行  
});

问题 2：动态创建的元素无法绑定事件

原因：动态添加的元素在页面加载时不存在，原有事件监听器无法覆盖它们。

解决方案：
使用 事件委托，将事件监听器绑定到父元素：

document.body.addEventListener("click", function(event) {  
  if (event.target.classList.contains("dynamic-item")) {  
    // 处理动态元素的点击  
  }  
});

进阶技巧：遍历与复杂操作

1. 遍历 DOM 节点

通过 childNodes 或 children 属性遍历子元素：

const parent = document.getElementById("parent");  
for (let i = 0; i < parent.children.length; i++) {  
  parent.children[i].style.color = "red"; // 修改所有子元素的文字颜色  
}

2. 使用 querySelectorAll 的灵活选择

// 选择所有带有 class="active" 的 li 元素  
const activeItems = document.querySelectorAll("li.active");  

// 选择 class 以 "section" 开头的元素  
const sections = document.querySelectorAll("[class^='section']");

3. 结合 ES6+ 新特性简化代码

// 使用 forEach() 遍历 NodeList  
document.querySelectorAll(".item").forEach(item => {  
  item.addEventListener("click", handleClick);  
});

实际案例：动态表单验证

以下是一个完整的案例，展示如何通过 DOM 操作实现表单验证：

HTML 结构

<form id="contact-form">  
  <input type="text" id="name" placeholder="姓名">  
  <input type="email" id="email" placeholder="邮箱">  
  <button type="submit">提交</button>  
</form>  
<div id="error-message"></div>

JavaScript 逻辑

document.getElementById("contact-form").addEventListener("submit", function(event) {  
  event.preventDefault(); // 阻止表单默认提交  

  const name = document.getElementById("name").value.trim();  
  const email = document.getElementById("email").value.trim();  

  if (name === "" || email === "") {  
    const errorMessage = document.getElementById("error-message");  
    errorMessage.textContent = "姓名和邮箱不能为空！";  
    errorMessage.style.color = "red";  
    return;  
  }  

  // 验证成功，执行提交逻辑  
  alert("提交成功！");  
  this.reset(); // 重置表单  
});

结论

JavaScript HTML DOM 是连接静态页面与动态交互的纽带。通过掌握元素选择、属性修改、事件监听等核心技能，开发者可以构建出响应用户操作、实时更新内容的网页应用。无论是简单的按钮点击反馈，还是复杂的动态数据展示，DOM 都提供了灵活且强大的工具支持。

对于初学者，建议从基础语法开始练习，逐步尝试结合 CSS 和异步数据（如 AJAX）实现更复杂的交互。中级开发者则可以探索 DOM 的高级特性（如虚拟 DOM）或结合框架（如 React、Vue）进一步优化性能。

记住：DOM 的学习是一个循序渐进的过程。通过不断实践和案例分析，你将逐渐掌握用代码“操控”网页的每一个细节。

最新发布

查看更多文章