Web API 基本认知
作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）
DOM树是什么
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系
什么是DOM
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM作用 :开发网页内容特效和实现用户交互
DOM对象：
浏览器根据html标签生成的 JS对象 所有的标签属性都可以在这个对象上面找到 修改这个对象的属性会自动映射到标签身上
DOM的核心思想:
把网页内容当做对象来处理
document 对象 :
是 DOM 里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的 例：document.write()
网页所有内容都在document里面
获取DOM元素
查找元素DOM元素就是选择页面中标签元素
1.根据CSS选择器来获取DOM元素
.1.1选择匹配的第一个元素
语法：document.querySelector(`css选择器`)
参数：包含一个或多个有效的CSS选择器字符串
返回值：css选择器匹配的第一个元素，一个 HTMLElement对象,如果没有匹配到，则返回null
1.2 选择匹配的多个元素
语法：document.querySelectorAll(`css选择器`)
参数: 包含一个或多个有效的CSS选择器 字符串
返回值： CSS选择器匹配的NodeList 对象集合
例如：document.querySelectorAll(`ul li`)
querySelectorAll() 方法获取到的元素能直接修改吗？
如果不能可以怎么做到修改？ 不可以， 只能通过遍历的方式。依次给里面的元素做修改
querySelectorAll()获取的是一个伪数组
document.querySelectorAll(`css选择器`)
得到的是一个伪数组： 有长度有索引号的数组，但是没有 pop() 、push() 等数组方法 ，想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
设置/修改DOM元素内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
document.write() 方法
对象.innerText 属性
对象.innerHTML 属性
1. document.write() 只能将文本内容追加到 </body> 前面的位置 ，文本中包含的标签会被解析
2. 元素innerText 属性 将文本内容添加/更新到任意标签位置 文本中包含的标签不会被解析
3.元素innerHTML属性将文本内容添加/更新到任意标签位置 文本中包含的标签会被解析
如：span.innerHTML=`<p>你好</p>`
设置/修改DOM元素属性
可以通过 JS 设置/修改标签元素属性
比如通过 src更换 图片 最常见的属性比如： href、title、src 等
语法：对象，属性=值
例如：
<body><img src="" alt=""><script>let pic=document.querySelector(`img`)pic.src=`./1jpg`</script></body>
还可以通过 JS 设置/修改标签元素的样式属性。
1通过 style 属性操作CSS
语法：对象.style.样式属性=值
<body><div>你好</div><script>let divdom=document.querySelector(`div`)divdom.style.backgroundColor=`red`</script></body>
注意：
修改样式通过style属性引出 如果属性有-连接符，需要转换为小驼峰命名法 赋值的时候，需要的时候不要忘记加css单位
2. 操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
语法：元素.className=`css类名`
由于class是关键字, 所以使用className去代替 className是使用新值换旧值
如果需要添加一个类,需要保留之前的类名
3.通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
元素.classList.add(`类名`)//追加一个类元素.classList.remove(`类名`)//删除一个类元素.classList.toggle(`类名`)//如果有这个类名了则删除这个类名，如果没有这个则添加类名
classList 是追加和删除不影响以前类名
3. 设置/修改 表单元素 属性
获取: DOM对象.属性名 设置: DOM对象.属性名 =新值
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性 比如： disabled、checked、selected
定时器-间歇函数
使用场景：网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发 例如：网页中的倒计时 要实现这种需求，需要定时器函数 定时器函数有两种，今天我先讲间歇函数
基本使用：定时器函数可以开启和关闭定时器
注意： 1函数名字不需要加括号 ，定时器返回的是一个id数字
2. 关闭定时器 一般不会刚创建就停止，而是满足一定条件再停止
