【JavaEE初阶】前端篇：WebAPI
☕导航小助手☕
写在前面
一、前置知识
1.1 什么是WebAPI
1.2 什么是API
二、与元素相关的操作
2.1 获取元素
2.2 事件
2.3 获取/修改 元素内容
2.4 获取/修改 元素属性
2.5 获取/修改 样式属性
三、操作节点
3.1 新增节点
3.2 删除节点
四、综合案例
4.1 猜数字游戏
4.2 留言墙
写在前面
在上一篇博客中，我们已经学习了关于 JS 的基本用法，在这一篇博客中，我们将会学习关于 WebAPI 方面的内容 ~
WebAPI 是浏览器给 JS 提供的一些 API，可以通过这些 API 来操作页面内容，或者操作浏览器窗口 ~
当然，由于 WebAPI 的体系也是过于庞大，本篇博客介绍的内容 也是相对较基础的内容，但也足够现阶段的学习了 ~
至于更多的关于这方面的内容，可以自己去查一查相关的资料，开阔自己的眼界 ~
那么现在，正文开始 ......
一、前置知识
1.1 什么是WebAPI
其实，在学习 JS 的时候，会分为 三个部分：
- 核心语法
- DOM API
- BOM API
其中，我们把 DOM、BOM两个部分统称为 WebAPI，即是浏览器提供的 API ~
单单学习语法部分，可以实现的程序是有限的；但是搭配上 API，可以做的事情就多多了 ~
1.2 什么是API
所谓的 API 就是一些现成的函数/对象，拿来给程序员用，用以方便开发 ~
就相当于是一个工具箱，里面有许多已经封装好的工具 ~
API 的种类是非常多的，这么多的 API 不可能全部都记住，所以需要学会使用 MDN文档来进行查询 ~
下面就附上 MDN文档链接：
WebAPI接口 MDN参考文档
https://developer.mozilla.org/zh-CN/docs/Web/API
当然，还是需要去熟悉一些常用的 API ~
二、与 元素 相关的操作
2.1 获取元素
一个页面上，有很多 HTML标签，每个 标签(tag) 也称为是一个 元素(element)，获取元素 就是：把页面上指定的元素 得到，得到了这个元素 才可以进行获取操作 ~
这就类似于 之前的博客中，介绍数据库的时候，要想去操作数据库，首先需要 use 数据库名; 这样才可以进行后续操作 ~
在 JS 中获取元素有很多种方式，此处 只介绍一种最强大、最通用的方式 —— querySelector ~
Document
这是一个标题
如果有多个h1标签，那就需要看自身的需求是什么：
需求是只选择一个h1标签，可以使用其他的选择器,以保证选择的唯一性；
需求是选中所有的h1标签，可以使用 querySelectorAll方法，得到的结果就是一个 "数组"，这个 "数组" 里面包含了多个对象 ~
querySelector 和 querySelectorAll 方法 是属于 新版本HTML 支持的，针对一些比较老的浏览器，可能是无法使用的 ~
2.2 事件
事件，是用来实现和用户之间交互的关键操作 ~
用户针对浏览器页面的每个动作，都可以视为 "事件"（比如：鼠标移动、鼠标点击、鼠标单击、鼠标拖动、鼠标按键、浏览器窗口改变、浏览器位置改变 ......）~
事件什么时候发生并不确定，取决于用户的具体行为 ~
当某个事件发生，浏览器就能观察到这个事件，观察到这个事件之后，浏览器就可以决定 是忽略 还是触发一个对应的程序(代码) 来处理这个事件 ~
事件的三个要素：
- 事件源（哪个事件触发的事件）
- 时间类型（事件具体是啥：点击、选择、拖拽 ......）
- 事件处理程序（事件出现之后要执行哪个代码）
示例1：
演示1：
示例2：
演示2：
2.3 获取/修改 元素内容
我们可以通过 innerHTML属性 获取或者修改 元素的内容 ~
示例1：
演示1：
示例2：
演示2：
计数器：
示例3：
计数器
0
演示3：
2.4 获取/修改 元素属性
点击图片切换：
示例1：
前提：
Document
演示：
注意：
不仅仅是 src属性 这样，其他的各种属性，都是可以在 JS 中通过 对象.属性名 的方式来操作的 ~
通过这种方法，就可以随心所欲的 获取 / 修改 到 自己所希望的属性了 ~
一个 HTML元素 的属性有很多，不同的元素 可能还有不同的属性，我们可以直接把对象给打印出来，就可以看到这些属性了（console.log 或者 console.dir）~
显示 / 隐藏 密码：
input标签，有密码框，显示的是实心圆点；也有 文本框，显示的是原文 ~
我们可以使用一个按钮，来进行来回切换 ~
示例2：
显示 / 隐藏 密码
演示2：
2.5 获取/修改 样式属性
获取/修改样式属性 有两种方式：
- 行内样式操作
- 类名样式操作
行内样式操作：相当于给元素加了 内联样式（style属性 来表示的样式）
示例：
演示：
类名样式操作：直接指定某个元素 应用上某个 CS类名
实现 夜间/日间模式切换 的效果：
日间模式：文字是深色，背景是浅色的（如：画图板）
夜间模式：文字是浅色，背景是深色的（如：VsCode）
Document
这是一段话:Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus corrupti natus voluptatibus eaque dignissimos provident explicabo laborum veritatis doloremque, facere reprehenderit hic voluptate reiciendis dolore distinctio ducimus, perspiciatis expedita suscipit!
演示：
三、操作节点
上面所介绍的，是操作一个元素里面的东西 ~
接下来所要介绍的，是针对页面上的元素进行 增加、删除 ~
3.1 新增节点
新增节点，需要进行两个步骤：
- 将元素创建出来
- 把元素加入到 DOM树 上
创建元素：使用 createElement(标签名);
演示：
把元素放到 DOM树 上：
方法有很多，这里介绍一个简单粗暴的办法：先确定要把新元素放到哪个父元素下，接下来根据父节点 使用 appendChild方法（插入到某个元素的后面） 即可 ~
示例1：
演示1：
示例2：
演示2：
3.2 删除节点
删除节点也有两个步骤：
- 先确定要删除的父节点
- 然后再确定要删除的节点
可以使用 removeChild(标签名); 来删除节点 ~
比如说，想要有一个按钮，按一下就可以删除刚刚创建的新的元素：
Document
这是之前的 div
演示：
四、综合案例
4.1 猜数字游戏
目标样式：
示例：
猜数字
猜数字游戏
要猜的数字:
结果:
你还没有猜哦！
次数:
0
演示：
4.2 留言墙
目标样式：
示例：
留言墙
温馨版留言墙
输入后点击提交, 会将信息显示在留言按钮下方
这真真真的是一个留言墙
-------------------------------------------------------------
是哪个：
向哪个：
留言：
演示：
好了，关于 WebAPI 的知识点就介绍到这里了 ~
怎么样，是不是很简单 ~
如果感觉这一篇博客对你有帮助的话，可以一键三连走一波，非常非常感谢啦 ~
