一.web API 基本認(rèn)知
-
DOM 樹(shù)是:
將 HTML 文檔以樹(shù)狀結(jié)構(gòu)直觀的表現(xiàn)出來(lái)
作用：文檔樹(shù)直觀的體現(xiàn)了標(biāo)簽與標(biāo)簽之間的關(guān)系
-
DOM對(duì)象創(chuàng)建:
瀏覽器根據(jù)html標(biāo)簽生成的** JS對(duì)象（DOM對(duì)象）**
DOM的核心就是把內(nèi)容當(dāng)對(duì)象來(lái)處理
-
document 是什么愧哟？
是 DOM 里提供的一個(gè)對(duì)象
網(wǎng)頁(yè)所有內(nèi)容都在document里面
二.獲取DOM對(duì)象
1, 根據(jù)CSS選擇器來(lái)獲取DOM元素 (重點(diǎn))
1.1 選擇匹配的第一個(gè)元素
語(yǔ)法:
參數(shù): CSS選擇器 字符串
返回值：匹配的第一個(gè)元素, 如果沒(méi)有匹配到，則返回null。
多參看文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
1.2 選擇匹配的多個(gè)元素
語(yǔ)法：
參數(shù): 有效的CSS選擇器 字符串
返回值：對(duì)象集合
1. 獲取一個(gè)DOM元素我們使用誰(shuí)搪搏？
querySelector()
2. 獲取多個(gè)DOM元素我們使用誰(shuí)权逗？
querySelectorAll()
3. querySelector() 方法獲取的元素 **能直接操作修改**
4. querySelectorAll() 方法獲取的元素集合
**不可以直接操作修改**谣光， 只能通過(guò)遍歷的方式一次給里面的元素做修改
得到的是一個(gè)偽數(shù)組：
有l(wèi)ength長(zhǎng)度弹谁、索引號(hào)
但是沒(méi)有 pop() push() 等數(shù)組方法
想要得到里面的每一個(gè)對(duì)象茸塞，則需要遍歷（for）的方式獲得
注意事項(xiàng):
哪怕只有一個(gè)元素野瘦，通過(guò)querySelect**All() **獲取過(guò)來(lái)的也是一個(gè)偽數(shù)組描沟，里面只有一個(gè)元素而已
獲取DOM對(duì)象小結(jié)
-
獲取頁(yè)面中的標(biāo)簽我們最終常用那兩種方式？
querySelectorAll()
querySelector()
-
他們兩者的區(qū)別是什么鞭光？
querySelector() 只能選擇一個(gè)元素吏廉， 可以直接操作
querySelectorAll() 可以選擇多個(gè)元素，得到的是偽數(shù)組惰许，需要遍歷
得到每一個(gè)元素
-
他們兩者小括號(hào)里面的參數(shù)有神馬注意事項(xiàng)席覆？
里面寫(xiě)css選擇器
必須是字符串，也就是必須加引號(hào)
三. 設(shè)置/修改DOM元素內(nèi)容
學(xué)習(xí)路徑：
對(duì)象.innerText 屬性
對(duì)象.innerHTML 屬性
1. 元素innerText 屬性
能夠操作標(biāo)簽的內(nèi)容
文本中包含的標(biāo)簽不會(huì)被解析
2. 元素.innerHTML 屬性
能夠操作標(biāo)簽的內(nèi)容
文本中包含的標(biāo)簽會(huì)被解析
3.1 設(shè)置/修改DOM元素內(nèi)容小結(jié)
-
設(shè)置/修改DOM元素內(nèi)容有:
元素.innerText 屬性
元素.innerHTML 屬性
-
兩者的區(qū)別是:
元素.innerText 屬性 不能解析標(biāo)簽
元素.innerHTML 屬性 能夠解析標(biāo)簽
如果還在糾結(jié)到底用誰(shuí)汹买，你可以選擇innerHTML
四. 設(shè)置/修改DOM元素屬性
1. 設(shè)置/修改元素常用屬性
還可以通過(guò)JS 設(shè)置 / 修改標(biāo)簽元素屬性佩伤，比如通過(guò) src 更換圖片
最常見(jiàn)的屬性 比如： href、title卦睹、src 等
語(yǔ)法:
對(duì)象 . 屬性 = 值
2. 設(shè)置/修改元素樣式屬性
學(xué)習(xí)路徑：
1.**通過(guò)類(lèi)名操作CSS**
className屬性
classList 語(yǔ)法
2.通過(guò) style 屬性操作CSS
1. 操作類(lèi)名(className) 操作類(lèi)名控制樣式
語(yǔ)法：
注意：
由于class是關(guān)鍵字, 所以使用className去代替
直接使用 className 賦值會(huì)覆蓋以前的類(lèi)名
2. 通過(guò) classList 操作類(lèi)名控制樣式
語(yǔ)法：
3. 通過(guò) style 屬性操作樣式
語(yǔ)法：
舉例說(shuō)明:
注意：
1.修改樣式通過(guò)style屬性來(lái)實(shí)現(xiàn)
2.如果屬性有-連接符畦戒，需要轉(zhuǎn)換為 駝峰命名法
3.賦值的時(shí)候，需要的時(shí)候不要忘記加css單位
1. 設(shè)置/修改元素樣式屬性通過(guò)___style___屬性來(lái)實(shí)現(xiàn)结序？
2. 如果需要修改一個(gè)div盒子的樣式障斋，比如 padding-left, 如何寫(xiě)？
element.style.paddingLeft = ‘300px’
駝峰命名法
3. 因?yàn)槲覀兪菢邮綄傩孕旌祝欢▌e忘記垃环，大部分?jǐn)?shù)字后面都需要加單位
3. 設(shè)置/修改 表單元素 屬性
- 獲取: DOM對(duì)象.屬性名
- 設(shè)置: DOM對(duì)象.屬性名 = 新值
布爾類(lèi)型屬性： checked、selected返敬、 disabled 遂庄， 屬性值是布爾值（true / false）
五. 定時(shí)器
定時(shí)器函數(shù)可以開(kāi)啟和關(guān)閉定時(shí)器
1. 開(kāi)啟定時(shí)器
作用：每隔一段時(shí)間，調(diào)用這個(gè)函數(shù)
間隔時(shí)間單位是毫秒
舉例說(shuō)明:
注意：
函數(shù)名字不需要加括號(hào)
2. 關(guān)閉定時(shí)器
注意:
- 函數(shù)名字不需要加括號(hào)
- 定時(shí)器返回的是一個(gè)id數(shù)字
5.1 定時(shí)器函數(shù)小結(jié)
-
定時(shí)器函數(shù)有什么作用劲赠？
每間隔一段時(shí)間就來(lái)調(diào)用函數(shù)
-
定時(shí)器函數(shù)如何開(kāi)啟涛目？
setInterval(函數(shù)名, 時(shí)間)
定時(shí)器函數(shù)如何關(guān)閉秸谢？
