【JavaEE初阶】前端篇：WebAPI

哎呀是小张啊

已于 2022-10-05 12:34:57 修改

阅读量2.4k

点赞数 15

分类专栏： JavaEE初阶文章标签：前端 WebAPI 猜数字游戏留言板

于 2022-10-05 03:30:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_53362595/article/details/127138275

版权

☕导航小助手☕

🍚写在前面

🥡一、前置知识

🍔🍔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 ~

<!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>Document</title>
</head>
<body>
    <h1 class="abc">这是一个标题</h1>
    <script>
        //可以使用 querySelector 来选中上述的 h1元素对应的对象
        //querySelector 是 document 的方法,document 是一个页面内置的全局对象(由浏览器提供出来的)
        //只要页面加载成功，显示出来了，此时 document对象 就有了
        //querySelector() 方法的参数就是 CSS选择器
        let elem = document.querySelector('h1');
        //执行到这一步的时候，就说明 elem变量 就对应着上述的 h1标签
        //进一步的就可以通过 elem变量 获取到 h1标签 里面的信息(也可以进行修改了)
    </script>
</body>
</html>

如果有多个h1标签，那就需要看自身的需求是什么：

需求是只选择一个h1标签，可以使用其他的选择器,以保证选择的唯一性；

需求是选中所有的h1标签，可以使用 querySelectorAll方法，得到的结果就是一个 "数组"，这个 "数组" 里面包含了多个对象 ~

querySelector 和 querySelectorAll 方法是属于新版本HTML 支持的，针对一些比较老的浏览器，可能是无法使用的 ~

2.2 事件

事件，是用来实现和用户之间交互的关键操作 ~

用户针对浏览器页面的每个动作，都可以视为 "事件"（比如：鼠标移动、鼠标点击、鼠标单击、鼠标拖动、鼠标按键、浏览器窗口改变、浏览器位置改变 ......）~

事件什么时候发生并不确定，取决于用户的具体行为 ~

当某个事件发生，浏览器就能观察到这个事件，观察到这个事件之后，浏览器就可以决定是忽略还是触发一个对应的程序(代码) 来处理这个事件 ~

事件的三个要素：

事件源（哪个事件触发的事件）
时间类型（事件具体是啥：点击、选择、拖拽 ......）
事件处理程序（事件出现之后要执行哪个代码）

示例1：

演示1：

示例2：

演示2：

2.3 获取/修改元素内容

我们可以通过 innerHTML属性获取或者修改元素的内容 ~

示例1：

演示1：

示例2：

演示2：

计数器：

示例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"

最低0.47元/天解锁文章