DOM 与浏览器

本文介绍浏览器端开发中常见的 DOM API、事件模型与网络请求方式。

DOM 树

DOM(Document Object Model)将 HTML 文档抽象为树形结构,每个标签、属性、文本都是一个节点。JavaScript 通过 document 对象访问和修改树结构,变更会触发页面重排或重绘。

元素查询

document.querySelector 与 document.querySelectorAll 支持 CSS 选择器,返回首个或全部匹配元素。getElementById、getElementsByClassName 返回动态集合,选择器更灵活但性能略低。

const btn = document.querySelector('#submit');
const items = document.querySelectorAll('.item');

事件机制:冒泡与捕获

事件从 window 沿 DOM 树向目标传播(捕获阶段),到达目标后向上反向传播(冒泡阶段)。addEventListener 的第三个参数 useCapture 指定监听阶段,默认 false 监听冒泡。

事件委托

利用事件冒泡,在父元素统一处理子元素事件。优点是减少监听器数量、动态新增子元素无需重新绑定。判断来源使用 event.target 或 event.currentTarget。

本地存储

localStorage 持久化存储,容量约 5MB,同源共享;sessionStorage 仅在当前标签页有效,关闭后清除。两者都只能存储字符串,对象需用 JSON.stringify 序列化。

fetch API

fetch 是基于 Promise 的网络请求 API,默认 GET 方法,可通过 method、headers、body 配置。响应对象需调用 .json()、.text() 等方法获取数据。

const res = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'test' })
});
const data = await res.json();