JavaScriptWebAPI核心操作全解析

JavaScript WebAPI 核心操作指南

JavaScript WebAPI 是指浏览器为 JavaScript 提供的一系列接口，允许脚本与浏览器环境、文档内容（DOM）、用户交互、网络请求等进行交互。掌握这些核心操作是进行前端开发的基础。

一、文档对象模型 (DOM) 操作

DOM 将 HTML 文档表示为节点树结构，JavaScript 可以通过 WebAPI 访问和修改这个树。

获取元素
- document.getElementById(id): 根据 ID 获取单个元素。
- document.querySelector(selector): 根据 CSS 选择器获取匹配的第一个元素。
- document.querySelectorAll(selector): 根据 CSS 选择器获取所有匹配的元素集合 (NodeList)。
javascript 复制代码
```
let header = document.getElementById('main-header');
let firstPara = document.querySelector('p');
let allButtons = document.querySelectorAll('.btn');
```
修改元素内容
- element.innerHTML: 获取或设置元素的 HTML 内容（包含标签）。
- element.textContent: 获取或设置元素的纯文本内容（忽略标签）。
javascript 复制代码
```
header.textContent = '新的标题内容';
firstPara.innerHTML = '<strong>加粗的</strong>文本';
```
修改元素样式
- element.style.property = value: 直接修改元素的内联样式。
javascript 复制代码
```
header.style.color = 'blue';
header.style.backgroundColor = '#f0f0f0'; // 注意驼峰命名
```
修改元素属性
- element.getAttribute(attrName): 获取属性值。
- element.setAttribute(attrName, value): 设置属性值。
- element.removeAttribute(attrName): 移除属性。
- element.hasAttribute(attrName): 检查是否存在属性。
- 对于标准属性 (id, class, src, href 等)，通常可以直接使用 element.property 访问和修改。
javascript 复制代码
```
let img = document.querySelector('img');
img.setAttribute('alt', '产品图片');
img.src = 'new-image.jpg'; // 直接修改 src 属性
```
类名操作
- element.classList.add(className): 添加类。
- element.classList.remove(className): 移除类。
- element.classList.toggle(className): 切换类（存在则移除，不存在则添加）。
- element.classList.contains(className): 检查是否包含类。
javascript 复制代码
```
header.classList.add('highlight');
header.classList.toggle('active'); // 常用于切换状态
```
创建、添加和删除元素
- document.createElement(tagName): 创建新元素节点。
- parentElement.appendChild(newElement): 将新元素作为最后一个子节点添加到父元素。
- parentElement.insertBefore(newElement, referenceElement): 在参考元素之前插入新元素。
- element.remove(): 从 DOM 树中移除元素本身。
- parentElement.removeChild(childElement): 父元素移除指定的子元素。
javascript 复制代码
```
let newDiv = document.createElement('div');
newDiv.textContent = '新创建的元素';
document.body.appendChild(newDiv);
// 移除
newDiv.remove(); // 或 document.body.removeChild(newDiv);
```

二、事件处理

JavaScript 可以响应用户操作（点击、输入、鼠标移动等）和浏览器事件（加载完成、窗口改变等）。

添加事件监听器
- element.addEventListener(eventType, callbackFunction): 推荐方式。
- element.onclick = function() {...}: 传统方式（只能绑定一个处理函数）。
javascript 复制代码
```
let button = document.querySelector('#myButton');
button.addEventListener('click', function(event) {
  console.log('按钮被点击了!', event.target); // event.target 是触发事件的元素
});
```
事件对象 (event) 事件处理函数接收一个事件对象参数，包含事件相关信息：
- event.target: 触发事件的原始元素。
- event.currentTarget: 当前处理事件的元素（通常与 this 相同）。
- event.type: 事件类型（如 'click'）。
- event.preventDefault(): 阻止元素的默认行为（如阻止链接跳转、表单提交）。
- event.stopPropagation(): 阻止事件冒泡到父元素。
事件冒泡与捕获 事件在 DOM 树中传播有两种阶段：
- 捕获阶段 (Capturing Phase): 事件从根节点向下传播到目标元素。
- 冒泡阶段 (Bubbling Phase) : 事件从目标元素向上传播回根节点。 addEventListener 的第三个参数 useCapture 可以指定监听哪个阶段：
javascript 复制代码
```
element.addEventListener('click', handler, true); // 捕获阶段
element.addEventListener('click', handler, false); // 或省略：冒泡阶段（默认）
```

三、网络请求 (`fetch`)

现代浏览器提供了 fetch() API 用于发起网络请求（取代了旧的 XMLHttpRequest）。

javascript 复制代码

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应异常');
    }
    return response.json(); // 解析 JSON 数据，返回一个新的 Promise
  })
  .then(data => {
    console.log('获取到的数据:', data);
    // 在此处理数据
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

fetch(url, [options]): 发起请求。options 可以包含 method (GET, POST 等), headers, body 等信息。
它返回一个 Promise，解析为 Response 对象。
response.json(): 将响应体解析为 JSON 对象（返回另一个 Promise）。
response.text(): 将响应体解析为文本字符串。
使用 .then() 和 .catch() 处理异步结果和错误。

四、浏览器对象模型 (BOM) 相关

BOM 允许 JavaScript 与浏览器窗口本身交互。

window 对象 代表浏览器窗口或标签页，是全局对象。
- window.alert(message), window.confirm(message), window.prompt(message, default): 弹出对话框。
- window.open(url, name, features), window.close(): 打开/关闭窗口。
- window.setTimeout(callback, delay): 延时执行函数一次。
- window.setInterval(callback, interval): 每隔一段时间重复执行函数。
- window.clearTimeout(timeoutID), window.clearInterval(intervalID): 取消定时器。
- window.location: 包含当前 URL 信息 (href, hostname, pathname, search 等)，可用于导航 location.href = 'newpage.html'。
- window.history: 操作浏览历史 (history.back(), history.forward(), history.go(n))。
localStorage 和 sessionStorage 用于在浏览器端存储键值对数据。
- localStorage.setItem(key, value): 存储数据（持久化，关闭浏览器依然存在）。
- localStorage.getItem(key): 获取数据。
- localStorage.removeItem(key): 移除数据。
- localStorage.clear(): 清空所有数据。
- sessionStorage 用法相同，但数据仅在当前会话（标签页）关闭时清除。
javascript 复制代码
```
localStorage.setItem('username', '张三');
let name = localStorage.getItem('username');
```

总结

这些核心的 WebAPI 构成了 JavaScript 在浏览器端与页面交互、处理用户事件、进行网络通信和存储数据的基础。熟练掌握它们是进行前端开发的必备技能。实践是掌握它们的关键，尝试在项目中应用这些知识。

JavaScriptWebAPI核心操作全解析

一、文档对象模型 (DOM) 操作

二、事件处理

三、网络请求 (fetch)

四、浏览器对象模型 (BOM) 相关

总结

三、网络请求 (`fetch`)