webAPIs（DOM,获取、修改DOM对象，样式修改，间歇函数（定时器），事件，环境变量this）

DOM

DOM介绍 ：

全称：Document Object Model（文档对象模型）
作用：可以修改网页的内容，实现各种网页特效，HTML里面每个标签成为一个DOM对象

获取DOM对象：

1… document.querySelector(“css的选择器”)
使用 document.querySelector 在获取元素的时候，如果没有找到相关的 DOM 对象，得到的结果为 【null】
它只能获取符合 CSS 选择器【第1个元素】
1-1… 标签选择器

1-2… 类选择器

1-3… 后代选择器

1-4… 子选择器

2… document.querySelectorAll(“css的选择器”)
可以获取符合 CSS 选择器的【全部元素】
使用 document.querySelectorAll() 会得到一个伪数组，如果没有找到是一个【空数组】
如果获取到的 DOM 对象是一个伪数组，那么需要对它进行遍历才可以使用，遍历的方法同数组一模一样！！！

修改DOM对象：

1… 修改内容
DOM对象.innerHTML ， DOM对象.innerText
（ inner 内部的意思，指的是双标签中间的部分 ）

1-1… DOM对象.innerHTML

1-2… DOM对象.innerText

1-3… innerHTML 和 innerText 区别就在于能否支持 html 标签的解析
innerHTML 能够解析
innerText 不能解析

2… 修改属性
DOM对象.HTML的【标准属性】
（例：img的src属性）

修改样式：

1… 通过style修改样式属性
box.style.css样式属性 = “值” ：style样式一次只能改一次
注：如果css属性包含了【-】那么要将【-】去掉，转成小驼峰的样式，【-】后的第一个字母大写（font-size=fontSize）

2… className
（类名不需要加 . ）
作用：是直接将原来的类名给【覆盖】掉

3… classList
作用：用来操作类名（类名不需要加 . ）
定义：DOM对象.classList.方法名（“类名”）
3-1… 添加类名
语法：DOM对象.classList.add（“类名”）

3-2… 删除类名
语法：DOM对象.classList.remove（“类名”）

3-3… 切换类名
如果存在某个类名，则会移除
如果不存在某个类名，则添加
语法：DOM对象.classList.toggle（“类名”）

3-4… 检测类名
语法：DOM对象.classList.contains（“类名”）
包含结果为 true
不包含结果为 false

间歇函数（定时器）：

定义：让代码【不间断】的重复执行，可以设置【每隔多长时间执行一次】
语法：aetInterval(函数，时间) （时间为毫秒）

清除定时器（使其停下来）
语法：clearInterval(某个定时器的返回值)

事件（DOM核心内容）：

概括：添加事件的3个要素：事件源，事件类型，事件回调
定义：
事件源：DOM对象
事件类型：【固定名称】的一些词语，比如click（点击事件），input（输入事件）等
事件回调：就是一个函数，只不过把这个函数当成了参数而已

1… 事件监听
1-1… 方法一
语法：事件源.on事件类名 = 事件回调

注意：使用方法一，会出现【相同的事件类型】被覆盖的现象

1-2… 方法二
语法：事件源.addEventListener(事件类型, 事件回调)

2… 事件类型
2-1… click 指用户的点击事件
2-2… input 指用户的输入事件
2-3… focus 指表单获得焦点事件
2-4… blur 指表单失去焦点事件
2-5… change 指表单勾选改变事件
2-6… mouseover 指鼠标悬停事件（类似于 hover）
具体事件类型表：
n事件类型表

环境变量this：

在函数中或全局中可以使用一个【固定】名称的变量 this，数据类型是一个对象
【事件回调函数中的 this 始终指的是事件源】

记住规律：谁调用就指谁