JavaScript WebAPI 指南
JavaScript WebAPI 指南
- 一、WebAPI 背景知识
- 1.1 什么是 WebAPI
- 1.2 什么是 API
- 1.3 API 参考文档
- 二、DOM 基本概念
- 2.1 什么是 DOM
- 2.2 DOM 树
- 2.3 重要概念
- 三、获取元素
- 3.1`querySelector`
- 3.2`querySelectorAll`
- 四、事件初识
- 4.1 基本概念
- 4.2 事件三要素
- 4.3 简单示例
- 五、操作元素
- 5.1 获取/修改元素内容
- 5.1.1`innerText`
- 5.1.2`innerHTML`
- 5.2 获取/修改元素属性
- 5.2.1 获取属性
- 5.2.2 修改属性
- 5.3 获取/修改表单元素属性
- 5.3.1 表单元素属性
- 5.3.3 代码示例：点击计数
- 5.4 获取/修改样式属性
- 5.4.1 行内样式操作
- 5.4.2 类名样式操作
- 六、操作节点
- 6.1.1 创建元素节点
- 6.1.2 插入节点到 DOM 树中
- 6.1.3 使用`insertBefore`
- 6.2 删除节点
- 七、代码案例
- 7.1 猜数字游戏
一、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.1querySelector
querySelector是 HTML5 新增的方法，可以使用 CSS 选择器获取页面中的元素。返回文档中与指定选择器匹配的第一个元素。
var elem1 = document.querySelector('.box');
var elem2 = document.querySelector('#id');
var elem3 = document.querySelector('h3 span input');
3.2querySelectorAll
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.1innerText
innerText表示一个节点及其后代的“渲染”文本内容。不识别 HTML 标签，是非标准的。
var div = document.querySelector('div');
console.log(div.innerText); // 读取内容
div.innerText = 'hello js <span>hello js</span>'; // 修改内容
5.1.2innerHTML
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>