JS - WebAPI 基础
引言
JS 分成三大部分：
① ECMAScript：语法基础
② DOM API：操作页面结构
③ BOM API：操作浏览器
WebAPI
API：Application Programming Interface ( 应用程序接口 )
所谓的 API 本质上就是一些现成的 函数 / 对象，让开发者直接拿来用，方便开发。
其相当于一个工具箱，只不过开发者用的工具箱数目繁多，功能复杂。
JS-WebAPI 包含了 DOM + BOM.
DOM
DOM：Document Object Model ( 文档对象模型 )
DOM 树形结构，可以看见，DOM 树实际上就是一个 html 文件中的详细信息，本质上 一个 DOM 树就是由一个 html 文件中的所有元素 (标签) 所构成的。
一些基础概念
① 文档：一个页面就是 一个文档，使用 document 表示。
② 元素：页面中一个标签就可以称为 一个元素，使用 element 表示。
③ 节点：网页中所有的内容都可以称为 节点 ( 标签节点、注释节点、文本节点、属性节点等 ). 使用 node 表示。
由于在 JS 中，上面三个概念都是对应一个一个对象，所以 DOM 就称为 文档对象模型。
一、获取元素
1. querySelector 函数
querySelector 函数可以通过 CSS 语法中的选择器，来获取到对应元素 (标签)。要想对元素进行后续操作，获取标签是一个大前提。
而这里接收 querySelector 函数返回的，其实是一个 JS 对象，后续可以使用该对象的 API 方法，对该元素 (标签) 的属性、内容、样式…进行直接修改。
这里的思想就和 MySQL数据库 的思想一样，只有当你选中了某一个数据库，才能对其内部的表进行增删查改。而利用 use 就是大前提。
同样地，这里 querySelector 函数就是大前提。
展示
创建一个 elem 对象来接收 querySelector 函数 所选取的元素 (标签)。
<body>
<div class="parent">
<div class="child1">123</div>
<div class="child2">456</div>
<div class="child3">789</div>
</div>
<script>
//querySelector() 括号中填写 css 语法中的选择器
let elem = document.querySelector('div');
console.log(elem);
console.log("-----------------");
let elem2 = document.querySelector('.child2');
console.log(elem2);
console.log("-----------------");
let elem3 = document.querySelector('.child5');
console.log(elem3);
console.log("-----------------");
</script>
</body>
展示结果：
2. querySelectorAll 函数
querySelectorAll 函数可以用来选取全部具有某一类的元素 (标签)，和 querySelector 函数的用法相似。
<body>
<div class="parent">
<div class="child1">123</div>
<div class="child2">456</div>
<div class="child3">789</div>
</div>
<script>
let elem4 = document.querySelectorAll('div');
console.log(elem4);
console.log("-----------------");
let elem5 = document.querySelectorAll('.parent');
console.log(elem5);
</script>
</body>
注意：
querySelectorAll 函数严格地来说，返回的并不是一个数组，而是一个 NodeList，但 NodeList 的主要方法使用起来和数组无太大区别，此外，它本身也是一个对象，所以我们可以称它 “伪数组”。
展示结果：
二、理解事件的概念
JS 要构建动态页面，就需要感知到用户的行为。
用户对于页面的一些操作 ( 点击、选择、修改等操作 ) 都会在浏览器中产生一个个事件，被 JS 获取到，从而进行更复杂的交互操作。
也就是说，事件也是用户和程序之间沟通的桥梁，用户进行了某些操作也会产生一些 “事件” 从而让程序进行一些反应。比方说：鼠标点击、鼠标拖动、按下键盘、滑动屏幕…这些都可以被称为一个事件。
1. 事件的三要素
① 事件源：哪个元素触发的。
② 事件类型：是点击、选中、还是修改。
③ 事件处理程序：进一步如何处理，往往是一个回调函数。
2. 示例
<body>
<input type="button" value="点击按钮">
<script>
let button = document.querySelector('input');
//回调函数
button.onclick = function () {
alert("hello");
}
</script>
</body>
展示结果：
button 是事件源 ( 用户操作了这个元素 )
click 就是事件的类型 ( 点击事件 )
通过 onclick 属性就能关联到一个具体的事件处理函数，当 button 触发了click事件，就会自动调用 onclick 对应的函数。此外，function 是一个回调函数，我们自己并没有调用这个函数，而是写好了，然后浏览器自动调用。
三、获取 / 修改元素内容
前面的 querySelector 函数可以对获取到某个元素 (标签)，接下来，看看对当前元素内部是怎么进行操作的吧。
1. innerHTML
展示 (1) 获取元素内容
通过 innerHTML ，可以获取到元素内部的内容 ( content )。
在下面程序中，可以获取到元素内部的所有文本内容。
<body>
<div class="parent">hello</div>
<script>
let parent = document.querySelector('.parent');
console.log(parent.innerHTML);
</script>
</body>
展示结果：
展示 (2) 修改元素内容
通过 innerHTML ，还可以对元素内部的内容进行修改。
<body>
<div class="parent"> hello </div>
<button>点击按钮, 更改文本</button>
<script>
let button = document.querySelector('button');
button.onclick = function() {
//获取 parent 元素
let parent = document.querySelector('.parent');
//修改 parent 元素
parent.innerHTML = 'world';
}
</script>
</body>
展示结果：
案例
创建一个 +1 按钮，一个 -1 按钮，一个显示框显示整数，通过两个按钮对整数进行增减。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo5</title>
<style>
.parent {
width: 380px;
height: 200px;
background-color: gray;
/* 整个标签居中 */
margin-left: auto;
margin-right: auto;
/* 整个标签进行圆角设置 */
border-radius: 20px;
}
.child {
font-size: 70px;
color: aquamarine;
/* 文本居中 */
text-align: center;
}
.button {
width: 200px;
height: 100px;
background-color:gray;
margin-left: auto;
margin-right: auto;
/* 弹性布局 */
display: flex;
justify-content: space-between;
/* 标签垂直居中 */
align-items: center;
}
.button1, .button2 {
width: 80px;
height: 40px;
font-size: 25px;
background-color:white;
/* 标签进行圆角设置 */
border-radius: 10px;
/* border: none; */
}
.button1:hover, .button2:hover {
background-color:coral;
}
</style>
</head>
<body>
<!-- -------------------------------------------- -->
<div class="parent">
<div class="child"> 100 </div>
<div class="button">
<button class="button1"> + </button>
<button class="button2"> - </button>
</div>
</div>
<script>
let button1 = document.querySelector('.button1');
button1.onclick = function() {
//1. 获取元素
let b1 = document.querySelector('.child');
//2. 取出的元素的内容为字符串类型
let content = b1.innerHTML;
//3. 将字符串类型转换成数字类型，再加 1
let result = parseInt(content) + 1;
//4. 把结果再写回去
b1.innerHTML = result;
}
let button2 = document.querySelector('.button2');
button2.onclick = function() {
let b2 = document.querySelector('.child');
let content = b2.innerHTML;
let result = parseInt(content) - 1;
b2.innerHTML = result;
}
</script>
</body>
</html>
展示结果：
四、获取 / 修改元素属性
1. 获取元素属性
<body>
<img src="male.png" alt="男孩" title="这是男孩">
<script>
let img = document.querySelector('img');
console.log(img);
//dir 可以将当前元素的详细情况打印出来
console.log(img.src);
console.log(img.alt);
console.log(img.title);
console.dir(img);
</script>
</body>
我们以一个内容为图片的标签为例，观察 log 方法和 dir 方法的区别。dir 可以显示非常详细的信息，在下面的截图中，我并没有截完 img 元素中所有的属性。而 log 方法可以一个个的获取 img 的属性。
展示结果：
2. 修改元素属性
<body>
<img src="male.png" alt="男孩" title="这是男孩">
<script>
let img = document.querySelector('img');
img.onclick = function() {
if(img.title == '这是男孩') {
img.src = 'female.png';
img.alt = '这是女孩';
img.title = '这是女孩';
} else {
img.src = 'male.png';
img.alt = '这是男孩';
img.title = '这是男孩';
}
}
</script>
</body>
我们通过上面的程序，将 img 标签的属性进行修改，从而用鼠标点击，达到图片互换的效果。
此外，应注意：
在 JS 中，判断两个字符串的内容是否相等，直接通过 “==” 即可判断，而在 Java 中，是通过 equals 方法来进行判断的。然而，大部分的语言都是通过两个等号进行判断的，C / Java 是例外。
展示结果：
五、获取 / 修改表单元素属性
表单元素对应的属性，主要是指 input 标签的一些属性。常用的属性可以通过 DOM 来修改，如下：
value: input 的值
disabled: 禁用
checked: 选中复选框
selected: 选中下拉框
type: input 的类型(文本, 密码, 按钮, 文件等)
展示1 播放与暂停按钮之间的切换
<body>
<input type="button" value="播放">
<script>
let button = document.querySelector('input');
button.onclick = function() {
if(button.value == '播放') {
button.value = '暂停';
} else {
button.value = '播放';
}
}
</script>
</body>
展示结果：
展示2 设计全选框功能
<body>
<h3>请选择你想要的机器人</h3>
<input type="checkbox" class="child"> 卡布达 <br/>
<input type="checkbox" class="child"> 金龟次郎 <br/>
<input type="checkbox" class="child"> 车轮滚滚 <br/>
<input type="checkbox" class="child"> 卡布达 <br/>
<input type="checkbox" class="child"> 呱呱蛙 <br/>
<input type="checkbox" class="all"> 全选 <br/>
<script>
let all = document.querySelector(".all");
let childs = document.querySelectorAll(".child");
all.onclick = function() {
for(let i=0; i<childs.length; i++) {
//将每个 child 属性设置选中功能
childs[i].checked = all.checked;
}
}
//每个单选框也影响着全选框
for(let i=0; i<childs.length; i++) {
childs[i].onclick = function() {
all.checked = checkChild();
}
}
//如果当前某个选项未被选中，那么就取消选中全选框
//如果所有选项都被选中，那么就选中全选框
function checkChild() {
for(let j=0; j<childs.length; j++) {
if(!childs[j].checked) {
return false;
}
}
return true;
}
</script>
</body>
展示结果：
六、修改样式属性
JS 不仅可以更改 html 的一些属性，还可以对 CSS 的设置样式进行修改。
展示1 行内样式修改
设计一个 鼠标点击数字，不断调大的场景。
<body>
<div style="font-size: 20px;">卡布达</div>
<script>
let div = document.querySelector('div');
div.onclick = function() {
//div.style.fontSize 返回的是一个字符串，需要用 parseInt 转换成数字类型
//parseInt 在转换过程中，若遇到了非数字的字符，就会立即转换结束
let fontSize = parseInt(div.style.fontSize);
fontSize = fontSize + 10;
div.style.fontSize = fontSize + 'px'; //带上单位
}
</script>
</body>
展示结果：
注意：
① 在 CSS 中，使用的命名法为 font - size，而在 JS 中应使用 fontSize，因为 JS 并不支持脊柱命名法。
② parseInt 函数，在转换过程中，若遇到了非数字的字符，就会立即转换结束。
③ 展示1 是针对 CSS 行内样式的操作，但此情况仅适用于修改较少的场景。
展示2 类名样式修改
设计一个能白天模式和夜间模式相互切换的场景。
<body>
<div class="day">
卡布达<br/>
卡布达<br/>
卡布达<br/>
卡布达<br/>
卡布达<br/>
</div>
<style>
.day {
background-color: white;
color: black;
}
.night {
background-color: gray;
color: white;
}
</style>
<script>
let div = document.querySelector('div');
div.onclick = function() {
//indexOf 方法的目的是用来查找子串是否存在，存在则返回下标，不存在则返回 -1
if(div.className.indexOf('day') != -1) {
div.className = 'night';
} else {
div.className = 'day';
}
console.log(div.className);
}
</script>
</body>
展示结果：
七、操作节点
//1. 创建元素节点
let element = document.createElement();
//2. 插入节点到 DOM 树中
//parent 代表 节点 a, x, y 的父节点
parent.appendChild(a);//将节点a 插入到指定节点的最后一个孩子之后
parent.insertBefore(x, y)//将节点x 插入到节点y 之前
展示1
<body>
<div class="parent">
<div class="aaa">卡布达</div>
<div class="bbb">金龟次郎</div>
<div class="ccc">呱呱蛙</div>
</div>
<script>
let div = document.createElement('div');
div.id = 'myDiv';
div.className = 'box';
div.innerHTML = 'hello world';
</script>
</body>
当我们创建好一个节点的时候，发现并没有显示在页面上。为什么？这是因为新创建的节点并没有加入到 DOM 树中。所以说，光创建一个节点，内存中确实是存在了，但对结果来说，并没有什么用。
展示结果：
展示2
<body>
<div class="parent">
<div class="aaa">卡布达</div>
<div class="bbb">金龟次郎</div>
<div class="ccc">呱呱蛙</div>
</div>
<script>
let div = document.createElement('div');
div.id = 'myDiv';
div.className = 'box';
div.innerHTML = 'hello world';
let parent = document.querySelector('.parent');
parent.appendChild(div);
</script>
</body>
展示结果：
展示3
<body>
<div class="parent">
<div class="aaa">卡布达</div>
<div class="bbb">金龟次郎</div>
<div class="ccc">呱呱蛙</div>
</div>
<script>
let div = document.createElement('div');
div.id = 'myDiv';
div.className = 'box';
div.innerHTML = 'hello world';
let parent = document.querySelector('.parent');
parent.appendChild(div);
let ccc = document.querySelector('.ccc');
//若对同一节点插入两次，则只有最后一次生效
parent.insertBefore(div, ccc);
</script>
</body>
展示结果：
注意：
① 插入节点的时候，一般先使用 CSS 中的类选择器，再转换成对象，最后对该对象进行操作。
② 若对同一节点插入两次，则只有最后一次生效。这其实很好理解，不管插入多少次，就代表其移动了多少次，只有最后一次才是 “目的地”。
展示4 删除节点
//parent 代表 节点 a 的父节点
//oldchild 接收返回值，表示刚刚被删除的 a节点
oldChild = parent.removeChild(a);
注意：被删除节点只是从 DOM 树中，被移除了，但仍然在内存中。之后可通过 oldChild 随时加入到 DOM 树的其他位置，只有当程序结束后，或走出某个作用域，才会被垃圾回收。在这一点上，和 Java 很相似。
<body>
<div class="parent">
<div class="aaa">卡布达</div>
<div class="bbb">金龟次郎</div>
<div class="ccc">呱呱蛙</div>
</div>
<script>
let parent = document.querySelector('.parent');
let bbb = document.querySelector('.bbb');
parent.removeChild(bbb);
</script>
</body>
展示结果：
953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
