一、webapis简介
作用：就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)
BOM（浏览器对象模型)
元素本身： 获取元素 创建元素 增加元素 删除元素 元素内容 获取内容 修改内容 -- 删除内容-设置内容 元素属性 修改属性 获取属性 添加属性 删除属性
DOM
概念：DOM是浏览器提供的一套专门用来操作网页内容的功能
作用：操作网页内容，可以开发网页特效和实现用户交互
DOM树：
将 HTML 文档以树状结构直观的表现出来
作用：文档树直观的体现了标签与标签之间的关系
DOM对象:
浏览器根据html标签生成的 JS对象
核心思想:把网页内容当做对象来处理
document对象:
是 DOM 里提供的一个对象
提供的属性和方法都是用来访问和操作网页内容的
网页所有内容都在document里面
获取DOM对象
根据CSS选择器来获取DOM元素
1.querySelector
获取一个DOM元素，能直接操作修改
语法:querySelector（’css选择器‘）
返回值:匹配的第一个元素, 如果没有匹配到，则返回null
2.querySelectorAll
获取多个DOM元素，不能直接修改，只能通过遍历（for）的方式以此给元素做修改
语法:querySelectorAll（’css选择器‘）
返回值:无论有没有获取到元素，返回的都是伪数组
伪数组:
伪数组的本质是一个对象，有长度属性，可以遍历，但是不能调用数组的相关api
①.有length长度、索引号
②.但是没有 pop() push() 等数组方法
注意事项:
里面写css选择器，必须是'字符串'
设置/修改DOM元素内容
1.对象.innerText 属性，不识别解析标签
2.对象.innerHTML 属性，可以识别解析标签，优先使用
3.两者使用时会覆盖原有的内容
console.log(textarea.innerText) // 完全拿不到
console.log(textarea.innerHTML) // 只能获取到默认内容
console.log(textarea.value) // 可以获取更新后的内容--正确的姿势
设置/修改DOM元素属性
一、常用属性
语法：对象.属性 = 值，比如： href、title、src 等
二、样式属性：
1.通过类名操作CSS
className属性 存在覆盖问题
classList 语法
classList.add() 添加类名
classList.remove() 移出类名
classList.toggle() 切换类名，有就移除，没有就添加
不存在覆盖问题
注意说明
1.在JS中,className表示类名，class在js中是个关键字
2.在标签上，class属性表示类名，但在JS中className表示类名
属性和方法的区别
元素.className是属性，不能当方法加（）
元素.classList.add是方法，需要加（）使用
2.通过 style 属性操作样式
语法：对象.style.样式属性名 = 值
本质上是设置行内式
注意点
1. 遵守驼峰式写法
2. 不要落下单位px单位
3.设置背景图片，图片路径写在url() 里面
元素.属性 的操作方式 只适用于 内置属性（本身就拥有的属性）
是为style对象中的某个样式属性 进行赋值
三、表单元素属性
属性设置 （value、type、disabled、checked、selected）
语法：
1.获取： 对象.属性名
2.设置： 对象.属性名 = 值
布尔类型属性(true / false)
1.checked
true真的选中了
false没有选中
2.disabled
true真的禁用了
false没有禁用
3.selected
细节
当设置的值不是布尔类型，底层进行隐式转换
'false'隐式转换为true，所以以下代码是禁用效果
哪些数据会转成布尔类型false：'' null undefined NaN false 0 不成立的表达式
定时器
作用：每间隔一段时间就来调用函数
开启：let timerId = setInterval(函数, 间隔时间) 间隔时间 单位是ms
关闭：clearInterval(timerId) timerId 是定时器的id
注意
1.函数名字不需要加括号
2.定时器返回的是一个id数字
定时器的函数不会立即执行，而是间隔 时间之后再执行
