WebAPI基础（一）知识点
WebAPI
Web 网页
API 应用程序编程<接口>
WebAPI 就是 浏览器提供给我们操作网页的一系列接口，我们主要学习这些接口怎么使用。
WebAPI 常见三个术语：
文档 document 网页文档，代表的是整个网页
节点 node 节点就是组成网页的每个部分，包括 标签节点，属性节点，文本节点，注释节点...
元素 element 元素就是<标签节点>
查找元素(标签)
document.getElementById()
在网页文档中，通过 id获取元素
document.getElementsByTagName
在网页文档中，通过 标签名 获取 元素s
事件
事件主要用来捕获用户操作.
事件三要素
事件源
事件类型
事件处理函数
操作元素样式
修改行内式
修改类名
网页文档
核心单词：document
控制台输出
控制台输出 document ，document 就是整个网页文档 .
console.log(document);
数据类型
document 的数据类型是 object ，在 JavaScript 中以对象的形式存储
文档以对象形式输出
document 是对象，console.dir 在控制台以对象形式输出文档，可看到文档对象的 <属性>和<方法>
console.dir(document);
查找(获取)元素
通过id名称获取元素
document.getElementById('id名称');
查找成功：
返回元素
查找失败：
返回 null
所有<元素>在 JavaScript 中都是<对象>的形式：
/* 通过 box01 的 id 名称在网页中查找到一个元素，保存到 box01 的变量名中 */
var box01 = document.getElementById('box01');
/* 利用 typeof 关键词检测<元素>的<数据类型> */
console.log(typeof box01); // <object> 所有标签在JS环境中都是对象
/* 控制台输出形式1 */
console.log('console.log 控制台以《标签》形式输出，点击不可展开↓↓↓↓');
console.log(box01);
/* 控制台输出形式2 */
console.log('console.dir 控制台以《对象》形式输出，点击可展开↓↓↓↓');
console.dir(box01);
通过标签名称获取元素
document.getElementsByTagName('标签名');
查找成功：
返回伪数组集合，里面包含 元素节点，可循环遍历
查找失败：
返回空的伪数组
修改样式
修改样式分为两种形式：修改行内式 和 修改类名
修改行内样式
style
修改类名
className
修改样式综合例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改类名</title>
<style>
/* 把样式全部写到类名 .myStyle 里 */
.myStyle {
width: 200px;
height: 200px;
background-color: pink;
font-size: 100px;
}
</style>
</head>
<body>
<!-- 0.0 给标签 起 id 名称 -->
<input id="btn01" type="button" value="1.点击按钮设置宽高背景色">
<input id="btn02" type="button" value="2.还原回去本来的样子">
<input id="btn03" type="button" value="3.通过一个按钮一个事件实现切换样式">
<div id="box">盒子</div>
</body>
</html>
<script>
/* 当 < 按钮 > 被 < 点击 > 时，效果是 < 改变 盒子 宽高背景色 > */
/* 1. 查找元素 - 事件源 */
var btn01 = document.getElementById('btn01');
/* 如果忘记查找，在不同浏览器会有兼容问题 */
var btn02 = document.getElementById('btn02');
var box = document.getElementById('box');
/* 2. 绑定事件基本结构 */
btn01.onclick = function () {
/* 3.0 效果写事件处理函数内部 */
/* 3.1 通过行内式的方式修改样式，需要一行行书写 */
// box.style.width = '200px';
// box.style.height = '200px';
// box.style.backgroundColor = 'pink';
// box.style.fontSize = '40px';
/* 3.2.1 在头部 <style> 标签内定义了 myStyle 的类名和样式 */
/* 3.2.2 通过修改类名方式，改一个类名修改多个样式 */
box.className = 'myStyle';
};
/* 点击按钮2，还原原本的样子 */
btn02.onclick = function () {
/* 清空类名，盒子还原回没类名前的样子 */
box.className = '';
};
</script>
排他思想
排他思想线上效果
轮播图小圆点排他效果
tab 栏 排他效果
侧边栏排他效果
排他效果实现
排他思想分两部分
1. 排除所有 - 循环遍历 2. 确立当前 - this 确立当前
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>排他效果</title>
</head>
<body>
<input type="button" value="美女1">
<input type="button" value="美女2">
<input type="button" value="美女3">
<input type="button" value="美女4">
<input type="button" value="美女5">
</body>
</html>
<script>
/* 查找所有按钮元素 */
var ipts = document.getElementsByTagName('input');
/* 利用 for 循环给所有按钮绑定事件 */
for (var i = 0; i < ipts.length; i++) {
/* 给所有按钮绑定事件 */
ipts[i].onclick = function () {
/* 1. 排除所有 - 循环遍历 */
for (var i = 0; i < ipts.length; i++) {
/* 1.1 把所有按钮设置为没有颜色 */
ipts[i].style.backgroundColor = '';
}
/* 2. 确立当前 - this 这个 */
/* 2.1 用 this 关键词，把当前点击的按钮设置为 粉色 */
this.style.backgroundColor = 'pink';
}
}
</script>
操作元素属性
元素属性分为 标准属性 和 自定义属性。
元素标准属性操作
获取：
元素.属性名
设置：重新赋值就是设置(修改)
元素.属性名 = xxx;
特例：类名属性要写成 className
自定义属性操作
获取：
getAttribute('属性名')
设置：
setAttribute('属性名','修改值')
移除：
removeAttribute('属性名')
getAttribute / setAttribute / removeAttribute 功能更强大：
可操作<自定义属性>，也可操作<标准属性>，还可<移除属性>。
练习
实现效果1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿苏宁注册显示密码效果</title>
</head>
<body>
<input id="pwd" type="password">
<input id="btn" type="button" value="显示密码">
</body>
</html>
<script>
/* 当 < 按钮 > 被 < 点击 > 时，效果是 < 显示密码 > */
/* 查找元素 */
var pwd = document.getElementById('pwd');
var btn = document.getElementById('btn');
/* 绑定事件 */
btn.onclick = function () {
/* 获取密码框元素的 type 类型是否为 password */
if (pwd.getAttribute('type') === 'password') {
/* 如果是，进入分支1，type 设置为 text，显示密码 */
pwd.setAttribute('type', 'text');
/* 把按钮的提示文字设置成 隐藏密码 */
btn.setAttribute('value', '隐藏密码');
} else {
/* 其他情况，进入分支2，type 设置为 password，隐藏密码 */
pwd.setAttribute('type', 'password');
/* 把按钮的提示文字设置成 显示密码 */
btn.setAttribute('value', '显示密码');
}
}
</script>
实现效果2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿苏宁注册显示密码效果</title>
</head>
<body>
<input id="pwd" type="password">
<input id="btn" type="button" value="显示密码">
</body>
</html>
<script>
/* 当 < 按钮 > 被 < 点击 > 时，效果是 < 显示密码 > */
/* 查找元素 */
var pwd = document.getElementById('pwd');
var btn = document.getElementById('btn');
/* 绑定事件 */
btn.onclick = function () {
/* 由于 type 是 输入框的标准属性，所以可以用更简便的方式实现 */
if (pwd.type === 'password') {
pwd.type = 'text';
btn.value = '隐藏密码'
} else {
pwd.type = 'password';
btn.value = '显示密码'
}
}
</script>
其他整理
WebStorm 定义代码模板
WebAPI阶段 常见错误
程序出现了 bug ，先问控制台，控制台如果有报错，先看报错是什么意思。
调 bug 是一种能力，调 bug 能力强大，导致很多人害怕 bug 。
工作的时候也容易出现各种 bug，应该喜欢调 bug ，自己能力进步，写的程序才能更强大。
bug 是个宝，自己有 bug 自己调，自己没 bug 找同桌调。
Cannot set property '***' of null // 一般是查找元素的时候查找失败
*** is not a function // 函数名称书写错误，请检查函数名的单词
