一夷恍、BOM
BOM（Browser Object Model）： 瀏覽器對(duì)象模型
其實(shí)就是操作瀏覽器的一些能力
我們可以操作哪些內(nèi)容
獲取一些瀏覽器的相關(guān)信息（窗口的大小）
操作瀏覽器進(jìn)行頁(yè)面跳轉(zhuǎn)
獲取當(dāng)前瀏覽器地址欄的信息
操作瀏覽器的滾動(dòng)條
瀏覽器的信息（瀏覽器的版本）
讓瀏覽器出現(xiàn)一個(gè)彈出框（alert/confirm/prompt）
BOM 的核心就是 window 對(duì)象
window 是瀏覽器內(nèi)置的一個(gè)對(duì)象，里面包含著操作瀏覽器的方法
獲取瀏覽器窗口的尺寸
innerHeight 和 innerWidth
這兩個(gè)方法分別是用來獲取瀏覽器窗口的寬度和高度（包含滾動(dòng)條的）
var? windowHeight=window.innerHeight
console.log(windowHeight)
var windowWidth=window.innerWidth
console.log(windowWidth)
二狡相、瀏覽器的彈出層
alert 是在瀏覽器彈出一個(gè)提示框
window.alert('我是一個(gè)提示框')
這個(gè)彈出層知識(shí)一個(gè)提示內(nèi)容后专，只有一個(gè)確定按鈕
點(diǎn)擊確定按鈕以后，這個(gè)提示框就消失了
confirm 是在瀏覽器彈出一個(gè)詢問框
varboo=window.confirm('我是一個(gè)詢問框')
console.log(boo)
這個(gè)彈出層有一個(gè)詢問信息和兩個(gè)按鈕
當(dāng)你點(diǎn)擊確定的時(shí)候美浦，就會(huì)得到 true
當(dāng)你點(diǎn)擊取消的時(shí)候弦赖，就會(huì)得到 false
prompt 是在瀏覽器彈出一個(gè)輸入框
varstr=window.prompt('請(qǐng)輸入內(nèi)容')
console.log(str)
這個(gè)彈出層有一個(gè)輸入框和兩個(gè)按鈕
當(dāng)你點(diǎn)擊取消的時(shí)候，得到的是 null
當(dāng)你點(diǎn)擊確定的時(shí)候得到的就是你輸入的內(nèi)容
瀏覽器的地址信息
在 window 中有一個(gè)對(duì)象叫做 location
就是專門用來存儲(chǔ)瀏覽器的地址欄內(nèi)的信息的
location.href
location.href 這個(gè)屬性存儲(chǔ)的是瀏覽器地址欄內(nèi) url 地址的信息
console.log(window.location.href)
會(huì)把中文編程 url 編碼的格式
location.href 這個(gè)屬性也可以給他賦值
window.location.href='./index.html'
// 這個(gè)就會(huì)跳轉(zhuǎn)頁(yè)面到后面你給的那個(gè)地址
location.reload
location.reload() 這個(gè)方法會(huì)重新加載一遍頁(yè)面浦辨，就相當(dāng)于刷新是一個(gè)道理
window.location.reload()
注意： 不要寫在全局蹬竖，不然瀏覽器就會(huì)一直處在刷新狀態(tài)
瀏覽器的歷史記錄
window 中有一個(gè)對(duì)象叫做 history
是專門用來存儲(chǔ)歷史記錄信息的
history.back
history.back 是用來會(huì)退歷史記錄的，就是回到前一個(gè)頁(yè)面流酬，就相當(dāng)于瀏覽器上的 ?? 按鈕
window.history.back()
前提是你要有上一條記錄币厕，不然就是一直在這個(gè)頁(yè)面，也不會(huì)回退
history.forword
history.forword 是去到下一個(gè)歷史記錄里面芽腾，也就是去到下一個(gè)頁(yè)面旦装，就相當(dāng)于瀏覽器上的 ?? 按鈕
window.history.forward()
前提是你要之前有過回退操作，不然的話你現(xiàn)在就是最后一個(gè)頁(yè)面摊滔，沒有下一個(gè)
瀏覽器的版本信息（了解）
window 中有一個(gè)對(duì)象叫做 navigator
是專門用來獲取瀏覽器信息的
navigator.userAgent
navigator.userAgent 是獲取的瀏覽器的整體信息
console.log(window.navigator.userAgent)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36
navigator.appName
navigator.appName 獲取的是瀏覽器的名稱
console.log(window.navigator.appName)
navigator.appVersion
navigator.appVersion 獲取的是瀏覽器的版本號(hào)
console.log(window.navigator.appVersion)
navigator.platform
navigator.platform 獲取到的是當(dāng)前計(jì)算機(jī)的操作系統(tǒng)
console.log(window.navigator.platform)
瀏覽器的 onload 事件
這個(gè)不在是對(duì)象了阴绢，而是一個(gè)事件
是在頁(yè)面所有資源加載完畢后執(zhí)行的
window.onload = function () {
? console.log('頁(yè)面已經(jīng)加載完畢')
}
在 html 頁(yè)面中把 js 寫在 head 里面
<html>
? <head>
? ? <meta charset="UTF-8" />
? ? <script>
? ? ? // 這個(gè)代碼執(zhí)行的時(shí)候，body 還沒有加載
? ? ? // 這個(gè)時(shí)候我們就獲取不到 body 中的那個(gè) div
? ? ? // 就需要使用 window.onload 事件
? ? ? window.onload = function () {
? ? ? ? // 這個(gè)函數(shù)會(huì)在頁(yè)面加載完畢以后在執(zhí)行
? ? ? ? // 那么這個(gè)時(shí)候頁(yè)面的 DOM 元素都已經(jīng)加載了惭载，我們就可以獲取 div 了
? ? ? }
? ? </script>
? </head>
? <body>
? ? <div></div>
? </body>
</html>
在 html 頁(yè)面中把 js 寫在 body 最后面
<html>
? <head>
? ? <meta charset="UTF-8" />
? </head>
? <body>
? ? <div></div>
? ? <script>
? ? // 這個(gè)代碼執(zhí)行的時(shí)候旱函，body 已經(jīng)加載完畢了
? ? ? // 在這里就可以獲取到 div，寫不寫 window.onload 就無所謂了
? ? ? window.onload = function () {
? ? ? ? // 這個(gè)函數(shù)會(huì)在頁(yè)面加載完畢以后在執(zhí)行
? ? ? ? // 那么這個(gè)時(shí)候頁(yè)面的 DOM 元素都已經(jīng)加載了描滔，我們就可以獲取 div 了
? ? ? }
? ? </script>
? </body>
</html>
瀏覽器的 onscroll 事件
這個(gè) onscroll 事件是當(dāng)瀏覽器的滾動(dòng)條滾動(dòng)的時(shí)候觸發(fā)
或者鼠標(biāo)滾輪滾動(dòng)的時(shí)候出發(fā)
window.onscroll = function () {
? console.log('瀏覽器滾動(dòng)了')
}
注意：前提是頁(yè)面的高度要超過瀏覽器的可是窗口才可以
瀏覽器滾動(dòng)的距離
瀏覽器內(nèi)的內(nèi)容即然可以滾動(dòng)棒妨，那么我們就可以獲取到瀏覽器滾動(dòng)的距離
思考一個(gè)問題？
瀏覽器真的滾動(dòng)了嗎？
其實(shí)我們的瀏覽器是沒有滾動(dòng)的券腔，是一直在那里
滾動(dòng)的是什么伏穆？是我們的頁(yè)面
所以說，其實(shí)瀏覽器沒有動(dòng)纷纫，只不過是頁(yè)面向上走了
所以枕扫，這個(gè)已經(jīng)不能單純的算是瀏覽器的內(nèi)容了，而是我們頁(yè)面的內(nèi)容
所以不是在用 window 對(duì)象了辱魁，而是使用 document 對(duì)象
scrollTop
獲取的是頁(yè)面向上滾動(dòng)的距離
一共有兩個(gè)獲取方式
document.body.scrollTop
document.documentElement.scrollTop
window.onscroll = function () {
? console.log(document.body.scrollTop)
? console.log(document.documentElement.scrollTop)
}
兩個(gè)都是獲取頁(yè)面向上滾動(dòng)的距離
區(qū)別：
IE 瀏覽器
沒有 DOCTYPE 聲明的時(shí)候烟瞧，用這兩個(gè)都行
有 DOCTYPE 聲明的時(shí)候，只能用 document.documentElement.scrollTop
Chrome 和 FireFox
沒有 DOCTYPE 聲明的時(shí)候染簇，用 document.body.scrollTop
有 DOCTYPE 聲明的時(shí)候参滴，用 document.documentElement.scrollTop
Safari
兩個(gè)都不用，使用一個(gè)單獨(dú)的方法 window.pageYOffset
scrollLeft
獲取頁(yè)面向左滾動(dòng)的距離
也是兩個(gè)方法
document.body.scrollLeft
document.documentElementLeft
window.onscroll = function () {
? console.log(document.body.scrollLeft)
? console.log(document.documentElement.scrollLeft)
}
兩個(gè)之間的區(qū)別和之前的 scrollTop 一樣
三锻弓、定時(shí)器
在 js 里面砾赔，有兩種定時(shí)器，倒計(jì)時(shí)定時(shí)器 和 間隔定時(shí)器
倒計(jì)時(shí)定時(shí)器
倒計(jì)時(shí)多少時(shí)間以后執(zhí)行函數(shù)
語(yǔ)法： setTimeout(要執(zhí)行的函數(shù)青灼，多長(zhǎng)時(shí)間以后執(zhí)行)
會(huì)在你設(shè)定的時(shí)間以后暴心，執(zhí)行函數(shù)
var timerId = setTimeout(function () {
? console.log('我執(zhí)行了')
}, 1000)
console.log(timerId) // 1
時(shí)間是按照毫秒進(jìn)行計(jì)算的，1000 毫秒就是 1秒鐘
所以會(huì)在頁(yè)面打開 1 秒鐘以后執(zhí)行函數(shù)
只執(zhí)行一次杂拨，就不在執(zhí)行了
返回值是专普，當(dāng)前這個(gè)定時(shí)器是頁(yè)面中的第幾個(gè)定時(shí)器
間隔定時(shí)器
每間隔多少時(shí)間就執(zhí)行一次函數(shù)
語(yǔ)法： setInterval(要執(zhí)行的函數(shù)，間隔多少時(shí)間)
var timerId = setInterval(function () {
? console.log('我執(zhí)行了')
}, 1000)
時(shí)間和剛才一樣弹沽，是按照毫秒進(jìn)行計(jì)算的
每間隔 1 秒鐘執(zhí)行一次函數(shù)
只要不關(guān)閉脆诉，會(huì)一直執(zhí)行
返回值是，當(dāng)前這個(gè)定時(shí)器是頁(yè)面中的第幾個(gè)定時(shí)器
定時(shí)器的返回值
設(shè)置定時(shí)器的時(shí)候贷币，他的返回值是部分 setTimeout 和 setInterval 的
只要有一個(gè)定時(shí)器击胜，那么就是一個(gè)數(shù)字
var timerId = setTimeout(function () {
? console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
var timerId2 = setInterval(function () {
? console.log('間隔定時(shí)器')
}, 1000)
console.log(timerId) // 1
console.log(timerId2) // 2
關(guān)閉定時(shí)器
我們剛才提到過一個(gè) timerId，是表示這個(gè)定時(shí)器是頁(yè)面上的第幾個(gè)定時(shí)器
這個(gè) timerId 就是用來關(guān)閉定時(shí)器的數(shù)字
我們有兩個(gè)方法來關(guān)閉定時(shí)器 clearTimeout 和 clearInterval
var timerId = setTimeout(function () {
? console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
clearTimeout(timerId)
關(guān)閉以后役纹，定時(shí)器就不會(huì)在執(zhí)行了
var timerId2 = setInterval(function () {
? console.log('間隔定時(shí)器')
}, 1000)
coearInterval(timerId2)
關(guān)閉以后定時(shí)器就不會(huì)在執(zhí)行了
原則上是
clearTimeout 關(guān)閉 setTimeout
clearInterval 關(guān)閉 setInterval
但是其實(shí)是可以通用的偶摔，他們可以混著使用
var timerId = setTimeout(function () {
? console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
// 關(guān)閉倒計(jì)時(shí)定時(shí)器
clearInterval(timerId)
var timerId2 = setInterval(function () {
? console.log('間隔定時(shí)器')
}, 1000)
// 關(guān)閉間隔定時(shí)器
clearTimeout(timerId2)
四、DOM（上）
DOM（Document Object Model）： 文檔對(duì)象模型
其實(shí)就是操作 html 中的標(biāo)簽的一些能力
我們可以操作哪些內(nèi)容
獲取一個(gè)元素
移除一個(gè)元素
創(chuàng)建一個(gè)元素
向頁(yè)面里面添加一個(gè)元素
給元素綁定一些事件
獲取元素的屬性
給元素添加一些 css 樣式
...
DOM 的核心對(duì)象就是 docuemnt 對(duì)象
document 對(duì)象是瀏覽器內(nèi)置的一個(gè)對(duì)象促脉，里面存儲(chǔ)著專門用來操作元素的各種方法
DOM： 頁(yè)面中的標(biāo)簽辰斋，我們通過 js 獲取到以后，就把這個(gè)對(duì)象叫做 DOM 對(duì)象
獲取一個(gè)元素
通過 js 代碼來獲取頁(yè)面中的標(biāo)簽
獲取到以后我們就可以操作這些標(biāo)簽了
getElementById
getElementById 是通過標(biāo)簽的 id 名稱來獲取標(biāo)簽的
因?yàn)樵谝粋€(gè)頁(yè)面中 id 是唯一的瘸味，所以獲取到的就是一個(gè)元素
<body>
? <div id="box"></div>
? <script>
? var box = document.getElementById('box')
? console.log(box) // <div></div>
? </script>
</body>
獲取到的就是頁(yè)面中的那個(gè) id 為 box 的 div 標(biāo)簽
getElementsByClassName
getElementsByClassName 是用過標(biāo)簽的 class 名稱來獲取標(biāo)簽的
因?yàn)轫?yè)面中可能有多個(gè)元素的 class 名稱一樣宫仗，所以獲取到的是一組元素
哪怕你獲取的 class 只有一個(gè)，那也是獲取一組元素旁仿，只不過這一組中只有一個(gè) DOM 元素而已
<body>
? <div calss="box"></div>
? <script>
? var box = document.getElementsByClassName('box')
? console.log(box) // [<div></div>]
? ? console.log(box[0]) // <div></div>
? </script>
</body>
獲取到的是一組元素藕夫，是一個(gè)長(zhǎng)得和數(shù)組一樣的數(shù)據(jù)結(jié)構(gòu)，但是不是數(shù)組，是偽數(shù)組
這個(gè)一組數(shù)據(jù)也是按照索引排列的毅贮，所以我們想要準(zhǔn)確的拿到這個(gè) div办悟，需要用索引來獲取
getElementsByTagName
getElementsByTagName 是用過標(biāo)簽的 標(biāo)簽 名稱來獲取標(biāo)簽的
因?yàn)轫?yè)面中可能有多個(gè)元素的 標(biāo)簽 名稱一樣，所以獲取到的是一組元素
哪怕真的只有一個(gè)這個(gè)標(biāo)簽名滩褥，那么也是獲取一組元素病蛉，只不過這一組中只有一個(gè) DOM 元素而已
<body>
? <div></div>
? <script>
? var box = document.getElementsByTagName('div')
? console.log(box) // [<div></div>]
? ? console.log(box[0]) // <div></div>
? </script>
</body>
和 getElementsByClassName 一樣，獲取到的是一個(gè)長(zhǎng)得很像數(shù)組的元素
必須要用索引才能得到準(zhǔn)確的 DOM 元素
querySelector
querySelector 是按照選擇器的方式來獲取元素
也就是說瑰煎，按照我們寫 css 的時(shí)候的選擇器來獲取
這個(gè)方法只能獲取到一個(gè)元素铺然，并且是頁(yè)面中第一個(gè)滿足條件的元素
console.log(document.querySelector('div')) // 獲取頁(yè)面中的第一個(gè) div 元素
console.log(docuemnt.querySelector('.box')) // 獲取頁(yè)面中第一個(gè)有 box 類名的元素
console.log(document.querySelector('#box')) // 獲取頁(yè)面中第一個(gè) id 名為 box 的元素
querySelectorAll
querySelectorAll 是按照選擇器的方式來獲取元素
這個(gè)方法能獲取到所有滿足條件的元素，以一個(gè)偽數(shù)組的形式返回
console.log(document.querySelectorAll('div')) // 獲取頁(yè)面中的所有的 div 元素
console.log(docuemnt.querySelectorAll('.box')) // 獲取頁(yè)面中所有有 box 類名的元素
獲取到的是一組數(shù)據(jù)酒甸，也是需要用索引來獲取到準(zhǔn)確的每一個(gè) DOM 元素
操作屬性
通過我們各種獲取元素的方式獲取到頁(yè)面中的標(biāo)簽以后
我們可以直接操作 DOM 元素的屬性探熔，就能直接把效果展示在頁(yè)面上
innerHTML
獲取元素內(nèi)部的 HTML 結(jié)構(gòu)
<body>
? <div>
? ? <p>
? ? ? <span>hello</span>
? ? </p>
? </div>
? <script>
? ? var div = document.querySelector('div')
? ? console.log(div.innerHTML)
/*
? ? ? <p>
? ? ? ? <span>hello</span>
? ? ? </p>
*/
? </script>
</body>
設(shè)置元素的內(nèi)容
<body>
? <div></div>
? <script>
? ? var div = document.querySelector('div')
? div.innerHTML = '<p>hello</p>'
? </script>
</body>
設(shè)置完以后，頁(yè)面中的 div 元素里面就會(huì)嵌套一個(gè) p 元素
innerText
獲取元素內(nèi)部的文本（只能獲取到文本內(nèi)容烘挫，獲取不到 html 標(biāo)簽）
<body>
? <div>
? ? <p>
? ? ? <span>hello</span>
? ? </p>
? </div>
? <script>
? ? var div = document.querySelector('div')
? ? console.log(div.innerText) // hello
? </script>
</body>
可以設(shè)置元素內(nèi)部的文本
<body>
? <div></div>
? <script>
? ? var div = document.querySelector('div')
? div.innerText = '<p>hello</p>'
? </script>
</body>
設(shè)置完畢以后，會(huì)把 <p>hello</p> 當(dāng)作一個(gè)文本出現(xiàn)在 div 元素里面柬甥，而不會(huì)把 p 解析成標(biāo)簽
getAttribute
獲取元素的某個(gè)屬性（包括自定義屬性）
<body>
? <div a="100" class="box"></div>
? <script>
? ? var div = document.querySelector('div')
? console.log(div.getAttribute('a')) // 100
? ? console.log(div.getAttribute('class')) // box
? </script>
</body>
setAttribute
給元素設(shè)置一個(gè)屬性（包括自定義屬性）
<body>
? <div></div>
? <script>
? ? var div = document.querySelector('div')
? div.setAttribute('a', 100)
? ? div.setAttribute('class', 'box')
? ? console.log(div) // <div a="100" class="box"></div>
? </script>
</body>
removeAttribute
直接移除元素的某個(gè)屬性
<body>
? <div a="100" class="box"></div>
? <script>
? ? var div = document.querySelector('div')
? div.removeAttribute('class')
? ? console.log(div) // <div a="100"></div>
? </script>
</body>
style
專門用來給元素添加 css 樣式的
添加的都是行內(nèi)樣式
<body>
? <div></div>
? <script>
? ? var div = document.querySelector('div')
? div.style.width = "100px"
? ? div.style.height = "100px"
? ? div.style.backgroundColor = "pink"
? ? console.log(div)
? ? // <div style="width: 100px; height: 100px; background-color: pink;"></div>
? </script>
</body>
頁(yè)面中的 div 就會(huì)變成一個(gè)寬高都是100饮六，背景顏色是粉色
className
專門用來操作元素的 類名的
<body>
? <div class="box"></div>
? <script>
? ? var div = document.querySelector('div')
? console.log(div.className) // box
? </script>
</body>
也可以設(shè)置元素的類名，不過是全覆蓋式的操作
<body>
? <div class="box"></div>
? <script>
? ? var div = document.querySelector('div')
? div.className = 'test'
? ? console.log(div) // <div class="test"></div>
? </script>
</body>
在設(shè)置的時(shí)候苛蒲，不管之前有沒有類名卤橄，都會(huì)全部被設(shè)置的值覆蓋
