JavaScript WebAPI 指南

2501_92963994

1300人浏览 · 2025-09-11 19:34:36

2501_92963994 · 2025-09-11 19:34:36 发布

JavaScript WebAPI 指南

一、WebAPI 背景知识

1.1 什么是 WebAPI

WebAPI 是 JavaScript 的重要组成部分，它包含了 DOM（文档对象模型）和 BOM（浏览器对象模型）。DOM 主要用于操作页面结构，BOM 用于操作浏览器窗口。WebAPI 是 W3C 组织规定的标准，是构建动态网页的基础。

参考文档: link

1.2 什么是 API

API（Application Programming Interface）是现成的函数和对象集合，供开发者使用。WebAPI 特指 DOM 和 BOM。API 可以看作是一个工具箱，帮助开发者快速实现功能。

1.3 API 参考文档

MDN（Mozilla Developer Network）提供了丰富的 WebAPI 文档，可以通过以下链接访问：
[MDN WebAPI 文档](Web API | MDN)

二、DOM 基本概念

2.1 什么是 DOM

DOM（Document Object Model）是 W3C 标准的一部分，提供了一系列函数，用于操作网页内容、结构和样式。DOM 将网页视为一个树形结构，称为 DOM 树。

2.2 DOM 树

一个页面的结构是一个树形结构，形如：

<html>
  <head>
    <title>文档标题</title>
  </head>
  <body>
    <a href="">我的链接</a>
    <h1>我的标题</h1>
  </body>
</html>

DOM 树结构形如：

文档
├── 根元素：<html>
│   ├── 元素：<head>
│   │   └── 元素：<title>
│   │       └── 文本：文档标题
│   └── 元素：<body>
│       ├── 元素：<a>
│       │   └── 属性：href
│       │       └── 文本：我的链接
│       └── 元素：<h1>
│           └── 文本：我的标题

2.3 重要概念

• 文档：一个页面是一个文档，使用document表示。

• 节点：网页中所有的内容都可以称为节点（标签节点、注释节点、文本节点、属性节点等），使用node表示。

三、获取元素

3.1`querySelector`

querySelector是 HTML5 新增的方法，可以使用 CSS 选择器获取页面中的元素。返回文档中与指定选择器匹配的第一个元素。

var elem1 = document.querySelector('.box');
var elem2 = document.querySelector('#id');
var elem3 = document.querySelector('h3 span input');

3.2`querySelectorAll`

querySelectorAll返回文档中与指定选择器匹配的所有元素的列表。

var elems = document.querySelectorAll('div');

四、事件初识

4.1 基本概念

事件是用户对页面的操作（如点击、选择、修改等），这些操作会在浏览器中产生事件，被 JavaScript 获取并处理。

4.2 事件三要素

• 事件源：哪个元素触发的事件。

• 事件类型：如点击、选中、修改等。

• 事件处理程序：处理事件的函数。

4.3 简单示例

<button id="btn">点我一下</button>
<script>
  var btn = document.getElementById('btn');
  btn.onclick = function() {
    alert("hello world");
  };
</script>

五、操作元素

5.1 获取/修改元素内容

5.1.1`innerText`

innerText表示一个节点及其后代的“渲染”文本内容。不识别 HTML 标签，是非标准的。

var div = document.querySelector('div');
console.log(div.innerText); // 读取内容
div.innerText = 'hello js <span>hello js</span>'; // 修改内容

5.1.2`innerHTML`

innerHTML表示一个节点及其后代的 HTML 内容。识别 HTML 标签，是 W3C 标准的。

var div = document.querySelector('div');
console.log(div.innerHTML); // 读取内容
div.innerHTML = '<span>hello js</span>'; // 修改内容

5.2 获取/修改元素属性

5.2.1 获取属性

可以通过Element对象的属性直接获取。

var img = document.querySelector('img');
console.log(img.src); // 获取 src 属性
console.log(img.title); // 获取 title 属性
console.log(img.alt); // 获取 alt 属性

5.2.2 修改属性

可以直接修改Element对象的属性。

var img = document.querySelector('img');
img.onclick = function() {
  if (img.src.lastIndexOf('rose.jpg') !== -1) {
    img.src = './rose2.png';
  } else {
    img.src = './rose.jpg';
  }
};

5.3 获取/修改表单元素属性

5.3.1 表单元素属性

表单元素（主要是input标签）的以下属性可以通过 DOM 修改：

• value：输入框的值。

• disabled：禁用状态。

• checked：复选框的选中状态。

• selected：下拉框的选中状态。

• type：输入框的类型（文本、密码、按钮、文件等）。

5.3.2 代码示例：切换按钮文本

<input type="button" value="播放">
<script>
  var btn = document.querySelector('input');
  btn.onclick = function() {
    if (btn.value === '播放') {
      btn.value = '暂停';
    } else {
      btn.value = '播放';
    }
  };
</script>

5.3.3 代码示例：点击计数

<input type="text" id="text" value="0">
<input type="button" id="btn" value='点我+1'>
<script>
  var text = document.querySelector('#text');
  var btn = document.querySelector('#btn');
  btn.onclick = function() {
    var num = +text.value;
    num++;
    text.value = num;
  };
</script>

5.4 获取/修改样式属性

5.4.1 行内样式操作

通过style属性操作行内样式。

var div = document.querySelector('div');
div.onclick = function() {
  var curFontSize = parseInt(this.style.fontSize);
  curFontSize += 10;
  this.style.fontSize = curFontSize + 'px';
};

5.4.2 类名样式操作

通过className属性操作类名样式。

var div = document.querySelector('div');
div.onclick = function() {
  if (div.className.indexOf('light') !== -1) {
    div.className = 'container dark';
  } else {
    div.className = 'container light';
  }
};

六、操作节点

###6.1 新增节点

6.1.1 创建元素节点

使用document.createElement创建元素节点。

var div = document.createElement('div');
div.id = 'mydiv';
div.className = 'box';
div.innerHTML = 'hehe';
console.log(div);

6.1.2 插入节点到 DOM 树中

使用appendChild将节点插入到指定节点的最后一个孩子之后。

var container = document.querySelector('.container');
container.appendChild(div);

6.1.3 使用`insertBefore`

使用insertBefore将节点插入到指定节点之前。

var newDiv = document.createElement('div');
newDiv.innerHTML = '我是新的节点';
var container = document.querySelector('.container');
container.insertBefore(newDiv, container.children[0]);

6.2 删除节点

使用removeChild删除子节点。

var container = document.querySelector('.container');
var child = container.children[0];
container.removeChild(child);

七、代码案例

7.1 猜数字游戏

<button type="button" id="reset">重新开始一局游戏</button><br>
<input type="text" id="guess">
<button type="button" id="button">猜</button>
<br>
已经猜的次数：<span id="count">0</span>
<br>
结果：<span id="result"></span>
<script>
  var inputE = document.querySelector('#guess');
  var countE = document.querySelector('#count');
  var resultE = document.querySelector('#result');
  var btn = document.querySelector('#button');
  var resetBtn = document.querySelector('#reset');
  var guessNumber = Math.floor(Math.random() * 100) + 1;
  var count = 0;

  btn.onclick = function() {
    var userGuess = parseInt(inputE.value, 10);
    if (isNaN(userGuess)) {
      resultE.innerText = '请输入一个有效的数字！';
      return;
    }
    count++;
    countE.innerText = count;

    if (userGuess === guessNumber) {
      resultE.innerText = '恭喜你猜对了！';
    } else if (userGuess < guessNumber) {
      resultE.innerText = '太小了，再试一次！';
    } else {
      resultE.innerText = '太大了，再试一次！';
    }
  };

  resetBtn.onclick = function() {
    guessNumber = Math.floor(Math.random() * 100) + 1;
    count = 0;
    countE.innerText = count;
    resultE.innerText = '';
    inputE.value = '';
  };
</script>