失物不招领的前端学习日记（11）

APIs

一、Web APIs基本认知：

1.1作用和分类：

1）作用：使用JS去操作html和浏览器。
2）分类：DOM（文档对象模型）、BOM（浏览器对象模型）

1.2 DOM文档对象模型:

1、概念：DOM使用来呈现以及与任意HTML或XML文档交互的API，是浏览器提供的一套专门用来操作网页内容的功能。
2、作用：

1）开发网页内容特效和实现用户交互。

1.3 DOM树

1、概念：
eg.

1.4 DOM对象：（重要）

1、概念：

浏览器根据html标签生成的JS对象。

1）所有的标签属性都可以在这个对象上面找到。
2）修改这个对象的属性会自动映射到标签身上。

2、核心思想：

把网页内容当做对象来处理。

3、document对象：

二、获取DOM元素：

1、根据CSS选择器获取（重点）
2、其他获取DOM元素方法（了解）

2.1 根据CSS选择器获取DOM元素：

1.选择匹配的第一个元素：

document.querySelector(' css选择器 ')

1）参数：包含一个或多个有效的CSS选择器字符串
2）返回值：

a.CSS选择器匹配的第一个元素，一个HTMLElement对象。
b.如果么有匹配到，则返回null.

2.选择匹配的多个元素：

document。querySelectorAll(' css选择器 ')

1）参数：包含一个或多个有效的CSS选择器字符串。
2）返回值：CSS选择器匹配的NodeList对象集合。
3）得到一个伪数组：

注意：
a.想要得到里面的每一个对象，则需要遍历（for）的方式获得。
b.就算只有一个元素，querySelectorAll() 获取过来的也是一个伪数组，里面只有一个元素而已。

三、操作元素内容：

1.元素innerText：

1）将文本内容添加到任意标签位置。
2）显示纯文本，不解析标签。

2.元素.innerHTML属性：

1）将文本内容添加到任意标签的位置
2）会解析标签，多标签建议使用模板字符

eg.

四、操作元素属性：

4.1 操作元素常用属性：

语法：
对象.属性=值

4.2 操作元素样式属性：

1、通过style属性操作css

对象.style.样式属性=值

注意：

eg.

2、操作类名（className）操作CSS：

元素.className='active’

注意：
1）由于class是关键字，所以使用className去代替。
2）className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名。

eg.

3、通过classList操作类控制CSS：

元素.classList.add('类名') //追加一个类
元素.classList.remove('类名') //删除一个类
元素.classList.toggle('类名') //切换一个类

为了解决className容易覆盖以前的类名，通过classList方式追加和删除类名。
eg.

eg.

4.3操作表单元素属性：

DOM对象.属性名 //获取
DOM对象.属性名=新值 //设置

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果是false代表移除该属性。
比如：disabled、checked、selected
eg.

eg.

4.4自定义属性：

1、标签属性：
标签天生自带的属性，可以直接使用点语法操作。
2、自定义属性：

eg.

五、定时器-间歇函数：

1.开启定时器：

setInterval(函数，间隔时间)

作用：每隔多长时间调用这个函数
注意：

（1）间隔时间单位是毫秒。
（2）函数名字不需要加括号。
（3）定时器返回的是一个id数字。

eg.

eg.

2.关闭定时器：

let 变量名=setInterval(函数，间隔时间)
clearInterval(变量名)

（1）函数名字不需要加括号。
（2）定时器返回的是一个id数字。

六、事件监听：（绑定）

6.1 事件监听：

元素对象.addEventListner('事件类型',要执行的函数)

事件监听三要素：
（1）事件源：那个dom元素被事件触发了，要获取dom元素
（2）事件类型：用什么方式触发，比如鼠标单击click，鼠标经过mouseover等。
（3）事件调用的函数：要做什么事。

eg.

6.2事件监听版本：

七、事件类型：

7.1鼠标事件：

属性：
click鼠标点击
mouseenter鼠标经过
mouseleave鼠标离开

7.2焦点事件：

属性：
focus获得焦点
blur失去焦点

eg.

7.3键盘事件：

属性：
keydown键盘按下触发
keyup键盘弹起触发

eg.

7.4文本事件：

属性：
input用户输入事件

八、事件对象：

8.1获取事件对象：

概念：在事件绑定的回调函数的第一个参数就是事件对象。
命名：一般命名为event、ev、e。

1、语法：

元素.addEventListner('click',function(e){
 })

8.2事件对象常用属性：

1、部分常用属性：

属性	作用
type	获取当前的事件类型
clientX / clientY	获取光标相对于浏览器可见窗口左上角的位置
offsetX / offsetY	获取光标相对于当前DOM元素左上角的位置
key	用户按下的键盘键的值，现在不提倡使用keyCode

eg.

九、环境对象：

1、概念：指的是函数内部特殊的变量this，代表当前函数运行时所处的环境。
2、作用：清楚this指向，让代码更简洁。

注意：

eg.

十、回调函数：

1、概念：将函数A作为参数传递给函数B时，称函数A为回调函数。
2、理解：当一个函数做参数来传递给另一个函数的时候，这个函数就是回调函数。
3、常见使用场景：