【第五部分 | JS WebAPI】1：WebAPIs概述、网页元素的获取、事件

Myth丶恋晨 2023-09-23 15:55 36阅读 0赞

**目录**

| 概述

| 文档、元素、节点的概念

| 获取元素

根据ID获取

根据标签名获取

通过HTML5新增方法获取

特殊元素获取（body html）

| 事件基础

事件三要素

点击事件

光标获得/失去焦点事件

\[ 更多其它事件 \]

刷新网页自动执行某些事件

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

### | 概述 ###

学习完JS后，我们就需要学习有关JS的 WebAPIs 啦！就像学习完 Java后，就要开始学习 Servlet、JDBC、SSM、SpringBoot 一样自然……

WebAPIs就是通过 JS 来获取网页中的元素（如标签等），进而对这些元素添加一些诸如【事件、操作、更新、动效】等交互效果。

这么说：  
对于后端而言，Java是根基，Servlet是后端基础，框架是后端的实际应用；对于前端而言，HTML、CSS是搭建和美化静态网页，JS是根基，Vue等框架是让网页活起来的实际应用。

本章的阶段和重要性

*  第一章学习的是JS基本语法，但是只学习基本语法是远远不够的，我们还需要学习网页元素的相关操作，对网页的相关指令做出相应。
 *  JS由：ECMAScript、DOM、BOM组成。本章学习的是DOM
 *  DOM的作用是：实现页面交互功能
 *  学习本章，所需要的前置知识：Html、CSS、JavaScript基础语法知识

![3ee99021e5bd40c8b3760eb4647a1495.png][]

什么是DOM

![e3edf7c7750a427ca92c5be3a49cbf74.png][]

DOM是一个JS的web API（Application Programming Interface）

![3050aa003ff947aaab2b894d2caf5229.png][]

目标

![d5e7f7670280446ca1da2bdeba3bcf2c.png][]

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

### | 文档、元素、节点的概念 ###

![b07db4aec6364f42880b183240546c7b.png][]

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

### **| 获取元素** ###

#### **根据ID获取** ####

*  需要注意的是，我们的script标签必须写在元素被创建的语句之后。【今后会学如何把script提升到head里】
 *  id需要带单引号，表示一个字符串
 *  返回的是一个**元素对象**

通过ID获取元素的语法：

document.getElementById('id');

使用 console.dir() 可以打印我们获取的元素对象，更好地查看对象里面的属性和方法。

####    **根据标签名获取** ####

*  返回的是获取的**元素对象**（不是字符串）的**集合**。伪数组。（有索引、有length）；无论页面是只有一个li，还是没有任何元素，所得到的都是一个伪数组。
 *  因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
 *  得到元素对象是动态的

通过标签名获取元素的语法：

document.getElementsByTagName('标签名');

如何获取“ol下的li”？ 可以把document换成元素

需要注意的是：所得到的ol是一个伪数组，**我们需要使用ol\[0\]来得到一个单独的元素**，而不是把整个伪数组作为document

var ol = document.getElementsByTagName('ol');
    ol[0].getElementsByTagName('li');

#### 通过HTML5新增方法获取 ####

![f96808251be54f4f97203692b2d9f2bc.png][]

示例

![f588f0b7243247bc8bef196b88c666ce.png][]

#### 特殊元素获取（body html） ####

doucumnet.body // 返回body元素对象
    
    document.documentElement // 返回html元素对象

####  ####

### | 事件基础 ###

#### 事件三要素 ####

事件源 → 事件类型 → 事件处理程序

#### 点击事件 ####

点击按钮，弹出弹窗（获取元素对象btn → 事件类型onclick → 事件处理程序function()\{ //... \}）

var btn = document.getElementById('btn');
    btn.onclick = function() {
     alert('你好吗'); 
    };

代码示例

<!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>
        <button id="btn">Click me</button>
        <script>
            //获取事件源：元素对象
            var btn = document.getElementById('btn');
            //绑定事件
            btn.onclick = function(){
                //事件处理程序
                alert('おはようございます！');
            }
        </script>
    </body>
    </html>

#### 光标获得/失去焦点事件 ####

事件 ： 获得焦点 onfocus 失去焦点 onblur

应用案例：鼠标光标放置在文本框的时候，默认文字消失（和 placeholder 的区别：placeholder需要输入文字才小时）

![619744f803834f96a6447396acddaf74.png][]

#### \[ 更多其它事件 \] ####

![1b85908b6ab64cffbffaa92974b47594.png][]

#### 刷新网页自动执行某些事件 ####

我们可以不添加触发事件，这样的话，就相当于默认触发事件。即：网页刷新的时候，JS会自动执行

![5a4dc29a1a2b4ec88f8cdc156010ee62.png][]

[3ee99021e5bd40c8b3760eb4647a1495.png]: https://img-blog.csdnimg.cn/3ee99021e5bd40c8b3760eb4647a1495.png
[e3edf7c7750a427ca92c5be3a49cbf74.png]: https://img-blog.csdnimg.cn/e3edf7c7750a427ca92c5be3a49cbf74.png
[3050aa003ff947aaab2b894d2caf5229.png]: https://img-blog.csdnimg.cn/3050aa003ff947aaab2b894d2caf5229.png
[d5e7f7670280446ca1da2bdeba3bcf2c.png]: https://img-blog.csdnimg.cn/d5e7f7670280446ca1da2bdeba3bcf2c.png
[b07db4aec6364f42880b183240546c7b.png]: https://img-blog.csdnimg.cn/b07db4aec6364f42880b183240546c7b.png
[f96808251be54f4f97203692b2d9f2bc.png]: https://img-blog.csdnimg.cn/f96808251be54f4f97203692b2d9f2bc.png
[f588f0b7243247bc8bef196b88c666ce.png]: https://img-blog.csdnimg.cn/f588f0b7243247bc8bef196b88c666ce.png
[619744f803834f96a6447396acddaf74.png]: https://img-blog.csdnimg.cn/619744f803834f96a6447396acddaf74.png
[1b85908b6ab64cffbffaa92974b47594.png]: https://img-blog.csdnimg.cn/1b85908b6ab64cffbffaa92974b47594.png
[5a4dc29a1a2b4ec88f8cdc156010ee62.png]: https://img-blog.csdnimg.cn/5a4dc29a1a2b4ec88f8cdc156010ee62.png