基本概念
概念：Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
作用：使用JS去操作html和浏览器，其中APIs分为DOM（文档对象模型）和BOM（浏览器对象模型）
DOM
1. DOM 介绍
1.1. 什么是DOM
概念：文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
DOM是浏览器提供的一套专门用来 操作网页内容 的功能。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM的作用：开发网页内容特效和实现用户交互。
DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。
1.2. DOM树
概念：将HTML文档以树状结构直观的表现出来，即文档书或DOM树。
作用：文档树直观的体现了标签与标签之间的关系
1.3. DOM对象（重要）
-
DOM对象：浏览器根据html标签生成的 JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
-
DOM的核心思想
- 把网页内容当作 对象 来处理
-
document对象
- 是 DOM 里提供的一个 对象
- 所以它提供的属性和方法都是用 来访问和操作网页内容的
- 网页的所有内容都在document里
2. 获取DOM对象
查找元素DOM元素就是利用 JS 选项页面中的标签元素
3. 根据CSS选择器来获取DOM元素（重点）
3.1. 选择匹配的第一个元素
语法：document.querySelector('css选择器')
参数：包含一个或多个有效的 CSS 选择器 字符串
返回值：CSS 选择器匹配的 第一个元素 ，一个HTMLElement对象；
如果没有匹配到，则返回null
3.2. 选择匹配的多个元素
语法：document.querySelectorALL('css选择器')
参数：包含一个或多个有效的 CSS 选择器 字符串
返回值：CSS 选择器匹配的 NodeList 对象集合
3.3. 根据CSS选择器来获取DOM元素（重点）
语法：document.querySelectorALL('css选择器')
得到的是一个伪数组：
- 有长度有索引号的数组
- 但是没有 pop() 、 push() 等数组方法
想要得到里面的每一个对象， 则需要遍历获取
3.4 其他获取DOM元素的方法（了解）
//根据id获取一个元素
document.getElementById( 'nav ' )
//根据标签获取一类元素获取页面所有
document.getElementsByTagName('div')
//根据类名获取元素获取页面所有类名为w的
document.getElementsByClassName('w')
操作元素内容
目标：能够修改元素的文本更换内容
DOM对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象
就是操作对象使用的点语法
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
- 对象.innerText 属性
- 对象.innerHTML 属性
元素innerText 属性
将文本内容/更新到任意标签位置
显示纯文本，不解析标签
元素innerHTML 属性
将文本内容/更新到任意标签位置
会解析标签，多标签建议使用模板字符
操作元素属性
1. 操作元素常用属性
可以通过 JS 设置/修改标签元素属性
最常见 的属性比如： href、title、src 等
语法对象.属性 = 值
2. v操作元素样式属性
可以通过 JS 设置/修改标签元素的样式属性
2.1. 通过 style 属性操作 CSS
对象.style.样式属性 = 值
小驼峰命名法，要加单位
2.2. 操作类名（className）操作 CSS
元素.className = 'active'
由于class是关键字，所以使用 className 去代替
2.3. 通过 classList 操作类控制 CSS
为了解决 className 容易覆盖以前的类名，我们可以通过 classList 方式追加和删除类名
//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')
2.4. 操作表单元素属性
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如： disabled、 checked、 selected
自定义属性
标准属性： 标签天生自带的属性 比如 class id title 等，可以直接使用点语法操作比如：disabled、checked、selected
自定义属性：
在 html5 中推出来了专门的 data-自定义 属性
在标签上一律以 data- 开头
在DOM对象上一律以 dataset 对象方式获取
