异常教程

JavaScript 和 HTML DOM 参考手册（长文讲解）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

在网页开发领域，JavaScript 和 HTML DOM（文档对象模型）是构建动态交互的核心工具。无论是实现页面元素的动态更新、表单验证，还是创建复杂的用户交互效果，这两者都扮演着不可或缺的角色。对于编程初学者而言，理解其基础概念和操作方式是迈向进阶开发的关键一步；而中级开发者则可以通过深入掌握高级技巧，进一步提升代码的灵活性与可维护性。本文将通过循序渐进的方式，结合生动的比喻与代码示例，系统梳理 JavaScript 和 HTML DOM 的核心知识点，帮助读者快速掌握这一技能组合。

一、基础概念与核心原理

1.1 HTML DOM 的本质：网页的“数字骨架”

HTML DOM（Document Object Model）可以理解为网页内容的“数字骨架”。它将 HTML 文档中的每个元素（如 <div>、<p>、<button>）转化为对象，并通过层级关系构成一棵树状结构（即“DOM 树”）。例如，页面中的 <body> 是根节点，其下的 <header> 和 <main> 是子节点，而 <header> 内的 <h1> 则是其子节点。

比喻：想象一个由积木搭建的城堡，每个积木块代表 HTML 元素，而 DOM 就是描述这些积木如何连接、嵌套的规则手册。

1.2 JavaScript 与 DOM 的协作关系

JavaScript 的强大之处在于它能够通过 DOM API 直接操作网页元素。例如，你可以用 JavaScript 获取某个按钮元素，修改它的文本内容，或在用户点击时触发特定行为。这种“读写网页内容”的能力，使得静态 HTML 转变为动态交互的工具。

代码示例：

<!-- HTML 结构 -->
<button id="myButton">点击我！</button>

<script>
  // 通过 DOM API 获取按钮元素
  const button = document.getElementById('myButton');

  // 通过 JavaScript 修改按钮的文本内容
  button.textContent = '已点击！';
</script>

二、核心操作与代码实践

2.1 访问与选择 DOM 元素

2.1.1 基础选择方法

JavaScript 提供了多种方法来定位 DOM 元素，最常用的是：

  • getElementById(id)：通过元素的 id 属性获取单个元素。
  • getElementsByClassName(className)：通过类名获取一组元素。
  • querySelector(selector)：通过 CSS 选择器获取第一个匹配元素。
  • querySelectorAll(selector)：通过 CSS 选择器获取所有匹配元素。

代码示例：

// 通过 id 获取元素
const header = document.getElementById('pageHeader');

// 通过类名获取所有按钮
const buttons = document.getElementsByClassName('btn');

// 通过 CSS 选择器获取第一个 .active 类元素
const activeElement = document.querySelector('.active');

2.1.2 动态元素的访问技巧

若页面内容动态生成（如通过 AJAX 请求加载数据），需确保在元素渲染完成后执行操作。此时可使用 DOMContentLoaded 事件或将脚本置于 HTML 结束标签之后：

document.addEventListener('DOMContentLoaded', () => {
  // 页面完全加载后执行的操作
  const dynamicContent = document.getElementById('dynamic');
  dynamicContent.style.color = 'red';
});

2.2 修改 DOM 内容与样式

2.2.1 文本与属性的动态更新

通过 textContent、innerHTML 或 setAttribute 方法，可以实时修改元素内容或属性值：

// 修改文本内容
const paragraph = document.getElementById('info');
paragraph.textContent = '新内容';

// 修改元素属性（如 href）
const link = document.querySelector('a');
link.setAttribute('href', 'https://new-url.com');

注意：innerHTML 可以直接操作 HTML 内容，但需谨慎使用以避免 XSS 攻击风险。

2.2.2 样式动态控制

通过 style 属性或 classList 方法，可动态调整元素样式：

// 直接设置内联样式
const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.padding = '20px';

// 管理 CSS 类（推荐方式）
const button = document.querySelector('button');
button.classList.add('active'); // 添加类
button.classList.remove('inactive'); // 移除类

2.3 事件监听与交互

2.3.1 事件驱动编程基础

事件（如 click、mouseover）是用户或浏览器触发的信号。通过 addEventListener 方法，可以为元素绑定事件处理函数：

const button = document.getElementById('submit');
button.addEventListener('click', (event) => {
  console.log('按钮被点击了！');
  // 阻止默认行为（如表单提交）
  event.preventDefault();
});

比喻：将事件监听器想象为“守门人”，当特定事件发生时，它会触发预设的响应逻辑。

2.3.2 常见事件类型与案例

  • 表单验证：在用户提交表单前检查输入内容：

    const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
  const input = document.getElementById('username');
  if (input.value.trim() === '') {
    alert('用户名不能为空！');
    event.preventDefault();
  }
});

  • 动态加载内容：通过 fetch API 获取数据并更新页面：

    document.getElementById('loadButton').addEventListener('click', async () => {
  const response = await fetch('/api/data');
  const data = await response.json();
  document.getElementById('content').innerHTML = `<p>${data.message}</p>`;
});

三、进阶技巧与常见问题

3.1 DOM 操作的性能优化

频繁操作 DOM 可能导致性能问题，因此需遵循以下原则：

  1. 批量操作：将多个 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);

  2. 避免全局搜索：减少使用 querySelectorAll 遍历大量元素，改用局部变量缓存常用元素。

3.2 解决常见问题

3.2.1 元素未找到的排查

若 getElementById 返回 null，常见原因包括：

  • 元素未正确设置 id；
  • 脚本执行时元素尚未加载（需等待 DOMContentLoaded）；
  • 拼写错误（如 myButton 与 mybuttom）。

3.2.2 事件冒泡与阻止

事件冒泡可能导致父元素的事件被意外触发。通过 event.stopPropagation() 可中断此过程：

const parent = document.getElementById('parent');
parent.addEventListener('click', () => {
  console.log('父元素被点击');
});

const child = document.getElementById('child');
child.addEventListener('click', (event) => {
  console.log('子元素被点击');
  event.stopPropagation(); // 阻止事件冒泡到父元素
});

四、总结与展望

通过本文的讲解，我们系统梳理了 JavaScript 和 HTML DOM 的核心操作方法，从基础元素访问到高级事件处理，再到性能优化技巧。对于初学者而言，建议从简单案例入手，逐步实践并理解 DOM 的树状结构与事件驱动机制；中级开发者则可深入探索现代 API（如 Shadow DOM 或 Web Components），进一步提升代码的模块化与复用性。

掌握 JavaScript 和 HTML DOM 参考手册不仅是技术积累的过程，更是培养“以用户需求为中心”的开发思维的关键。随着 Web 技术的快速发展，这一技能组合将持续为开发者提供创造动态、交互式网页的无限可能。

（全文约 1800 字）

最新发布

查看更多文章