Web API【黑马前端--笔记整理】

一、Web API

1.Web APIs 和JS 基础关联性

1.1JS的组成

1.2JS基础阶段以及 Web APls阶段

• Web API阶段

  • web APIs是w3c组织的标准

  • web APIs我们主要学习DOM和BOM

  • web APIs是我们Js所独有的部分我们主要学习页面交互功能

  • 需要使用Js 基础的课程内容做基础

• JS基础阶段

  • 我们学习的是 ECMAScript标准规定的基本语法
  • 要求同学们掌握Js基础语法
  • 只学习基本语法，做不了常用的网页交互效果
  • 目的是为了Js后面的课程打基础、做铺垫

2.API 和 Web API

2.1 API

• API( Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

• 简单理解︰API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

• 比如手机充电的接口∶

  • 我们要实现充电这个功能

  • 我们不关心手机内部变压器，内部怎么存储电等我们不关心这个充电线怎么制作的

  • 我们只知道，我们拿着充电线插进充电接口就可以充电这个充电接口就是一个API

2.2 Web API

• Web API是浏览器 提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

• 现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框，直接使用alert(“弹出’)

• MDN详细API : https://developer.mozilla.org/zh-CN/docs/Web/API

• 因为 Web API很多，所以我们将这个阶段称为Web APls

2.3API和Web API总结

1. API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了,不必纠结内部何实现
2. Web APl主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3. WebAPI一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数)
4. 学习Web API可以结合前面学习内置对象方法的思路学习

二、DOM

1.DOM简介

1.1什么是DOM

• 文档对象模型（Document Object Model,简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML、XML）的标准编程接口
• W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1.2DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m0it18og-1663827295283)(C:\Users\HEYUER~1\AppData\Local\Temp\Image.png)]

• 文档：一个页面就是一个文档，DOM中使用ducument表示
• 元素：页面中的所有标签都是元素，DOM中使用element表示
• 节点：网页中的所有内容都是节点(标签、属性、文本、注释等），DOM中使用node表示

2.获取元素

2.1 如何获取页面元素

• DOM在我们实际开发中主要用来操作元素获取页面中的元素
• 可以使用以下几种方式：
  • 根据ID获取
  • 根据标签名获取
  • 通过HTML5新增的方法获取
  • 特殊元素获取

2.2根据ID获取

• 使用getElementByld()方法获取带有ID的元素对象。

Document的方法 getElementById()返回一个匹配特定ID的元素。由于元素的ID在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

如果需要查找到那些没有ID的元素，你可以考虑通过CSS选择器使用querySelector()。

• 语法

var element = document.getElementById(id) ;

• 参数
  • element是一个Element对象。如果当前文档中拥有特定ID的元素不存在则返回null.
  • id是大小写敏感的字符串代表了所要查找的元素的唯一ID.
• 返回值
  • 返回一个匹配到ID的DOMElement对象。若在当前Document下没有找到，则返回null。

案例

// 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
// 2.get 获取 element 元素 by通过  驼峰命名法
// 3.参数 id是大小写铭感的字符串
// 4.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
// 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer)

2.3根据标签名获取

• 使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection。整个文件结构都会被搜索，包括根节点。返回的 HTML集合是动态的，意味着它可以自动更新自己来保持和DOM树的同步而不用再次调用document.getElementsByTagName()。

• 语法

  var elements = document.getElementsByTagName(name);
  

  • elements是一个由发现的元素出现在树中的顺序构成的动态的HTML集合 HTMLCollection(但是看下面的提示)。

  • name是一个代表元素的名称的字符串。特殊字符"*"代表了所有元素。

  注意:最新的W3C规范口说明这些元素是HTMLCollection (HTML集合）﹔然而，这个方法在WebKit内核的浏览器中返回一个NodeList。

  • 注意：
  1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
  2. 得到元素对象是动态的

• 还可以获取某个元素（父元素）内部所有指定标签名的子元素

  element.getElementByTagName('标签名'）;
  

  • 注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

2.4 通过HTML5 新增的方法获取

1. document.getElementsByClassName(‘类名’); //根据类名返回元素对象集合
2. document.querySelector(‘选择器’); //根据指定选择器返回第一个元素对
3. document.querySelectorAll() 返回指定算则其的所有的元素对象集合

2.5获取特殊元素（body,html）

获取body元素

document.body;  //返回body元素对象

获取html元素

document.documentElement;  //返回html元素对象

3.事件基础

3.1 事件概述

• JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
• 简单理解︰触发—响应机制。
• 网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

3.3 执行事件的步骤

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值形式）

鼠标事件	触发事件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

3.4分析事件三要素

下拉菜单三要素

关闭广告三要素

4.操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。

4.1改变元素的内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

• innerText和innerHTML的区别

1. innerText 不识别html标签 非标准 去除空格和换行

2. innerHTML 识别html标签 W3C标准 保留空格和换行

这两个属性是可读写的 可以获取元素里面的内容

4.2 常用元素的属性操作

1.innerText、innerHTML改变元素内容

2.src、href

3.id、alt、title

案例：分时显示不同图片，显示不同问候语

根据不同时间，页面显示不同图片，同时显示不同的问候语。

如果上午时间打开页面，显示上午好，显示上午的图片。

如果下午时间打开页面，显示下午好，显示下午的图片。

如果晚上时间打开页面，显示晚上好，显示晚上的图片。

案例分析：

①根据系统不同时间来判断，所以需要用到日期内置对象

②利用多分支语句来设置不同的图片

③需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性

④需要一个div元素，显示不同问候语，修改元素内容即可

    <img src="images/swh.gif" alt="">
    <div>上午好</div>
    <script>
        // 1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2.得到当前小时数
        var date = new Date();
        var h = date.getHours();
        // 3.判断小时数改变图片何文字信息
        if (h < 12) {
   
            img.src = 'images/swh.gif';
            div.innerHTML = '亲,上午好,好好写代码';
        } else if (h < 18) {
   
            img.src = 'images/zwh.jpg';
            div.innerHTML = '亲,中午好,好好写代码';
        } else {
   
            img.src = 'images/wsh.jpg';
            div.innerHTML = '亲,晚上好,好好写代码';
        }
     </script>

4.3表单元素的属性操作

利用DOM可以操作如下表单的属性：type、 value、 checked、 selected、 disabled

    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2.注册事件 处理程序
        btn.onclick = function () {
   
            // input.innerHTML = '点击了';  这个是普通盒子 比如 div标签里面的内容
            // 表单里面的值 文字内容是通过value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者  即这个this指向btn
        }
     </script>

案例：仿京东显示密码

点击按钮将密码框切换为文本框，并可以查看密码明文

案例分析：

①核心思路：点击眼睛按钮，把密码框数据类型改为文本框就可以看见里面的密码了

②一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框

③算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1.

代码：注重flag的算法，以后遇到任何点击两次或多次的，可以设置flag的值

<!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>
    <style>
        .box {
   
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }

        /*密码框*/
        .box input {
   
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }

        .box img {
   
            position: absolute;
            /*子绝父相*/
            top: 8px;
            right: 7px;
            width: 24px;
            /* 图片大小 */
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="images/close.jpg" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        // 1.获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2.注册事件 处理程序  
        var flag = 0;
        eye.onclick = function () {
   
        // 点击一次之后,flag一定要变化
            if (flag == 0) {
   
                pwd.type = 'text';
                flag = 1;  //重新赋值
                eye.src = "images/open.jpg";
            } else {
   
                pwd.type = 'password';
                flag = 0;  //重新赋值
                eye.src = "images/close.jpg";
            }
        }
    </script>
</body>
</html>

4.4 样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式
1.element.style 行内样式操作

2.element.className 类名样式操作

     <style>
        div {
   
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div></div>
    <script>
        // 1.获取元素
        var div = document.querySelector('div');
        // 2.注册事件 处理程序
        div.onclick = function () {
   
            // div.style
            this.style.backgroundColor = 'purple';   //属性采取驼峰命名法
            this.style.width = '250px';
        }
    </script>
</body>

注意：

1.JS里面的样式采取驼峰命名法 比如 fontSize backgroundColor

2.JS修改style样式操作，产生的是行内样式，JS权重比较高

案例：淘宝点击关闭二维码

当鼠标点击二维码关闭按钮的时候，则关闭整个二维码

案例分析：

①核心思路：利用样式的显示和隐藏完成，display:none 隐藏元素 display:block显示元素

②点击按钮，就让这个盒子隐藏起来即可

<style>
        .box {
   
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;

        }

        .box img {
   
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
   
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
</style>
    <div class="box">
        淘宝二维码
        <img src="im