异常教程

HTML DOM Document 对象（一文讲透）

更新时间:

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

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

在网页开发的世界中，HTML DOM（文档对象模型）是连接静态页面与动态交互的桥梁。而位于这个模型顶端的 HTML DOM Document 对象，就像是网页的“控制中枢”，它不仅管理着整个页面的结构，还提供了丰富的接口供开发者操作页面元素、响应用户行为。对于编程初学者而言，理解这个核心对象如同掌握了打开动态网页之门的钥匙；而对中级开发者来说，深入挖掘它的功能则能显著提升开发效率。本文将从基础概念出发，结合实际案例，逐步解析 HTML DOM Document 对象 的核心特性与应用场景。

一、HTML DOM Document 对象：网页的“根节点”

在开始之前，我们需要明确一个关键比喻：DOM（Document Object Model）是一棵倒置的树。这棵树的根节点就是 Document 对象，它向下延伸出分支（如 <html>、<head>、<body> 等标签），最终形成由元素、属性和文本组成的复杂结构。

Document 对象的核心作用包括：

  1. 访问页面元素：通过 getElementById()、querySelector() 等方法，开发者可以定位到页面中的任意节点。
  2. 动态修改内容：直接操作元素的文本、样式或属性，实现网页内容的实时更新。
  3. 事件监听与触发：为页面元素绑定事件（如点击、鼠标悬停），并定义响应逻辑。
  4. 管理全局状态：例如控制页面标题、URL，或与浏览器窗口进行交互。

二、Document 对象的核心属性与方法

1. 基础属性：访问页面的“身份证”

Document 对象提供了多个全局属性，这些属性如同网页的“身份证”，记录着页面的关键信息。以下是一些常用属性及其实例：

属性名作用描述示例代码
document.title获取或设置网页标题document.title = "新标题"
document.URL获取当前页面的完整 URLconsole.log(document.URL)
document.body获取 <body> 元素的引用document.body.style.backgroundColor = "lightblue"

案例解析：
假设页面初始标题为“旧标题”，执行以下代码后，标题会立即变为“新标题”，且页面背景色变为浅蓝色：

document.title = "新标题";  
document.body.style.backgroundColor = "lightblue";

2. 核心方法：操作 DOM 的“工具箱”

Document 对象的方法是开发者与 DOM 交互的核心工具。以下是几个高频使用的方法及其比喻：

（1）document.getElementById()

比喻：如同在图书馆中根据书号快速找到书籍。
用法：通过元素的 id 属性直接获取单个元素。

// HTML中存在 <div id="myDiv">Hello</div>  
const myDiv = document.getElementById("myDiv");  
myDiv.textContent = "World"; // 修改内容为"World"

（2）document.querySelector() 和 document.querySelectorAll()

比喻：类似使用 GPS 导航系统，支持通过 CSS 选择器定位元素。
区别：

  • querySelector() 返回第一个匹配的元素。
  • querySelectorAll() 返回所有匹配元素的 NodeList。
// 获取所有类名为 "item" 的元素  
const items = document.querySelectorAll(".item");  
items.forEach(item => item.style.color = "red"); // 将所有元素文字设为红色

（3）document.createElement() 和 appendChild()

比喻：如同在画布上“绘制新图形”并将其添加到指定位置。

// 创建新元素并插入到 body 中  
const newPara = document.createElement("p");  
newPara.textContent = "这是新段落";  
document.body.appendChild(newPara);

三、Document 对象的事件处理：网页的“神经系统”

Document 对象不仅是静态结构的管理者，更是事件驱动交互的中心。通过绑定事件监听器（Event Listeners），开发者可以监听全局事件（如页面加载完成）或特定元素的交互行为。

1. 全局事件监听

案例：当用户按下回车键时，修改页面标题：

document.addEventListener("keydown", (event) => {  
  if (event.key === "Enter") {  
    document.title = "您按下了回车键！";  
  }  
});

2. 动态元素的事件绑定

常见误区：若元素是动态生成的（如通过 createElement 创建），需确保事件监听器在其创建后绑定。

// 动态创建按钮并绑定点击事件  
const newButton = document.createElement("button");  
newButton.textContent = "点击我";  
newButton.addEventListener("click", () => {  
  alert("按钮被点击了！");  
});  
document.body.appendChild(newButton);

四、实战案例：构建一个动态计数器

以下是一个完整的案例，演示如何通过 HTML DOM Document 对象 实现一个简单的计数器功能：

1. HTML 结构

<div id="counter-container">  
  <p>当前计数：0</p>  
  <button id="increment-btn">+1</button>  
  <button id="reset-btn">重置</button>  
</div>

2. JavaScript 逻辑

// 初始化计数器变量  
let count = 0;  

// 获取 DOM 元素引用  
const counterDisplay = document.getElementById("counter-container").querySelector("p");  
const incrementBtn = document.getElementById("increment-btn");  
const resetBtn = document.getElementById("reset-btn");  

// 定义事件处理函数  
function incrementCount() {  
  count += 1;  
  counterDisplay.textContent = `当前计数：${count}`;  
}  

function resetCount() {  
  count = 0;  
  counterDisplay.textContent = "当前计数：0";  
}  

// 绑定事件监听器  
incrementBtn.addEventListener("click", incrementCount);  
resetBtn.addEventListener("click", resetCount);

运行效果：

  • 点击“+1”按钮，计数器递增并更新显示。
  • 点击“重置”按钮，计数器归零。

五、进阶技巧：Document 对象的隐藏功能

1. document.write() 的慎用

虽然 document.write() 可以直接向页面输出内容，但它可能导致页面重置，仅建议在开发初期或特定场景使用。

document.write("<p>这是一段通过 document.write 插入的内容</p>"); // 风险较高

2. document.cookie 操作 Cookie

通过 document.cookie 可以读取或设置浏览器的 Cookie，但需注意安全性和隐私规范。

// 设置一个有效期为 1 天的 Cookie  
document.cookie = "username=John Doe; max-age=86400";  

// 读取所有 Cookie  
console.log(document.cookie);

3. document.referrer 获取来源页面

开发者可通过此属性获取用户访问当前页面的来源 URL，用于分析用户路径。

const referrer = document.referrer;  
if (referrer) {  
  console.log(`用户来自：${referrer}`);  
}

结论

掌握 HTML DOM Document 对象 的核心功能，是成为一名高效网页开发者的重要里程碑。无论是动态更新内容、响应用户交互，还是管理页面全局状态，Document 对象都提供了直观且强大的接口。通过本文的案例和代码示例，读者可以逐步实践并深入理解其工作原理。随着经验的积累，开发者将进一步发现 Document 对象在复杂场景中的更多可能性，例如结合 AJAX 实现动态加载、优化页面性能，或是构建响应式用户界面。

记住，DOM 的学习如同探索一座迷宫——Document 是入口，而每个属性和方法都是通往新房间的钥匙。保持好奇心，通过不断实践，你将解锁网页开发的无限可能。

最新发布

查看更多文章