掌握DOM屬性操作，完成元素內(nèi)容設(shè)置，元素屬性設(shè)置，控制元素樣式
DOM簡(jiǎn)介
獲取DOM元素
操作元素內(nèi)容
操作元素屬性
定時(shí)器-間隔函數(shù)
描述屬性/方法效果
獲取DOM對(duì)象document.querySelector()獲取指定的第一個(gè)元素
document.querySelectorAll()獲取指定的所有元素
操作元素內(nèi)容元素.innerText操作元素內(nèi)容，不解析標(biāo)簽
元素.innerHTML操作元素內(nèi)容，解析標(biāo)簽
操作元素樣式元素.style.width通過(guò)style操作樣式
元素.className通過(guò)類名操作樣式
元素.classList.add()增加類名
元素.classList.remove()刪除類名
元素.classList.toggle()切換類名
間隔函數(shù)setInterval(function()? {}, 1000)定時(shí)器，每隔指定時(shí)間重復(fù)執(zhí)行
什么是 API
API: 應(yīng)用程序接口（Application Programming Interface）
接口：無(wú)需關(guān)心內(nèi)部如何實(shí)現(xiàn)，程序員只需要調(diào)用就可以很方便實(shí)現(xiàn)某些功能
DOM簡(jiǎn)介
DOM（Document Object Model——文檔對(duì)象模型）
作用：DOM用來(lái) 操作網(wǎng)頁(yè)文檔，開(kāi)發(fā)網(wǎng)頁(yè)特效和實(shí)現(xiàn)用戶交互
DOM的核心思想就是把網(wǎng)頁(yè)內(nèi)容當(dāng)做對(duì)象來(lái)處理，通過(guò)對(duì)象的屬性和方法對(duì)網(wǎng)頁(yè)內(nèi)容操作
document 對(duì)象
是 DOM 里提供的一個(gè)對(duì)象，是DOM頂級(jí)對(duì)象
作為網(wǎng)頁(yè)內(nèi)容的入口
所以它提供的屬性和方法都是用來(lái)訪問(wèn)和操作網(wǎng)頁(yè)內(nèi)容的
例：document.write()
獲取DOM對(duì)象
利用css選擇器來(lái)獲取DOM元素
語(yǔ)法：
constbox=document.querySelector('div')
參數(shù):
包含一個(gè)或多個(gè)有效的CSS選擇器 字符串
返回值：
CSS選擇器匹配的第一個(gè)元素對(duì)象
如果沒(méi)有匹配到，則返回 null
選擇指定css選擇器的所有元素
語(yǔ)法：
constlis=document.querySelectorAll('.nav li')
參數(shù):
包含一個(gè)或多個(gè)有效的CSS選擇器 字符串
返回值：
CSS選擇器匹配的NodeList? 偽數(shù)組
<script>
操作元素內(nèi)容
DOM對(duì)象可以操作頁(yè)面標(biāo)簽，所以本質(zhì)上就是操作DOM對(duì)象（增刪改查）
如果想要操作標(biāo)簽元素的內(nèi)容，則可以使用如下2種方式：
1.對(duì)象.innerText 屬性
2.對(duì)象.innerHTML 屬性
innerText
innerText 將文本內(nèi)容添加/更新到任意標(biāo)簽位置，文本中包含的標(biāo)簽不會(huì)被解析。
innerHTML
innerHTML 將文本內(nèi)容添加/更新到任意標(biāo)簽位置，文本中包含的標(biāo)簽會(huì)被解析。
常用屬性修改
可以通過(guò)DOM操作元素屬性，比如通過(guò) src 更換 圖片地址
最常見(jiàn)的屬性比如：href、title、src 等等
直接能過(guò)屬性名修改，最簡(jiǎn)潔的語(yǔ)法
操作樣式屬性
還可以通過(guò) DOM對(duì)象修改標(biāo)簽元素的樣式屬性
比如通過(guò) 輪播圖小圓點(diǎn)自動(dòng)更換顏色 樣式
點(diǎn)擊按鈕可以滾動(dòng)圖片，這是移動(dòng)的的位置 translateX 等等
注意：
1.修改樣式通過(guò)style屬性引出
2.如果屬性有-連接符，需要轉(zhuǎn)換為小駝峰命名法
3.賦值的時(shí)候，需要的時(shí)候不要忘記加css單位
操作類名(className) 操作CSS
如果修改的樣式比較多，直接通過(guò)style屬性修改比較繁瑣，我們可以通過(guò)借助于css類名的形式
核心：把多個(gè)樣式放到css一個(gè)類中，然后把這個(gè)類添加到這個(gè)元素身上
語(yǔ)法：<script>
? // 通過(guò)類名操作元素樣式
? // 1. 獲取box盒子
? const box = document.querySelector('.box')
? // 2. 利用類名操作元素樣式
? // box.className = 'circle'
? box.className = 'box circle'
? // 3. 利用類名操作樣式添加的新的類名會(huì)覆蓋掉原先的類名
</script>
注意：
1.由于class是關(guān)鍵字, 所以使用className去代替
2.className是使用新值換舊值, 如果需要添加一個(gè)類,需要保留之前的類名
通過(guò) classList 操作類控制CSS
為了解決className 容易覆蓋以前的類名，我們可以通過(guò)classList方式追加和刪除類名
操作表單元素屬性
表單很多情況，也需要修改屬性，比如點(diǎn)擊眼睛，可以看到密碼，本質(zhì)是把表單類型轉(zhuǎn)換為文本框
正常的有屬性有取值的跟其他的標(biāo)簽屬性沒(méi)有任何區(qū)別
獲取: DOM對(duì)象.屬性
設(shè)置: DOM對(duì)象.屬性= 新值
表單屬性中添加就有效果，移除就沒(méi)有效果，一律使用布爾值表示
比如實(shí)現(xiàn)禁用按鈕，勾選按鈕等
如果為 true 代表添加了該屬性
如果是 false 代表移除了該屬性
比如： disabled、checked、selected
自定義屬性（重要）
標(biāo)準(zhǔn)屬性: 標(biāo)簽天生自帶的屬性 比如class、id、title等, 可以直接使用點(diǎn)語(yǔ)法操作比如：對(duì)象.title
自定義屬性：
在html5中推出來(lái)了專門的data-自定義屬性?
使用場(chǎng)景：通過(guò)自定義屬性可以存儲(chǔ)數(shù)據(jù)，后期可以使用這個(gè)數(shù)據(jù)
在標(biāo)簽上一律以data-開(kāi)頭
在DOM對(duì)象上一律以dataset對(duì)象方式獲取
定時(shí)器-間隔函數(shù)
網(wǎng)頁(yè)中經(jīng)常會(huì)需要一種功能：每隔一段時(shí)間需要自動(dòng)執(zhí)行一段代碼，不需要我們手動(dòng)去觸發(fā)
例如：網(wǎng)頁(yè)中的倒計(jì)時(shí)
要實(shí)現(xiàn)這種需求，需要定時(shí)器函數(shù)
定時(shí)器函數(shù)有兩種:? 間隔函數(shù)和 延遲函數(shù)
setInterval 是 JavaScript 中內(nèi)置的函數(shù)，它的作用是間隔固定的時(shí)間自動(dòng)重復(fù)執(zhí)行另一個(gè)函數(shù)，也叫定時(shí)器函數(shù)。
開(kāi)啟定時(shí)器:
語(yǔ)法
<script>
setInterval(function() {
console.log('我是1秒鐘執(zhí)行一次')
},1000)
</script>
作用：每隔一段時(shí)間調(diào)用這個(gè)函數(shù)
注意：間隔時(shí)間單位是毫秒
關(guān)閉定時(shí)器
需要定時(shí)器變量名來(lái)關(guān)閉
返回的是一個(gè)唯一的數(shù)字
<script>
lettimer=setInterval(repeat,1000)// 注意調(diào)用的時(shí)候直接寫函數(shù)名字不需要寫小括號(hào)
console.log(timer)//? 1
lettimer1=setInterval(repeat,1000)// 注意調(diào)用的時(shí)候直接寫函數(shù)名字不需要寫小括號(hào)
console.log(timer1)//? 2
// 2. 關(guān)閉定時(shí)器
clearInterval(timer)
</script>
