一，API
作用：用JS去操作html元素和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）
二，DOM
概念：操作网页内容的，就是操作文档标签的
作用：开发网页内容特效和实现用户交互
1，DOM树
- 将HTML文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
- 描述网页内容关系的名词
- 作用:文档树直观的体现了标签与标签之间的关系
2，DOM对象
概念：浏览器根据html标签生成JS对象，即在html中叫标签，去到js后就成了对象。
注：所有的标签属性都可以在这个对象上找到，只要修改了这个对象的属性，就会自动映射到标签上
获取和打印对象的例子：
三，DOM对象操作
1，获取DOM对象
- 根据CSS选择器来获取DOM元素(重点)
- 选择匹配的第一个元素语法: ```document.querySelector('css选择器')
- 参数:包含一个或多个有效的CSS选择器字符串
- 返回值: CSS选择器匹配的第一个元素,一个HTMLElement对象。如果没有匹配到，则返回null。
-
选择匹配的多个元素语法:
```document.querySelectorAll('css选择器') -
参数:包含一个或多个有效的CSS选择器字符串
-
返回值:CSS选择器匹配的NodeList 对象集合
-
例如:
document.querySelectorAll('ul li') -
获取一个DOM元素可以直接修改，但获取多个就不能直接修改了，只能通过遍历的方式给里面的元素修改。因为通过querySelector
-
获取到的是一个伪数组，即使里面只有一个元素，也会是数组对象的形式。伪数组有长度和索引但没有pop()、push()等数组的方法，所以只能采用for方法遍历出来。
2，操作元素内容（标签里的文字）
① .innerText文本内容
可以添加或者修改文本内容，但只能修改文字，里面的标签不解析
② .innerHTML文本内容
- 可以添加或者修改文本内容，而且对标签解析，多标签建议使用模版字符。
3，操作元素属性
①修改标签里的属性
语法： 对象.属性=值
②修改标签的样式
语法： 对象.style.样式属性=’值’
注：赋值时记得加单位，如果属性有连接符-，需要用小驼峰命名法
当需要修改的属性太多时，则需要写很多行代码，所以采用类名（className）的方法来修改样式
语法： 元素.className=’类名’
为了解决className容易覆盖原有的类名问题，采用了classList方式来进行追加和删除类名
语法
-
追加类----元素.classList.add( ‘ 类名**’**)
-
删除类----元素.classList.remove( ‘ 类名**’**)
-
切换类（有就删，没有就加）----元素.classList.toggle( 类名)
-
交换类-------- 元素.classList.replace(oldToken, newToken)
查看是否存在某个类：元素.classList.contains() 存在返回true，不存在返回false
③修改表单元素属性
修改表单里输入框提前输入的文本
设置按钮能不能按
④自定义属性的修改
访问自定义属性的值时，在DOM对象上是一律以dataset对象方法来获取
四，定时器-间歇函数
获取定时器id数字：
