1.Web API是什么？
Web API 是浏览器内置提供给 JavaScript 使用的一系列功能接口。 JS 语言本身只负责基础运算、判断、循环；想要操作页面、网络、定时器、存储、音视频，就要调用Web API。
2.分类
分为DOM（文档对象模型）和BOM（浏览器对象模型）。
3.DOM
DOM（Document Object Model，文档对象模型）是浏览器将 HTML 或 XML 文档解析成的一个树状结构，它允许 JavaScript 动态访问和操作文档的内容、结构和样式。
3.1 DOM 树的结构
DOM 将文档表示为一个由节点（Node）组成的树形结构：
- 文档节点（Document）：整个文档的根节点。
- 元素节点（Element）：HTML 标签，如
<div>、<p>。 - 文本节点（Text）：元素内的文本内容。
- 属性节点（Attribute）：元素的属性，如
id、class。
例如，对于以下 HTML：
<!DOCTYPE html> <html> <head> <title>示例</title> </head> <body> <h1>标题</h1> <p>段落</p> </body> </html>其 DOM 树结构大致如下：
Document └── html ├── head │ └── title │ └── "示例" └── body ├── h1 │ └── "标题" └── p └── "段落"3.2 常用 DOM 操作 API
JavaScript 通过 DOM API 与页面交互，以下是一些核心方法：
查询元素
document.getElementById('id')：通过 id 获取单个元素。document.querySelector('.class')：通过 CSS 选择器获取第一个匹配元素。document.querySelectorAll('div')：获取所有匹配元素的列表（NodeList）。
修改内容与属性
element.textContent/element.innerHTML：获取或设置元素的文本/HTML 内容。element.setAttribute('name', 'value')：设置元素属性。element.style.样式属性 = 'value'：修改元素样式。
创建与插入节点
document.createElement('div')：创建新元素节点。parent.appendChild(child)：将子节点插入父节点末尾。parent.insertBefore(newNode, referenceNode)：在参考节点前插入新节点。
事件处理
element.addEventListener('click', handler)：为元素添加事件监听器。element.removeEventListener('click', handler)：移除事件监听器。
3.3 简单示例
以下代码演示了如何查询元素并修改其内容：
// 获取 id 为 "title" 的元素 const titleElement = document.getElementById('title'); // 修改其文本内容 titleElement.textContent = '新的标题'; // 修改其样式 titleElement.style.color = 'blue'; // 添加点击事件 titleElement.addEventListener('click', function() { alert('标题被点击了！'); });3.4 总结
DOM 是 Web 开发的核心，它建立了文档与 JavaScript 之间的桥梁。理解 DOM 树的结构并掌握常用的 DOM 操作 API，是进行动态网页交互和构建现代 Web 应用的基础。
