Web API
作用：就是使用JS去操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）
DOM
DOM是用来呈现以及与任意HTML或XML文档交互的API，简单来说就是操作网页的内容。
DOM树
将HTML文档以树状结构直观的表现出来，称之为文档树或DOM树。直观的体现了标签与标签之间的关系。
DOM对象
DOM对象 ：浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
核心思想：将网页当做对象处理
获取DOM元素
根据CSS选择器来获取DOM元素，查找DOM元素就是利用JS选择页面中标签元素
1.选择匹配的第一个元素
document.querySelector('css选择器')
返回值：css选择器匹配的第一元素，一个 HTMLElement对象，如果没有匹配到，则返回null。
<body><div class="box">选择第一个元素</div><div class="box">第二个元素</div><script>const box = document.querySelector('div')console.dir(box)</script>
</body> 
2.选择匹配的多个元素
语法：
document.querySelectorAll('css选择器')
返回值：css选择器匹配的NodeList对象集合
<body><ul><li>1</li><li>2</li><li>3</li></ul><script>const lis = document.querySelectorAll('ul li')console.dir(lis)</script>
</body>
得到的是一个伪数组，有长度和索引号，没有pop()push()等方法。想得到里面的每一个对象，则需要遍历(for)的方式获得。
操作元素内容
innerText
将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签
<div class="box">我是内容</div><script>const box = document.querySelector('.box')console.log(box.innerText);//直接获取元素box.innerText = '<strong>我是新内容</strong>'//修改文字内容</script>
innerHTML
会解析标签，多标签建议使用模板字符
将上面innerText修改成innerHTML。
操作元素属性
常用属性：还可以通过JS设置或修改标签元素属性，比如通过src更换图片。
语法：对象.属性=值
样式属性 ：通过style属性操作css
语法：对象.style.样式属性 = 值
如果是css中有短横线的例如background-color就按小驼峰命名法backgroundColor
