【前端】JS - WebAPI

桃扇骨 2024-03-26 23:40 84阅读 0赞

####  目 录 ####

*  一.WebAPI 背景知识
 *   *  什么是 WebAPI
     *  什么是 API
     *  API 参考文档
 *  二.DOM 基本概念
 *   *  什么是 DOM
     *  DOM 树
 *  三.获取元素
 *   *  querySelector
     *  querySelectorAll
 *  四.事件初识
 *   *  基本概念
     *  事件三要素
 *  五.操作元素
 *   *  获取/修改元素内容（innerHTML）
     *  获取/修改元素属性
     *  获取/修改样式属性
 *  六.操作节点
 *   *  新增节点
 *  七.代码案例

## 一.WebAPI 背景知识 ##

### 什么是 WebAPI ###

前面学习的 JS 分成三个大的部分

*  ECMAScript: 基础语法部分
 *  DOM API: 操作页面结构
 *  BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM.

--------------------

### 什么是 API ###

API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM

所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.

> 相当于一个工具箱. 只不过程序猿用的工具箱数目繁多, 功能复杂.

--------------------

### API 参考文档 ###

[点击这里][Link 1]

> 可以在搜索引擎中按照 “MDN + API 关键字” 的方式搜索, 也能快速找到需要的 API 文档.

--------------------

## 二.DOM 基本概念 ##

### 什么是 DOM ###

DOM 全称为 Document Object Model.

W3C 标准给我们提供了一系列的函数, 让我们可以操作:

*  网页内容
 *  网页结构
 *  网页样式

--------------------

### DOM 树 ###

一个页面的结构是一个树形结构, 称为 DOM 树.

DOM 树结构形如：

![在这里插入图片描述][427e05f9ec6f470ba63529eaf366d575.png]

重要概念:

*  文档: 一个页面就是一个 文档, 使用 document 表示.
 *  元素: 页面中所有的标签都称为 元素. 使用 element 表示.
 *  节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.

这些文档等概念在 JS 代码中就对应一个个的对象.

> 所以才叫 “文档对象模型” .

--------------------

## 三.获取元素 ##

JS获取元素有很多种方式，此处只介绍一种最强大，最通用的方式。

--------------------

### querySelector ###

querySelector 是 document的方法，document 是一个页面中内置的全局对象.(由浏览器提供出来的)页面加载成功，显示出来了，此时 document 就有了。

![在这里插入图片描述][ed9127b258df442e910761a943ad931e.png]

此时,就可以使用 elem 来表示这个h1标签，同时可以通过 elem 获取到 h1 标签中的属性，也可以用来修改了。

![在这里插入图片描述][d93c28e03bf34e5fa6d5baa15c10c332.png]  
当有多个 h1 的时候，标签选中的 h1 就是第一个  
![在这里插入图片描述][bf17471d0c624839ac33d642efa23a52.png]

--------------------

### querySelectorAll ###

要想选多个元素,直接 querySelectorAll 即可，用法和 querySelector 一样。

--------------------

## 四.事件初识 ##

### 基本概念 ###

用户针对浏览器页面的每个动作都可以视为是 “事件”。

> 鼠标移动，鼠标点击，鼠标双击，鼠标拖动，键盘按键，浏览器窗口改变，浏览器位置改变…

JS 要构建动态页面, 就需要感知到用户的行为.

用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作

> 浏览器就是一个哨兵, 在侦查敌情(用户行为). 一旦用户有反应(触发具体动作), 哨兵就会点燃烽火台的狼烟(事件), 后方就可以根据狼烟来决定下一步的对敌策略.

--------------------

### 事件三要素 ###

1.  事件源: 哪个元素触发的
2.  事件类型: 是点击, 选中, 还是修改?
3.  事件处理程序: 事件出现之后要执行哪个代码

![在这里插入图片描述][db9092f204644ba3ab4c1ceb374d24d9.png]

例如上述代码：h1 就是事件源，onclick 就是事件类型：点击事件，alert(‘hello’) 就是事件处理程序。

--------------------

## 五.操作元素 ##

### 获取/修改元素内容（innerHTML） ###

上述代码是把 JS 嵌入到 HTML 中了，如果 JS 代码简单，那还好，如果 JS 代码复杂，直接嵌入的方式就不太好。

![在这里插入图片描述][31ab285a568e4a13a2c7f77ec4a6c7d2.png]

本来 onclick 是空。这样的赋值，就让 onclick 有东西了，用户点击元素的时候，浏览器会自动执行到 onclick 对应的方法

但是此处报错了：

![在这里插入图片描述][aea86c8f84324c739f0fcd24dcf99694.png]

不能给null设置 onclick 属性

elem 成了 null，自然不能 onclick，然后 elem 为啥是 null? 说明上述 querySelector 没查到结果，检查选择器写的对不对，一检查发现选择器不应该为 . ，发现它是 id，应该是 \#。

在这里打印的结果却是在控制台里面而不是在页面，那我们如何在页面打印呢？

![在这里插入图片描述][5190cec286894965bc1b1c38a01e7849.png]

当我们在刷新页面的时候会出现如下画面

![在这里插入图片描述][cd8b7d78ec9743848703eec431af6f07.png]

多次点击后

![在这里插入图片描述][172cab7300bf4dd19b95039fb9ee3a9b.png]

、  
设计一个自增的计数器，每次点击按钮都会自增加一

![在这里插入图片描述][fb6f27c12e264c2283b2a3ccf940ace9.png]  
![在这里插入图片描述][8ae148dce758486eab6f488b4085a6cb.png]

每次点击都会自增 +1

![在这里插入图片描述][71118b8ec3fc4e83977f9fc9967a91a3.png]

--------------------

### 获取/修改元素属性 ###

![在这里插入图片描述][903e14d4d7914c53a4d8bc4337bf5da3.png]

![在这里插入图片描述][4d7045979e7243918ca114efe0b95a38.png]

![在这里插入图片描述][1215bb40ea5444999a8adb4939c19d1e.png]

显示隐藏密码：

![在这里插入图片描述][4cef9aa7b62540f589bda11515d8defe.png]

![在这里插入图片描述][fe79af83f39a47638e202219f26c61a3.png]

![在这里插入图片描述][b647435cbedc4b6c81523951866d2b2f.png]

--------------------

### 获取/修改样式属性 ###

**行内样式操作**

element.style.[属性名] = [属性值];

> 相当于是给元素加了内联样式(style属性来表示的样式)

![在这里插入图片描述][67224ab3d9f243ca9b54abb64ff7d22a.png]

> 此处的单位非常关键，如果不写单位，光写个100，大概率是不生效的。

点击前：

![在这里插入图片描述][3b75bb3cfb384fa28f3364edd9bfbec6.png]

点击后：

![在这里插入图片描述][5ecfd41f9e424edfb891bd9bf771dfd8.png]

\-提出来之后，这里的属性名，就不是带–的了，而是变成了驼峰。

\-在js 里是不能作为变量名的，css里其实有很多的属性是这种的。

**类名样式操作**

element.className = [CSS 类名];

> 直接指定某个元素应用上某个css类名.

日间模式 夜间模式 相互切换：

![在这里插入图片描述][5815d146325b4476add4fb2ab40f6ea8.png]

点击前 （日间模式）：

![在这里插入图片描述][775ad96efc8a48a9877dddc85c4c91e8.png]

点击后 （夜间模式）：

![在这里插入图片描述][06bb31ff99834c0f9e3118939fb7f646.png]

--------------------

## 六.操作节点 ##

操作节点，这个是针对页面上的元素进行增删

### 新增节点 ###

1.  创建元素节点

使用 createElement 方法来创建一个元素

1.  插入节点到 dom 树中

先确定要把新元素放到哪个父节点下，根据父节点，使用 appendChild 方法。

![在这里插入图片描述][61dc394d8dc44337b823eafc14093668.png]

![在这里插入图片描述][30346d4967d64337bdb0a4c973dc48ee.png]

> 另外还有一个 insertBefore 也能实现插入～~插入到某个子元素的前面.

1.  删除节点

先确定要删除元素的父节点，然后再确定要删除的节点

![在这里插入图片描述][55e13df596bd47d89a76d7704e4786a3.png]

删除前：

![在这里插入图片描述][a09ce6b6a88943c3aebf4d13768c83a2.png]

删除后：

![在这里插入图片描述][fd8e7523beff42ab97e3e3ff9e0bc556.png]

--------------------

## 七.代码案例 ##

1.  猜数字

先生成一个 1-100 的随机正数，让用户输入一个要猜的数字，程序来提示，是猜的高了，低了，对了。

*  首先要先能够生成一个随机数字
 *  然后需要在页面上有一个输入框
 *  接下来还需要有一个 ‘提交按钮’
 *  最后还得有区域来显示结果

由于 JS 的 Math.random()生成的随机数,是一个\[0，1)之间的小数，那么我么需要将 N\*100+1 即可得到区域为 \[1，101)，再向下取整即可得到 \[0，100\]的区域。

![在这里插入图片描述][0c1d9e65dd974689bfdb9cf8d1a7350b.png]

1.  表白墙

![在这里插入图片描述][84ee8a861cea4047b797f0117a624717.png]

![在这里插入图片描述][a6a15f39da474007be8eb367b8bb5ff7.png]

![在这里插入图片描述][ed211cc990f44c6f8da7bd2e633e7fe3.png]  
![在这里插入图片描述][eae361abbad04bee8fc114cfb9b7bb25.png]

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API
[427e05f9ec6f470ba63529eaf366d575.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/a5797cdb440f4379b6c5fec80f51dd85.png
[ed9127b258df442e910761a943ad931e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/7d929195fad24b2895282e3a4010970c.png
[d93c28e03bf34e5fa6d5baa15c10c332.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/d605f91e3bee4cae9d922c7974f7f099.png
[bf17471d0c624839ac33d642efa23a52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/cfe13ac6767a4aa9a4bf70430b10d338.png
[db9092f204644ba3ab4c1ceb374d24d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/04f5b38fe69f409d882025c91b734511.png
[31ab285a568e4a13a2c7f77ec4a6c7d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/60f8df09843e465bafce9248b2d92d33.png
[aea86c8f84324c739f0fcd24dcf99694.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/c5f7d380576e452bb9fe7c69d7023f89.png
[5190cec286894965bc1b1c38a01e7849.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/006ca40758b74d038a4990ae74ce41ea.png
[cd8b7d78ec9743848703eec431af6f07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/8a88334f80154f8a9e5e757d9914b088.png
[172cab7300bf4dd19b95039fb9ee3a9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/822cb56ca8bf4b13b3546fb16cabf541.png
[fb6f27c12e264c2283b2a3ccf940ace9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/bd5b304517de43dd9462a2a3142caa2f.png
[8ae148dce758486eab6f488b4085a6cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/243edfa679384a3785e8ef55e7871c78.png
[71118b8ec3fc4e83977f9fc9967a91a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/19f0830ef6e443b5af4bcb5bb8d0d3a1.png
[903e14d4d7914c53a4d8bc4337bf5da3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/d312229b4dad4c59b109867009222e78.png
[4d7045979e7243918ca114efe0b95a38.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/8942f450f6664e0eb3774ddf5fe37a9c.png
[1215bb40ea5444999a8adb4939c19d1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/070fa5b92a1240689ef9aa0799424c15.png
[4cef9aa7b62540f589bda11515d8defe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/5b7027321d5b4ea4b51f0a168c6a20a9.png
[fe79af83f39a47638e202219f26c61a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/9640990c06db49c3a625bc256546652a.png
[b647435cbedc4b6c81523951866d2b2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/f80b9fca4c47494a9a6e2d6969169a1c.png
[67224ab3d9f243ca9b54abb64ff7d22a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/1402ba0afeaa4dc09427f5d0d05929d8.png
[3b75bb3cfb384fa28f3364edd9bfbec6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/d4c861378b58412d951e8bd887ea5db7.png
[5ecfd41f9e424edfb891bd9bf771dfd8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/6511d87fd7a74623b7abb5ae3588a36e.png
[5815d146325b4476add4fb2ab40f6ea8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/e45858f1da4948c79af98d99ec2340e8.png
[775ad96efc8a48a9877dddc85c4c91e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/ddef69aa9bf14bf3a04f72fb17f8d82f.png
[06bb31ff99834c0f9e3118939fb7f646.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/d2b8a4fb2c6f4fbeb1fdc61ab54c2154.png
[61dc394d8dc44337b823eafc14093668.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/564690f6725a45038b8838eac36eff5b.png
[30346d4967d64337bdb0a4c973dc48ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/5a7fee9b39ee4765980db378e85ee9d9.png
[55e13df596bd47d89a76d7704e4786a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/61a78fa38c2a4a6b9ac4c7a35a2a1254.png
[a09ce6b6a88943c3aebf4d13768c83a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/d728ce1f6b5d4c5889c9100abd716870.png
[fd8e7523beff42ab97e3e3ff9e0bc556.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/bd3d06a370f149738d5c300a0ac1bff8.png
[0c1d9e65dd974689bfdb9cf8d1a7350b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/aa2449a7e76b4e6ea8d219f2657293c4.png
[84ee8a861cea4047b797f0117a624717.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/f0c006c0b7a34c189eb301d419c7d54f.png
[a6a15f39da474007be8eb367b8bb5ff7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/11c57b1bcf58486f84a64c06a55c386a.png
[ed211cc990f44c6f8da7bd2e633e7fe3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/06323891941846c4ad09c65cbce9a4bf.png
[eae361abbad04bee8fc114cfb9b7bb25.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/62915723bdde44229447b3cb3a1e9720.png