一、web API 的基本认知

作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）

DOM：DOM（Document Object Model）文档对象模型是用来呈现以及与任意 HTML 或 XML文档交互的API
作用：1.实现网页特效
2.实现用户交互

DOM树：1.将 HTML 文档以树状结构直观的表现出来
2.作用：文档树直观的体现了标签与标签之间的关系

DOM对象：浏览器根据html标签生成的 JS对象
DOM的核心思想：把网页内容当做对象来处理

二、获取DOM元素

querySelector
语法：document.querySelector('css选择器') document 文档 query 查询 Selector 选择器
参数：css选择器
作用：从文档中来根据css选择器获取元素
返回值: 匹配的第一个元素, 如果没有匹配到，则返回null
querySelectorAll
语法：
参数：css选择器
作用：获取到所有的
返回值: 元素集合
querySelector 和 querySelectorAll区别
querySelector 获取第一个获取不到的结果是null
querySelectorAll 获取所有的返回的始终是个伪数组
伪数组
和数组长的像（数字下标、 length属性）可以和数组一样进行for循环遍历
无法使用数组的方法 push pop ....

演示其他获取元素语法（了解）
通过id名来获取
document.getElementById('box')
通过类名来获取
document.getElementsByClassName('box')
通过标签名来获取
document.getElementsByTagName('ul')

三、修改元素内容-------innerText innerHTML

1.innerText

    // 一定要先获取到元素
    let divObj = document.querySelector('div')
    // console.log(divObj)

    // innerText 获取内容
    console.log(divObj.innerText)

    // innerText 设置内容（纯文本） 等号赋值即可
    divObj.innerText = '哈哈，内容被我修改了'

    // innerText 设置内容（带标签）   不识别解析标签
    divObj.innerText = '<h1>哈哈，内容被我修改了</h1>'

2.innerHTML

    // innerHTML 获取内容
    console.log(divObj.innerHTML)

    // innerHTML 设置内容（纯文本）
    divObj.innerHTML = '这是使用innerHTML修改的内容'

    // innerHTML 设置内容（带标签）  可以识别解析标签
    divObj.innerHTML = '<h1>这是使用innerHTML修改的内容</h1>'

细节：innerText 与 innerHTML 设置内容的时候，会覆盖原有的内容
如何实现把原本的内容也带上？

    divObj.innerHTML += '<h1>这是使用innerHTML修改的内容</h1>'
    // 本质上： divObj.innerHTML = divObj.innerHTML + '<h1>这是使用innerHTML修改的内容</h1>'
    //      把原本的内容先获取到了，在拼接上h1的内容，最后设置作为div的内容展示出来

四、修改元素属性

1.设置/修改元素常用属性（src 、title等属性）
语法：对象.属性 = 值

2.通过类名操作CSS

js使用className操作类名修改样式
语法：元素.className = '类名'

    divObj.className = 'active' // ok

    // 无效的
    // divObj.class = 'active'

注意说明：
1. 在JS中使用className表示类名，因为class在js中是个关键字在标签上，class属性表示类名，但在js中使用className表示类名
2. 使用className有覆盖问题

使用classList操作类名修改样式
classList.add() 添加类名不会有覆盖问题理解为是追加效果
classList.remove() 移除类名
classList.toggle() 切换类名（如果有该类名，会移除掉，如果没有该类名，会添加该类名）

说明：
classList 和 className之间的区别
className 存有覆盖问题
classList 是不存在覆盖问题

属性和方法的区分

    // className 是属性，不能当方法加() 来使用
    divObj.className('active')  // error
    divObj.className = 'active'   // ok

    // classList.add 是个方法，加() 使用的
    divObj.classList.add = 'active' // 错误写法
    divObj.classList.add('active')

3.通过style控制样式属性
语法：对象.style.样式属性名 = 值
通过style操作样式本质上设置行内样式

  注意点
   1. 遵守驼峰式写法
   2. 不要落下单位px单位, 否则没有效果

4.表单的属性设置（value、type、disabled、checked、selected）
语法
获取：对象.属性名
设置：对象.属性名 = 值

 布尔类型的属性 （disabled、checked、selected）
 true false
以上这三个属性的值是true false

补充个细节
// 当设置的值不是布尔类型（true、false），底层进行隐式转换的
// 'false' 隐式转换为布尔类型（true）所以以下代码是禁用效果
// inp1.disabled = 'false'  // false   'false' 字符串
inp1.disabled = ''  // 不禁用

回顾：哪些数据会转成布尔类型false
     '' null undefined NaN false 0 不成立的表达式 比如3 > 5

五、定时器函数

定时器函数
作用: 每隔一段时间，就会来调用函数

开启定时器语法:
setInterval(函数, 间隔时间)
间隔时间单位是ms

注意易错
如下写法，会将fn() 立即调用，就没有了定时效果
setInterval(fn(), 1000) // 错误效果

关闭定时器
语法：clearInterval(定时器id)

D1.DOM-获取DOM元素、修改属性