一：Web API 基本認知
作用: 就是使用 JS 去操作 html 和瀏覽器
分類：分類：DOM (文檔對象模型)、BOM（瀏覽器對象模型）
二：Dom
什么是dom？
DOM（Document Object Model）文檔對象模型 是用來呈現(xiàn)以及與任意 HTML 或 XML文檔交互的API【DOM是瀏覽器提供的一套專門用來 操作網(wǎng)頁內(nèi)容 的功能】
DOM的作用：
1.實現(xiàn)網(wǎng)頁特效
2.實現(xiàn)用戶交互
Dom樹
HTML 文檔以樹狀結(jié)構(gòu)直觀的表現(xiàn)出來
能直觀的體現(xiàn)了標簽與標簽之間的關(guān)系
Dom對象（重要）
什么是dom對象砌梆？---瀏覽器根據(jù)html標簽生成的 JS對象
dom對象的核心思想：把網(wǎng)頁內(nèi)容當作對象來處理
document對象
是dom里提供的一個對象，它提供的屬性和方法都是用來訪問和操作網(wǎng)頁內(nèi)容的
例：document.write()
網(wǎng)頁所有內(nèi)容都在document里面
怎么獲取dom對象呢村象？
獲取單個元素
根據(jù)CSS選擇器來獲取DOM元素 (重點)
語法：
document.querySelector('css選擇器')
它獲取的是匹配的第一個元素Ｎ峦А！像吻！
參數(shù)（css選擇器）要填寫字符串內(nèi)容＞颉８绰 ！
返回值：匹配到的第一個元素姆涩，沒有的話就返回null
獲取多個元素
document.querySelector只能獲取一個元素挽拂，那么我們想要獲取多個元素用什么方法呢？---document.querySelectorAll
語法：
document.querySelectorAll('css選擇器')
參數(shù)也要填寫字符串內(nèi)容
返回值是一個對象集合（偽數(shù)組）骨饿，沒有值的話就返回一個空的偽數(shù)組
什么是偽數(shù)組亏栈？
偽數(shù)組：
? 有l(wèi)ength長度、索引號
? 但是沒有 pop() push() 等數(shù)組方法
?想要得到里面的每一個對象样刷，則需要遍歷（for）的方式獲得
其他獲取DOM元素方法（了解）
// 通過id名來獲取
console.log(document.getElementById('box'))
// 通過類名來獲取
console.log(document.getElementsByClassName('ul')) // 也是個偽數(shù)組
// 通過標簽名來獲取
console.log(document.getElementsByTagName('h1'))
設置/修改DOM元素內(nèi)容
如果想要修改標簽元素的里面的內(nèi)容仑扑，則可以使用如下方式：
對象.innerText 屬性：
元素innerText 屬性
? 能夠操作標簽的內(nèi)容
? 文本中包含的標簽不會被解析
語法：
let divObj = document.querySelector('div') // js對象（DOM對象）
// innerText 設置內(nèi)容（純文本） 使用等號賦值即可
divObj.innerText = '綠色的回憶，可綠了'
對象.innerHTML 屬性
如果想要解析標簽呢置鼻？innerText屬性并不能解析標簽镇饮，此時要用到innerHTML屬性，這也是工作中比較推薦的一種屬性方法箕母。
元素.innerHTML 屬性
? 能夠操作標簽的內(nèi)容
? 文本中包含的標簽會被解析
語法：
// innerHTML 設置內(nèi)容（帶標簽） 標簽是生效的（可以被解析 生效了）
divObj.innerHTML = '<h2>這是修改后的</h2>'
注意：
docuemnt.querySelectorAll('div') querySelectorAll querySelector 都是方法储藐，需要()
divObj.innerHTML = '內(nèi)容' innerHTML 都是屬性，使用等號來賦值即可
設置/修改DOM元素屬性
想要修改DOM元素屬性的前提嘶是，都是必須先要獲取到要修改的元素钙勃。必須先使用documentquerySelector獲取元素，才能進行修改操作聂喇。
設置/修改元素常用屬性
可以通過JS 設置 / 修改標簽元素屬性辖源，比如通過 src 更換圖片 l 最常見的屬性 比如： href、title希太、src 等
對象.屬性 = 值克饶；
設置/修改元素樣式屬性
一. 通過類名操作CSS
①. className屬性
// 使用className操作類名修改樣式
let divObj = document.querySelector('div')
// 語法：DOM對象.className = '類名'
divObj.className = 'active'
注意：
- 由于class是關(guān)鍵字, 所以使用className去代替
- 有覆蓋問題
②. classList 語法
使用classList操作類名修改樣式
classList.add() 追加
divObj.classList.add('active')
classList.remove() 刪除
divObj.classList.remove('one')
classList.toggle() 切換（如果元素有該類名，會移除該類名誊辉，沒有該類名矾湃，添加上該類名）沒有就添加，有就移除
divObj.classList.toggle('one') // 沒有就添加堕澄，有就刪除
二. 通過 style 屬性操作CSS
對象.style.樣式屬性 = 值邀跃；
divObj.style.width = '100px'
注意：
1.不要落下單位px，否則設置無效
2.對于有中劃線的蛙紫，需要遵守駝峰式寫法 比如 font-size z-index...
設置/修改 表單元素 屬性
語法
// 獲扰男肌： 對象.屬性名
// 設置： 對象.屬性名 = 值
1.value屬性
// 獲取
console.log(inp1.value)
// 設置
inp1.value = '我們都會月薪過萬的
2.type屬性
// type屬性
// 獲取
console.log(inp1.type)
// 設置
inp1.type = 'password' // 設置為密碼框
布爾值的屬性（disabled、checked坑傅、selected）
// 布爾類型的屬性 （disabled丽涩、checked、selected）
// 布爾類型（true 和 false）
// 就是說裁蚁，以上屬性的值矢渊，要么是true，要么false
inp1.disabled = true // true 表示要禁用 inp1
inp1.disabled = false // false 表示去掉禁用 inp1
inp2.checked = false // 不選中
定時器函數(shù)
使用場景：網(wǎng)頁中的倒計時枉证、輪播圖的自動切換效果
定時器函數(shù)作用：每隔一段時間矮男，重復調(diào)用一個函數(shù) 間隔時間單位是毫秒
- 開啟定時器
setInterval(函數(shù), 間隔時間)
2.關(guān)閉定時器
clearInterval(定時器id)
參數(shù)： 定時器的id 是當setInterval開啟定時器的時候，返回值（是開啟的定時器的id）
案例：用戶注冊倒計時
// 用戶注冊倒計時
// 按鈕60秒之后才可以使用
// 分析步驟
// 1. 先獲取到按鈕
// 2. 將按鈕禁用 ==> disabled 布爾類型屬性
// 3. 倒計時效果 每間隔一秒來更新下按鈕的內(nèi)容
// 定時器 + innerHTML
// 4. 倒計時結(jié)束了 為0的時候室谚，要干啥
// 4.1 去掉禁用效果
// 4.2 修改按鈕的文字
// 4.3 關(guān)閉定時器
// 1.
let btnObj = document.querySelector('.btn') // 元素 DOM對象
console.log(btnObj)
// 2.
btnObj.disabled = true // 按鈕真的禁用了
let num = 6 // nun變量表示倒計時從6開始
// 3.
let timerId = setInterval(function () {
console.log('測試代碼')
// num-- 需要每間隔一秒來執(zhí)行一次
num--
console.log(num) // 6 5 4 3 2 1 0
btnObj.innerHTML = `我已經(jīng)閱讀用戶協(xié)議(${num})`
// 注意if位置不要跑偏毡鉴，寫在定時器的函數(shù)里面
if (num === 0) {
// num為0，倒計時結(jié)束
// 去掉禁用效果
btnObj.disabled = false
// 關(guān)閉定時器
clearInterval(timerId)
// 修改按鈕的內(nèi)容
btnObj.innerHTML = '我已經(jīng)同意該協(xié)議秒赤！'
}
}, 1000)
