Web API简介

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

3、任何开发语言都有自己的 API
4、API 的特征输入和输出(I/O)

    例如：var max = Math.max(2,3,4);
5、API 的使用方法(console.log("abc"))

Web API 的概念

浏览器提供了一套操作浏览器功能和页面元素的 API(BOM 和 DOM)
此处的 Web API 特指浏览器提供的 API(一组方法)，Web API 在后面的课程中有其它含义
学习目标：掌握常见浏览器提供的 API 的调用方式。
学习辅助 MDN：developer.mozilla.org/zh-CN/docs/…

JavaScript 的组成

ECMAScript
DOM
BOM
api 目前可以理解 DOM+BOM

ECMAScript - JavaScript 的核心

定义了 JavaScript 的语法规范
JavaScript 的核心，描述了语言的基本语法和数据类型，ECMAScript 是一套标准，定义了一种语言的标准与具体实现无关。

BOM - 浏览器对象模型

browser object model，一套操作浏览器功能的 API
通过 BOM 可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

document object model，一套操作页面元素的 API
DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作

DOM


文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标 记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地 访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过 说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。

DOM 树

DOM 又称为文档树模型
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性

DOM 经常进行的操作

获取元素
对元素进行操作(设置其属性或调用其方法)
动态创建元素
事件(什么时机做相应的操作)

================================================================

DOM获取页面元素

获取页面元素（为什么要获取页面元素？）
- 例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作。
根据 id 获取元素
- 方法：调用 document 对象的 getElementById 方法
- 参数：字符串类型的 id 的属性值
- 返回值：对应 id 名的元素对象
- 注意
  - 由于 id 名具有唯一性，部分浏览器支持直接使用 id 名访问元素，但不是标准方式，不推荐使用。
  - 代码执行顺序，如果 js 在 html 结构之前，会导致结构未加载，不能获取对应id的元素。

<!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>
    
    <p id="p1">text1</p>
    <p id="p1">text2</p>
    <p id="p3">text3</p>

    <script>
        var p1 = document.getElementById("p1");
        console.log(p1);
        p1.style.backgroundColor= "blue"
    </script>
</body>
</html>

根据标签名获取元素

方法：调用 document 对象的 getElementsByTagName 方法
参数：字符串类型的标签名
返回值：同名的元素对象组成的数组
- 注意1：操作数据时需要按照操作数组的方法进行。
- getElementsByTagName 方法内部获取的元素是动态增加的


<!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>
    
    <p id="p1">text1</p>
    <p id="p1">text2</p>
    <p id="p3">text3</p>

    <script>
        var p1 = document.getElementsByTagName("p");
        console.log(p1);

        p1[1].style.backgroundColor = "pink";

        for(var i = 0;i<p1.length;i++){
            console.log("你好:  "+p1[i]);
        }

    </script>
</body>
</html>

元素对象内部获取标签元素

获取的元素对象内部，本身也可以调用根据标签获取元素方法，例如 div 元素对象也可以调用 getElementsByTagName 方法。
目的：缩小选择元素的范围，类似 css 中的后代选择器。


<!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>
    
    <div id="box1">
        <p>text1 of box1</p>
        <p>text2 of box1</p>
        <p>text3 of box1</p>
        <p>text4 of box1</p>
      </div>
      <div id="box2">
        <p>text1 of box2</p>
        <p>text2 of box2</p>
        <p>text3 of box2</p>
        <p>text4 of box2</p>
      </div>

    <script>
        var box1 = document.getElementById("box1");
        var pList = box1.getElementsByTagName("p");

        console.log(pList);

    </script>
</body>
</html>

根据 name 获取元素(了解)

方法：调用 document 对象的 getElementsByName 方法。
参数：字符串类型的 name 属性值。
返回值：name 属性值相同的元素对象组成的数组。
不建议使用：在 IE 和 Opera 中有兼容问题，会多选中 id 属性值相同的元素。

根据类名获取元素

方法：调用 document 对象的 getElementsByClassName 方法
参数：字符串类型的 class 属性值
返回值：class 属性值相同的元素对象组成的数组
浏览器兼容问题：不支持 IE8 及以下的浏览器

根据选择器获取元素

方法1：调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个符合条件的标签元素。
方法2：调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选取所有符合条件的标签元素。
参数：字符串类型的 css 中的选择器。
浏览器兼容问题：不支持 IE8 以下的浏览器

总结

掌握，没有兼容问题
getElementById()
getElementsByTagName() 了解
getElementsByName() 了解
getElementsByClassName()
querySelector()
querySelectorAll()