一、变量声明
变量声明有三个 var let 和 const
我们应该用那个呢？
首先var 先排除，老派写法，问题很多，可以淘汰掉…
l
et or const ?
建议：
const 优先
，尽量使用const，原因是：
const 语义化更好
很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
实际开发中也是，比如react框架，基本const
如果你还在纠结，那么我建议：
有了变量先给const，如果发现它后面是要被修改的，再改为let
请问以下的 可不可以把let 改为 const？
回答：可以，因为他们的值没有变过。
请问以下的 可不可以把let 改为 const？
回答：不可以，因为变量进行了重新赋值。
const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
但是对于引用数据类型，const声明的变量，里面存的不是 值，不是值，不是值，是 地址。
二、Web API 基本认知
2.1作用和分类
作用: 就是使用 JS 去操作 html 和浏览器
分类：
DOM
(文档对象模型)、
BOM
（浏览器对象模型）
2.2 什么是DOM
DOM（Document Object Model——
文档对象模型
）是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文：
DOM是浏览器提供的一套专门用来
操作网页内容
的功能。
DOM作用：
开发网页内容特效和实现用户交互。
2.3 DOM树
DOM树是什么？
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：
文档树直观的体现了标签与标签之间的关系
2.4 DOM对象（重要）
DOM对象：浏览器根据html标签生成的
JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
DOM的核心思想：把网页内容当做
对象
来处理。
document 对象：
是 DOM 里提供的一个
对象
所以它提供的属性和方法都是
用来访问和操作网页内容的
例：document.write()
网页所有内容都在document里面
三、获取DOM对象
3.1 根据CSS选择器来获取DOM元素 (重点)
1. 选择匹配的第一个元素
语法：
参数：
包含一个或多个有效的CSS选择器
字符串。
返回值：CSS选择器匹配的
第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。
多参看文档：https://developer.mozilla.org/zh-***/docs/Web/API/Document/querySelector
2. 选择匹配的多个元素
语法：
参数：
包含一个或多个有效的CSS选择器
字符串
返回值：
CSS选择器匹配的
NodeList 对象集合
例如：
得到的是一个
伪数组
：
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。
注意：
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个
伪数组
，里面只有一个元素而已
3.2 其他获取DOM元素方法（了解）
四、操作元素内容
1. 元素innerText 属性
将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签
举例说明：
2. 元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
会解析标签，多标签建议使用模板字符
举例说明：
问题：
1. 设置/修改DOM元素内容有哪2钟方式？
回答：元素.innerText 属性、元素.innerHTML 属性
2.
三者的区别是什么？
回答：
（1）元素.innerText 属性 只识别文本，不能解析标签
（2）元素.innerHTML 属性 能识别文本，能够解析标签
（3）如果还在纠结到底用谁，你可以选择innerHTML
五、操作元素属性
5.1 操作元素常用属性
还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
最常见的属性比如： href、title、src 等
语法：
举例说明：
5.2 操作元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
比如通过 轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片，这是移动的图片的位置 left 等等
学习路径：
1.
通过 style 属性操作CSS
2.
操作类名(className) 操作CSS
3.
通过 classList 操作类控制CSS
1.通过 style 属性操作CSS
语法：
举例说明：
注意：
1. 修改样式通过
style
属性引出
2.
如果属性有
-
连接符，需要转换为
小驼峰
命名法
3. 赋值的时候，需要的时候不要忘记加
css单位
2. 操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：
注意：
1.
由于class是关键字, 所以使用className去代替
2.
className是使用新值
换
旧值, 如果需要添加一个类,需要保留之前的类名
3.
通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
5.3 操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性。比如： disabled、checked、selected
5.4 自定义属性
标准属性:
标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected。
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
六、定时器-间歇函数
网页中经常会需要一种功能：每隔一段时间需要
自动
执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
要实现这种需求，需要定时器函数
定时器函数可以开启和关闭定时器。
1. 开启定时器
作用：每隔一段时间调用这个函数，间隔时间单位是毫秒。
举例说明：
注意：
1. 函数名字
不需要加括号
2. 定时器返回的是一个id数字
2. 关闭定时器
一般不会刚创建就停止，而是满足一定条件再停止
注意：
1. 函数名字
不需要加括号
2. 定时器返回的是一个id数字
