基本认知
变量声明：var let const
const 声明的值不能更改，const声明变量的时候需要里面进行初始化
但是对于引用数据类型， const声明的变量，里面存的不是值， 是地址
const arr = [1, 2, 3]
作用和分类
作用：就是使用JS去操作html和浏览器
分类：DOM(文档对象模型)、 BOM（浏览器对象模型）
什么是DOM（文档对象模型）
DOM(Domcument Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML 文档交互的API
DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM的作用：开发网页内容特效和实现用户交互
DOM树
DOM树是什么：将HTML文档以树状结构直观的表现出来，即文档书或DOM树
作用：文档树直观的体现了标签与标签之间的关系
DOM对象（重要）
-
DOM对象：浏览器根据html标签生成的 JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
-
DOM的核心思想
- 把网页内容当作 对象 来处理
-
document对象
- 是 DOM 里提供的一个 对象
- 所以它提供的属性和方法都是用 来访问和操作网页内容的
- 网页的所有内容都在document里
获取DOM对象
查找元素DOM元素就是利用 JS 选项页面中的标签元素
根据CSS选择器来获取DOM元素（重点）
1.选择匹配的第一个元素
语法：document.querySelector('css选择器')
参数：包含一个或多个有效的 CSS 选择器 字符串
返回值：CSS 选择器匹配的 第一个元素 ，一个HTMLElement对象；
如果没有匹配到，则返回null
2.选择匹配的多个元素
语法：document.querySelectorALL('css选择器')
参数：包含一个或多个有效的 CSS 选择器 字符串
返回值：CSS 选择器匹配的 NodeList 对象集合
根据CSS选择器来获取DOM元素（重点）
document.querySelectorALL('css选择器')
得到的是一个伪数组：
- 有长度有索引号的数组
- 但是没有 pop() 、 push() 等数组方法
想要得到里面的每一个对象， 则需要遍历获取
其他获取DOM元素的方法（了解）
操作元素内容
目标：能够修改元素的文本更换内容
DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象
就是操作对象使用的点语法
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
- 对象.innerText 属性
- 对象.innerHTML 属性
元素innerText 属性
将文本内容/更新到任意标签位置
显示纯文本，不解析标签
元素innerHTML 属性
将文本内容/更新到任意标签位置
会解析标签，多标签建议使用模板字符
操作元素属性
操作元素常用属性
可以通过 JS 设置/修改标签元素属性
最常见 的属性比如： href、title、src 等
语法对象.属性 = 值
操作元素样式属性
可以通过 JS 设置/修改标签元素的样式属性
1.通过 style 属性操作 CSS
对象.style.样式属性 = 值
小驼峰命名法，要加单位
2.操作类名（className）操作 CSS
元素.className = 'active'
由于class是关键字，所以使用 className 去代替
3.通过 classList 操作类控制 CSS
为了解决 className 容易覆盖以前的类名，我们可以通过 classList 方式追加和删除类名
语法：
操作表单元素 属性
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如： disabled、 checked、 selected
自定义属性
标准属性： 标签天生自带的属性 比如 class id title 等，可以直接使用点语法操作比如：disabled、checked、selected
自定义属性：
在 html5 中推出来了专门的 data-自定义 属性
在标签上一律以 data- 开头
在DOM对象上一律以 dataset 对象方式获取
