一、WebApi介绍

1. Api的概念

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

例如：

C语言又一个函数fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是C语言提供的打开文件的工具

javaScript中又一个alert() 可以在页面弹出一个提示框，这个函数就是js提供的一个弹框工具

这些工具（函数）由编程语言提供的，内部的实现已经封装好了，我们只需要学会应用这些工具即可。

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

因为api很多，所以我们将这个学习阶段就称为Web APIs

此处webapi特指是浏览器提供的一些api（就是函数或对象方法），即操作网页的一系列工具

2. API 和 WebApi总结

api是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用这个就可以了，不必纠结内部如何实现WebApi主要是针对浏览器提供的接口，主要针对于浏览器做交互效果WebApi一般都由输入和输出（函数传参 和 返回值），WebApi很多的方法（函数）都是这样学习WebApi可以结合前面你学习内置对象方法的思路学习

二. DOM（document）

1. 什么是DOM

Document Object Model ：文档对象模型。是W3C组织推荐的处理可扩展标记语言的标准编程接口W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、接口和样式。DOM 是W3C组织定义的一套处理html文档的规范，所有的浏览器都遵循了这个标准。

2. dom树

DOM树又称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面

文档：一个页面就是一个文档，DOM中用document表示节点：网页中的所有内容，在文档树中都有节点（标签、属性、文本、注释等等），使用node表示标签节点：网页中的所有的标签，通常称之为元素节点，又简称为“元素”，使用element表示

DOM把以上内容都看作是对象

三、获取元素的方式

为什么要获取页面的元素？

我们想要取操作页面的某个部分（显示/隐藏）需要先获取到该部分对应的元素，再来对其进行操作。

1. 根据ID获取

var obj = document.getElementById(id);

2.根据标签获取

var objs = document.getElementsByTagName('标签名');

或者 element(元素).getElementsByTagName('标签名');

3.根据类选择器获取

var reds = document.getElementsByClassName('类选择器名');

1. 根据ID获取

语法

var obj = document.getElementById(id);

作用：根据id获取元素对象参数：id是区分大小写的字符串返回值：元素对象 或者是null

案例

2. 根据标签获取

语法

var objs = document.getElementsByTagName('标签名'); 或者 element.getElementsByTagName('标签名');

作用：根据标签的名字获取元素对象参数：标签的名字返回值：元素对象集合 （伪数组，数组元素是元素对象）要返回具体值需要遍历

案例

• 总理同印度尼西亚总统通电话1
• 总理同印度尼西亚总统通电话2
• 总理同印度尼西亚总统通电话3
• 总理同印度尼西亚总统通电话4

• 听泉鉴宝称从未说过自己是北大的1
• 听泉鉴宝称从未说过自己是北大的2
• 听泉鉴宝称从未说过自己是北大的3

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历得到元素对象是动态的。即：当页面增加了标签，这个集合也就增加了元素。

3. 根据类选择器获取

语法

var reds = document.getElementsByClassName('类选择器名');

作用：根据类选择器的名字获取元素对象参数：类选择的名字返回值：元素对象集合 （伪数组，数组元素是元素对象） 要返回具体值需要遍历

案例

4. H5新增获取元素方式

语法

document.getElemensByClassName('类选择器名'); //根据类名返回元素对象集合

document.querySelector('选择器'); //返回指定选择器返回第一个元素对象

document.querySelectorAll('选择器'); //根据指选择器返回

注意：querySelector 和 querySelectorAll 选择器必须要添加符号。

如：document.querySelector(’#nav’); document.querySelector(’.blue’);

案例

5. 获取特殊元素(html,body)

获取body元素

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

获取html元素

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

//1.获取body元素

var bodyEle = document.body;

console.log(bodyEle);

console.dir(bodyEle);

//2.获取html元素

//var htmlEle = document.html; 没有这个语法

var htmlEle = document.documentElement;

console.log(htmlEle);

四、事件

1. 概述

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

2. 事件三要素

事件源（谁）：触发事件的元素事件类型（什么事件）：比如点击就是click事件处理程序（做什么）：事件触发后要执行的代码（代码以函数的形式组织），事件处理函数

唐伯虎

3. 执行事件的步骤

第一步：获取事件源注册事件（绑定事件）添加事件处理程序（采用函数赋值形式）

4. 常见的鼠标事件

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

5.操作元素

javaScript的Dom操作可以改变网页内容、结构和样式。我们可以利用dom操作来改变元素里面的内容、属性等

6. 改变元素内容

element.innerText

从起始位置到终点位置的内容，但是它会去掉html的标签，同时空格和换行也会被去掉 element.innerHTML

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

6.1 innerText

显示当前系统时间

这是p

6.2 innerHTML

显示当前系统时间

这是p

6.3 他们的区别

获取内容的时候有区别

innserText会去掉空格和换行，而innnerHTML会保留空格和换行 设置内容时的区别

innerText不会识别html，而innerHTML会识别

我是文字

123

7. 操作元素的属性

7.1 常用的元素属性

1.innerText 或 innerHTML改变元素的内容

2.src href

3.id alt title

7.2 获取属性的值

语法：

元素对象.属性名

7.3 设置属性的值

语法：

元素对象.属性名 = 值

刘德华

张学友

7.4 案例

需求：分时显示不同图片，显示不同的问候语

如果是上午时间打开页面，显示上午好，显示上午的图片 ( 6:00 - 12:00 不包括12点)如果是下午时间打开页面，显示下午好，显示下午的图片 (12:00 - 18:00 )如果是晚上时间打开页面，显示晚上好，显示晚上的图片 （18：00- 24:00)

8. 表单元素的属性操作

利用dom可以操作如下表单元素的属性：

type、value、checked、selected、disabled

8.1 获取属性的值

元素对象.属性名

8.2设置属性的值

元素对象.属性名 = 值

表单元素中有一些属性如：disabled、checked、selected元素对象这些属性的值是布尔型

按钮

解禁

8.3 案例

9. 样式属性操作

我们可以通过js修改元素的大小、颜色和位置等样式

常用方式

element.style 行内样式操作element.className 类名样式操作

9.1 style属性操作

元素对象style属性也是一个对象

元素对象.style.样式属性= 值

案例一

案例二

循环精灵图背景

案例三

9.2 操作className属性

元素对象.className = 值;

因为class是关键字，所以使用className