当前位置：首页 > news >正文

【无标题】Web API中的DOM

news 2026/8/16 16:55:55

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('标题被点击了！'); });