一 DOM-获取元素
DOM是操作页面文档，开发网页特效和实现用户交互。
document是DOM顶级对象
document.write()
1.1 获取DOM元素
CSS选择器来获取DOM元素
选择匹配的第一个元素：document.querySelector('css选择器')
console.dir(对象) ：用来输出对象格式数据
选择匹配的多个元素对象：document.querySelectorAll('css选择器')，获取到伪数组，类型Prototype是NodeList，不是Array
其他获取DOM元素方法
doument.getElementById('id')
doument.getElementsByClassName('类名')，此时不用加.,不是类选择器
doument.getElementsByTagName('标签名')
doument.getElementsByName('name')，通过name属性获取，如input标签有name属性
二 DOM-操作元素
元素.innerText：不解析标签，获取时只获取文本
元素.innerHTML：解析标签，获取时也获取标签
2.1 操作元素常用属性
href、title、src
对象.属性 = 值
2.2 操作元素样式属性
1、通过style属性操作元素样式
对象.style.样式属性= 值，一般都要加单位，这里用style属性设置的是行内样式，权重较高--适合修改很少的情况
Js中拼接字符串用``符号
2、通过类名（className）属性操作元素样式
对象.className = 'active' ，会把之前的类名替换成新值，一般用来获取类名，用处不大
3、通过classList操作元素样式
前面两个都是属性，这个是方法
对象.classList.add('类名')：追加指定类名
对象.classList.remove('类名')：移除指定类名
对象.classList.toggle('类名')：有则删除指定类名，没有添加指定类名
对象.classList.contains('类名') ：判断指定类名
以上不会影响已有类名。
注意，获取标签的后代，可以用标签对象的querySelector()方法，类似document
`li:nth-child(${random+1})` 选择第几个li，并且字符串中的参数是动态的，轮播图让小圆点消失变化：先删除原来的类名，再增加新的类名
2.3 操作表单元素属性
获取：DOM对象.属性
设置：DOM对象.属性=新值
value属性
type属性
属性选择器： [type="text"]
单选或复选按钮：checked
禁止使用表单：按钮类：disabled
下拉菜单，某一项是否被选中：selected ，选择器： select option:last-child
2.4 自定义属性
标准属性：id，class，title标签自带
自定义属性：html5中以data-自定义属性，在DOM对象上一律以dataset对象方式获取。
在标签上 定义 data-xxxx属性，获取在js中用对象的dataset获取对应xxxx的值。
三 定时器-间隔函数
开启定时器
const timerId = setInterval(函数，间隔时间) ，单位毫秒，间隔指定时间循环
关闭定时器
clearInterval(timerId)，所以可以控制循环次数和终止时机
四 事件基础
4.1 事件监听
定义
也叫事件绑定，事件注册，语法：
方式1：元素对象.addEventListener(‘事件类型’，事件处理函数)，不会同名覆盖
方式2：事件源.on事件类型= function(){} -- 老的实现方式，不好的是多个同样事件会覆盖
事件源：元素对象
事件类型：click等
回调函数：当作参数的函数，回头调用的函数，常用匿名函数实现
4.2 事件类型
这些事件可以手动调用的， 元素.click()
鼠标事件
click：点击
mouseenter：经过
mouseleave：离开
js调用鼠标的点击事件，主动执行点击事件方式：对象.click()，然后会执行这个对象绑定的click事件函数
let变量，可以在多个小括号里面服用，相当于类的属性。程序关闭和开启定时器，开启之前要先清一下比较稳妥
焦点事件
主要是表单元素
focus ， 对象.focus()[自动获取焦点]
blur
文本事件
input用户输入事件，表单value被修改时触发
键盘事件
keydown
keyup
注：opacity:0 透明度
4.3 事件对象
事件对象包含事件触发时的相关信息，包含属性和方法
语法：注册事件中，回调函数的第一个参数就是事件对象，一般命名为event， 元素.addEventListener('click',function(event){})
event属性：
key：键盘事件有值，当前按键的值
target：触发事件的元素
4.4 环境对象-this
基础：谁调用，this就是谁。直接调用函数相当于window.函数，this指的是window
排他思想：排除所有人，再给我自己加，核心原因是不知道下一个是谁
4.5 事件流
事件流指的是事件完整执行过程中的流动路径。当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段。
捕获：当一个元素的事件被触发时，会从DOM的额根元素开始依次调用同名事件（从外到里，外指的是Document，里值得是最小的那个元素）
代码：DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制true)
冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。addEventListener的第三个参数传false时，默认是冒泡false
阻止冒泡：把事件限制在当前元素内。语法：事件对象.stopPropagation()
4.6 移除事件监听
4.7 其他事件
4.8 元素尺寸与位置
