上一篇
html的api
HTML的API主要包括DOM操作接口、事件处理机制和AJAX通信方法，支持动态操作元素属性、监听用户行为、异步数据请求，通过DocumentObjectModel实现文档结构操控，结合事件冒泡/捕获机制增强交互性，是前端开发实现页面动态渲染和实时响应的核心基础
HTML DOM基础操作
HTML的文档对象模型（DOM）允许通过JavaScript动态操作页面元素，以下是常用的DOM操作方法：
| 操作类型 | 方法/属性 | 说明 |
|---|---|---|
| 属性操作 | element.innerHTML | 获取或设置元素的HTML内容（含子节点） |
element.outerHTML | 获取或替换元素本身及其内容的HTML片段 | |
element.className | 操作元素的class属性（可用classList替代） | |
| 节点操作 | parent.appendChild(child) | 将子节点添加到父节点末尾 |
element.removeChild(child) | 移除指定子节点 | |
element.childNodes | 获取元素的所有子节点（含文本、注释节点） |
事件处理API
HTML元素支持事件监听与触发,核心方法包括：
事件类型
| 事件阶段 | 常见事件 | 触发时机 |
|---|---|---|
| 捕获阶段 | click、mouseover、keydown | 事件从根节点向目标元素传播 |
| 目标阶段 | 无 | 事件到达目标元素时触发 |
| 冒泡阶段 | submit、change、DOMContentLoaded | 事件从目标元素向根节点传播 |
事件对象属性
| 属性名 | 说明 |
|---|---|
event.target | 触发事件的元素 |
event.preventDefault() | 阻止默认行为（如表单提交） |
event.stopPropagation() | 阻止事件冒泡 |
表单元素API
HTML表单元素（如<input>、<form>）提供以下交互方法：
| 方法/属性 | 说明 |
|---|---|
form.checkValidity() | 检查表单所有字段是否通过验证 |
input.value | 获取或设置输入框的值 |
input.select() | 选中输入框内容 |
form.reset() | 重置表单到初始状态 |
其他常用API
存储API
| API | 特点 |
|---|---|
localStorage | 持久化存储（关闭浏览器后数据不丢失） |
sessionStorage | 会话级存储（页面关闭后数据清除） |
历史记录API
| 方法 | 说明 |
|---|---|
history.pushState() | 添加新的历史记录（无页面跳转） |
window.onpopstate | 监听回退/前进按钮的事件 |
网络请求API
- Fetch API：基于Promise的异步请求，语法简洁。
- XMLHttpRequest：传统AJAX实现，需手动处理回调。
相关问题与解答
问题1：事件委托的优势是什么？
解答：事件委托将事件监听器绑定到父元素而非每个子元素，优势包括：
- 减少内存占用（只需一个监听器）；
- 自动处理动态添加的子元素；
- 提升性能（尤其在大量子节点时）。
问题2：Fetch API与XMLHttpRequest的主要区别是什么？
解答：
| 对比项 | Fetch API | XMLHttpRequest |
|—————————|——————————————|—————————————|
| 语法风格 | Promise链式调用 | 回调函数或事件监听 |
| 浏览器支持 | IE11+（需Polyfill） | 全浏览器支持 |
| 数据解析 | 内置.json()、.text()等方法 | 需手动解析responseText或`
