（二）Web APIs
1.基本认知
（1）作用与分类
1.作用：使用js去操作html和浏览器。
2.分类：DOM（文档对象模型）、BOM（浏览器对象模型）
（2）DOM
1.定义
DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。
3.DOM对象
1.浏览器根据html标签生成的js对象，把html标签当作DOM对象。
2.document对象是最大的对象，属性和方法都用来访问和操作网页内容的，网页所有内容都在document里面。
2.获取DOM对象
（1）根据CSS选择器获取
1.选择匹配的第一个元素
语法：document.querySelector('css选择器')
参数：包含一个或多个CSS选择器字符串
返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，返回null。
<body>
<div class="box">123</div>
<p id="nav">导航栏</p>
<ul class="nav">
<li>测试1</li>
<li>测试2</li>
</ul>
<script>
//1. 获取匹配的第一个元素
const box = document.querySelector('div')
//或者const box = document.querySelector('.box')
console.log(box)
const nav = document.querySelector('#nav')
console.log(nav)
//可以直接修改
nav.style.color = 'red'
//获取第一个小 ul li
const li = document.querySelector('ul li:first-child')
</script>
</body>
2.选择匹配的多个元素
语法：document.querySelectorALL('css选择器')
参数：包含一个或多个CSS选择器字符串
返回值：CSS选择器匹配的NodeList对象集合。如果没有匹配到，返回null。
备注：得到的是一个伪数组：
1.有长度有索引号的数组
2.没有pop( )、push( )等数组方法
3.想要得到每一个对象，需要遍历(for)。
//选择所有的小li
const lis = document.querySelectorAll('ul li')
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]) // 每一个小li对象
}
//就算只有一个p，也得到伪数组
const p = document.querySelectorAll('#nav')
console.log(p)
p[0].style.color = 'red'
（2）其他获取方法
1.根据id获取一个元素：document.getElementById('nav')
2.根据标签获取一类元素：document.getElementsByTagName('div')
3.根据类名获取元素：document.getElementsByClassName('w')
3.操作元素内容
（1）innerText属性
innerText将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
<body>
<div class="box">我是文字的内容</div>
<script>
//获取元素
const box = document.querySelector('.box')
//修改文字内容 对象.innerText 属性
console.log(box.innerText) // 获取文字内容
box.innerText = '我是一个盒子' // 修改文字内容
box.innerText = '<strong>我是一个盒子</strong>' // 显示纯文本，不解析标签
</script>
</body>
（2）innerHTML属性
innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。
console.log(box.innerHTML)
box.innerHTML = '我要更换'
box.innerHTML = '<strong>我要更换</strong>' //解析标签
备注：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。
