波仔
⌨️ 第六章 Web技术与安全
📄 本篇一句话

DOM 把 HTML 解析成一棵可编程的树（JS 的手能摸到的界面），Ajax 让页面不换页也能偷偷跟服务器要数据——两者合体，网页从「文档」进化成「应用」。

📝 在本章的位置

上游：6-1 的 HTML 骨架、6-5 的动态网站；网络课 4.10 讲过「Web 应用」概念。下游：6-8 的 jQuery 是 DOM 操作的语法糖、虚拟 DOM 是它的性能补丁。

一、DOM：界面成了一棵树

DOM（Document Object Model，文档对象模型）＝浏览器把 HTML 解析成的对象树：

document
└── html
    ├── head
    │   └── title
    └── body
        ├── h1 "成绩单"
        └── table
            └── tr
                ├── td "波仔"
                └── td "88"

每个标签、属性、文字都是节点对象，JS 可以查、改、增、删：

// 浏览器 F12 控制台即可运行
document.title = "新标题";                       // 改：标签页名字立刻变
const p = document.createElement("p");           // 建：新节点
p.textContent = "JS 动态添加的一行";
document.body.appendChild(p);                    // 挂：上树，页面立刻多一段
document.querySelector("h1").style.color = "red"; // 查＋改样式

二、Ajax：不换页的悄悄话

2005 年前的 Web：每次点链接/交表单都整页刷新，白屏一闪。Ajax（Asynchronous JavaScript and XML）让 JS 在后台发 HTTP 请求、拿到数据后用 DOM 局部更新——页面不闪、不用重载：

旧：点击 → 整页请求 → 白屏 → 新整页
新：点击 → JS 后台要数据 → 回来后 DOM 只改那一块

现代写法是 fetch（Ajax 思想的今日语法）：

// 点按钮 → 后台要数据 → 局部刷新（在 F12 控制台或本地页面跑）
async function loadScore() {
  const resp = await fetch("score.json");   // 后台 GET，不换页
  const data = await resp.json();           // 解析 JSON（6-9）
  document.querySelector("#score").textContent =
    `波仔：${data.score} 分`;               // 只改这一个节点的文字
}
document.querySelector("button").addEventListener("click", loadScore);

Ajax 的时代意义：Gmail、Google 地图（2004~2005）靠它做出了「像软件一样」的网页——SPA（单页应用）、前后端分离（界面 JS 写、数据走接口）都由此生。

三、两者如何配合

Ajax 是运输队（拿数据），DOM 是施工队（改界面）：数据到手 → querySelector 定位节点 → 改内容/样式。6-6 的 MVVM 框架把这两步自动化，但底层仍是它们。

动手 Demo：整页刷新 vs Ajax 局部刷新，亲手对比

<!-- demo_ajax.html：两个按钮，体验两种刷新 -->
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Ajax 对比</title></head>
<body>
  <div id="box">初始内容</div>
  <button onclick="location.reload()">① 整页刷新</button>
  <button onclick="localUpdate()">② 局部更新（Ajax 式）</button>
  <script>
    function localUpdate() {
      // 没有服务器就用本地数据模拟「请求返回」
      const data = { time: new Date().toLocaleTimeString() };
      document.getElementById("box").textContent =
        "局部更新于 " + data.time;   // 只有 #box 变，页面不闪
    }
  </script>
</body></html>

看到什么算成功：点①整页白屏一闪（F12 网络面板多一条文档请求）；点②只有那行字变、页面纹丝不动（网络面板零请求——本地模拟了返回数据）。

读结果：把「本地模拟返回」换成 fetch("...") 就是真 Ajax；把「只改 #box」换成换页，就是老 Web。应用感的差距全在这两处。

30 秒实验

F12 → 控制台跑 document.querySelectorAll("*").length——数一数当前页面有多少 DOM 节点（几百到几千都正常）。再跑 document.body.appendChild(document.createElement("div"))——看不到变化？节点上树了但是空的；给它 textContent 才看得见。树上的每个节点都是活的、可编程的。

常见误区

自测三问（点击展开） 1. **DOM 是什么、什么结构？** 答：文档对象模型——浏览器把 HTML 解析成的对象树，JS 通过它读写界面。 2. **Ajax 解决什么问题？** 答：不用整页刷新，后台要数据＋DOM 局部更新。 3. **为什么说 DOM 操作昂贵？** 答：改动会触发重排/重绘，浏览器要重算布局；大量操作应批量化或交给虚拟 DOM。

相关笔记