BOM對(duì)象
BOM的全稱(chēng)是Browser Object Model,翻譯過(guò)來(lái)是瀏覽器對(duì)象模型。也就是JavaScript將瀏覽器的各個(gè)組成部分封裝成了對(duì)象。我們要操作瀏覽器的部分功能，可以通過(guò)操作BOM對(duì)象的相關(guān)屬性或者函數(shù)來(lái)完成。例如：我們想要將瀏覽器的地址改為http://www.baidu.com,我們就可以通過(guò)BOM中提供的location對(duì)象的href屬性來(lái)完成，代碼如下：location.
BOM中提供了如下5個(gè)對(duì)象：
| 對(duì)象名稱(chēng) | 描述 |
|---|---|
| Window | 瀏覽器窗口對(duì)象 |
| Navigator | 瀏覽器對(duì)象 |
| Screen | 屏幕對(duì)象 |
| History | 歷史記錄對(duì)象 |
| Location | d地址欄對(duì)象 |
上述5個(gè)對(duì)象與瀏覽器各組成對(duì)應(yīng)的關(guān)系如下圖所示：
1 Window對(duì)象
window對(duì)象指的是瀏覽器窗口對(duì)象，是JavaScript的全部對(duì)象，所以對(duì)于window對(duì)象，我們可以直接使用，并且對(duì)于window對(duì)象的方法和屬性，我們可以省略window.例如：我們之前學(xué)習(xí)的alert()函數(shù)其實(shí)是屬于window對(duì)象的,其完整的代碼如下：
window.alert('hello');
其可以省略window. 所以可以簡(jiǎn)寫(xiě)成
alert('hello')
所以對(duì)于window對(duì)象的屬性和方法，我們都是采用簡(jiǎn)寫(xiě)的方式。window提供了很多屬性和方法，下表列出了常用屬性和方法
window對(duì)象提供了獲取其他BOM對(duì)象的屬性：
| 屬性 | 描述 |
|---|---|
| history | 用于獲取history對(duì)象 |
| location | 用于獲取location對(duì)象 |
| Navigator | 用于獲取Navigator對(duì)象 |
| Screen | 用于獲取Screen對(duì)象 |
也就是說(shuō)我們要使用location對(duì)象，只需要通過(guò)代碼window.location或者簡(jiǎn)寫(xiě)location即可使用
window也提供了一些常用的函數(shù)，如下表格所示：
| 函數(shù) | 描述 |
|---|---|
| alert() | 顯示帶有一段消息和一個(gè)確認(rèn)按鈕的警告框。 |
| comfirm() | 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話(huà)框。 |
| setInterval() | 按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。 |
| setTimeout() | 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。 |
代碼演示：
-
alert()函數(shù)：彈出警告框，函數(shù)的內(nèi)容就是警告框的內(nèi)容
<script> //window對(duì)象是全局對(duì)象，window對(duì)象的屬性和方法在調(diào)用時(shí)可以省略window. window.alert("Hello BOM"); alert("Hello BOM Window"); </script>瀏覽器打開(kāi)，依次彈框，此處只截圖一張
-
confirm()函數(shù)：彈出確認(rèn)框，并且提供用戶(hù)2個(gè)按鈕，分別是確認(rèn)和取消。
添加如下代碼：
confirm("您確認(rèn)刪除該記錄嗎?");瀏覽器打開(kāi)效果如圖所示：
但是我們?cè)趺粗烙脩?hù)點(diǎn)擊了確認(rèn)還是取消呢？所以這個(gè)函數(shù)有一個(gè)返回值，當(dāng)用戶(hù)點(diǎn)擊確認(rèn)時(shí)，返回true，點(diǎn)擊取消時(shí)，返回false。我們根據(jù)返回值來(lái)決定是否執(zhí)行后續(xù)操作。修改代碼如下：再次運(yùn)行，可以查看返回值true或者false
var flag = confirm("您確認(rèn)刪除該記錄嗎?");
alert(flag);
-
setInterval(fn,毫秒值)：定時(shí)器，用于周期性的執(zhí)行某個(gè)功能，并且是循環(huán)執(zhí)行。該函數(shù)需要傳遞2個(gè)參數(shù)：
fn:函數(shù)，需要周期性執(zhí)行的功能代碼
毫秒值：間隔時(shí)間
注釋掉之前的代碼，添加代碼如下：
//定時(shí)器 - setInterval -- 周期性的執(zhí)行某一個(gè)函數(shù) var i = 0; setInterval(function(){ i++; console.log("定時(shí)器執(zhí)行了"+i+"次"); },2000);刷新頁(yè)面，瀏覽器每個(gè)一段時(shí)間都會(huì)在控制臺(tái)輸出，結(jié)果如下：
-
setTimeout(fn,毫秒值) ：定時(shí)器，只會(huì)在一段時(shí)間后執(zhí)行一次功能。參數(shù)和上述setInterval一致
注釋掉之前的代碼，添加代碼如下：
//定時(shí)器 - setTimeout -- 延遲指定時(shí)間執(zhí)行一次 setTimeout(function(){ alert("JS"); },3000);瀏覽器打開(kāi)，3s后彈框，關(guān)閉彈框，發(fā)現(xiàn)再也不會(huì)彈框了。
2 Location對(duì)象
location是指代瀏覽器的地址欄對(duì)象，對(duì)于這個(gè)對(duì)象，我們常用的是href屬性，用于獲取或者設(shè)置瀏覽器的地址信息，添加如下代碼：
//獲取瀏覽器地址欄信息
alert(location.href);
//設(shè)置瀏覽器地址欄信息
location.href = "https://www.itcast.cn";
瀏覽器效果如下：首先彈框展示瀏覽器地址欄信息，
然后點(diǎn)擊確定后，因?yàn)槲覀冊(cè)O(shè)置了地址欄信息，所以瀏覽器跳轉(zhuǎn)到傳智首頁(yè)
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-對(duì)象-BOM</title>
</head>
<body>
</body>
<script>
//獲取
// window.alert("Hello BOM");
// alert("Hello BOM Window");
//方法
//confirm - 對(duì)話(huà)框 -- 確認(rèn): true , 取消: false
// var flag = confirm("您確認(rèn)刪除該記錄嗎?");
// alert(flag);
//定時(shí)器 - setInterval -- 周期性的執(zhí)行某一個(gè)函數(shù)
// var i = 0;
// setInterval(function(){
// i++;
// console.log("定時(shí)器執(zhí)行了"+i+"次");
// },2000);
//定時(shí)器 - setTimeout -- 延遲指定時(shí)間執(zhí)行一次
// setTimeout(function(){
// alert("JS");
// },3000);
//location
alert(location.href);
location.href = "https://www.itcast.cn";
</script>
</html>
DOM對(duì)象
1 DOM介紹
DOM：Document Object Model 文檔對(duì)象模型。也就是 JavaScript 將 HTML 文檔的各個(gè)組成部分封裝為對(duì)象。
DOM 其實(shí)我們并不陌生，之前在學(xué)習(xí) XML 就接觸過(guò)，只不過(guò) XML 文檔中的標(biāo)簽需要我們寫(xiě)代碼解析，而 HTML 文檔是瀏覽器解析。封裝的對(duì)象分為
- Document：整個(gè)文檔對(duì)象
- Element：元素對(duì)象
- Attribute：屬性對(duì)象
- Text：文本對(duì)象
- Comment：注釋對(duì)象
如下圖，左邊是 HTML 文檔內(nèi)容，右邊是 DOM 樹(shù)
那么我們學(xué)習(xí)DOM技術(shù)有什么用呢？主要作用如下：
- 改變 HTML 元素的內(nèi)容
- 改變 HTML 元素的樣式（CSS）
- 對(duì) HTML DOM 事件作出反應(yīng)
- 添加和刪除 HTML 元素
2 獲取DOM對(duì)象
我們知道DOM的作用是通過(guò)修改HTML元素的內(nèi)容和樣式等來(lái)實(shí)現(xiàn)頁(yè)面的各種動(dòng)態(tài)效果，但是我們要操作DOM對(duì)象的前提是先獲取元素對(duì)象，然后才能操作。
- 如何獲取DOM中的元素對(duì)象（Element對(duì)象 ，也就是標(biāo)簽）
- 如何操作Element對(duì)象的屬性,也就是標(biāo)簽的屬性。
接下來(lái)我們先來(lái)學(xué)習(xí)如何獲取DOM中的元素對(duì)象。
HTML中的Element對(duì)象可以通過(guò)Document對(duì)象獲取，而Document對(duì)象是通過(guò)window對(duì)象獲取的。document對(duì)象提供的用于獲取Element元素對(duì)象的api如下表所示：
| 函數(shù) | 描述 |
|---|---|
| document.getElementById() | 根據(jù)id屬性值獲取，返回單個(gè)Element對(duì)象 |
| document.getElementsByTagName() | 根據(jù)標(biāo)簽名稱(chēng)獲取，返回Element對(duì)象數(shù)組 |
| document.getElementsByName() | 根據(jù)name屬性值獲取，返回Element對(duì)象數(shù)組 |
| document.getElementsByClassName() | 根據(jù)class屬性值獲取，返回Element對(duì)象數(shù)組 |
演示上述api：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-對(duì)象-DOM</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">傳智教育</div> <br>
<div class="cls">黑馬程序員</div> <br>
<input type="checkbox" name="hobby"> 電影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戲
</body>
</html>
-
document.getElementById()： 根據(jù)標(biāo)簽的id屬性獲取標(biāo)簽對(duì)象，id是唯一的，所以獲取到是單個(gè)標(biāo)簽對(duì)象。
添加如下代碼：
<script> //1. 獲取Element元素 //1.1 獲取元素-根據(jù)ID獲取 var img = document.getElementById('h1'); alert(img); </script>瀏覽器打開(kāi)，效果如圖所示：從彈出的結(jié)果能夠看出，這是一個(gè)圖片標(biāo)簽對(duì)象
-
document.getElementsByTagName() : 根據(jù)標(biāo)簽的名字獲取標(biāo)簽對(duì)象，同名的標(biāo)簽有很多，所以返回值是數(shù)組。
添加如下代碼:
//1.2 獲取元素-根據(jù)標(biāo)簽獲取 - div var divs = document.getElementsByTagName('div'); for (let i = 0; i < divs.length; i++) { alert(divs[i]); }瀏覽器輸出2次如下所示的彈框
-
document.getElementsByName() ：根據(jù)標(biāo)簽的name的屬性值獲取標(biāo)簽對(duì)象，name屬性值可以重復(fù)，所以返回值是一個(gè)數(shù)組。
添加如下代碼：
//1.3 獲取元素-根據(jù)name屬性獲取 var ins = document.getElementsByName('hobby'); for (let i = 0; i < ins.length; i++) { alert(ins[i]); }瀏覽器會(huì)有3次如下圖所示的彈框：
-
document.getElementsByClassName() : 根據(jù)標(biāo)簽的class屬性值獲取標(biāo)簽對(duì)象，class屬性值也可以重復(fù)，返回值是數(shù)組。
添加如下圖所示的代碼：
//1.4 獲取元素-根據(jù)class屬性獲取 var divs = document.getElementsByClassName('cls'); for (let i = 0; i < divs.length; i++) { alert(divs[i]); }瀏覽器會(huì)彈框2次，都是div標(biāo)簽對(duì)象
-
操作屬性
可以通過(guò)div標(biāo)簽對(duì)象的innerHTML屬性來(lái)修改標(biāo)簽的內(nèi)容。此時(shí)我們想把頁(yè)面中的傳智教育替換成傳智教育666，所以要獲取2個(gè)div中的第一個(gè)，所以可以通過(guò)下標(biāo)0獲取數(shù)組中的第一個(gè)div，注釋之前的代碼，編寫(xiě)如下代碼：
var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
div1.innerHTML = "傳智教育666";
瀏覽器刷新頁(yè)面，展示效果如下圖所示：
發(fā)現(xiàn)頁(yè)面內(nèi)容變成了傳智教育666
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-對(duì)象-DOM</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">傳智教育</div> <br>
<div class="cls">黑馬程序員</div> <br>
<input type="checkbox" name="hobby"> 電影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戲
</body>
<script>
//1. 獲取Element元素
//1.1 獲取元素-根據(jù)ID獲取
// var img = document.getElementById('h1');
// alert(img);
//1.2 獲取元素-根據(jù)標(biāo)簽獲取 - div
// var divs = document.getElementsByTagName('div');
// for (let i = 0; i < divs.length; i++) {
// alert(divs[i]);
// }
//1.3 獲取元素-根據(jù)name屬性獲取
// var ins = document.getElementsByName('hobby');
// for (let i = 0; i < ins.length; i++) {
// alert(ins[i]);
// }
//1.4 獲取元素-根據(jù)class屬性獲取
// var divs = document.getElementsByClassName('cls');
// for (let i = 0; i < divs.length; i++) {
// alert(divs[i]);
// }
//2. 查詢(xún)參考手冊(cè), 屬性、方法
var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
div1.innerHTML = "傳智教育666";
</script>
</html>
JavaScript事件
1 事件介紹
如下圖所示的百度注冊(cè)頁(yè)面，當(dāng)我們用戶(hù)輸入完內(nèi)容，百度可以自動(dòng)的提示我們用戶(hù)名已經(jīng)存在還是可以使用。那么百度是怎么知道我們用戶(hù)名輸入完了呢？這就需要用到JavaScript中的事件了。
什么是事件呢？HTML事件是發(fā)生在HTML元素上的 “事情”，例如：
- 按鈕被點(diǎn)擊
- 鼠標(biāo)移到元素上
- 輸入框失去焦點(diǎn)
- …
而我們可以給這些事件綁定函數(shù)，當(dāng)事件觸發(fā)時(shí)，可以自動(dòng)的完成對(duì)應(yīng)的功能。這就是事件監(jiān)聽(tīng)。例如：對(duì)于我們所說(shuō)的百度注冊(cè)頁(yè)面，我們給用戶(hù)名輸入框的失去焦點(diǎn)事件綁定函數(shù)，當(dāng)我們用戶(hù)輸入完內(nèi)容，在標(biāo)簽外點(diǎn)擊了鼠標(biāo)，對(duì)于用戶(hù)名輸入框來(lái)說(shuō)，失去焦點(diǎn)，然后執(zhí)行綁定的函數(shù)，函數(shù)進(jìn)行用戶(hù)名內(nèi)容的校驗(yàn)等操作。JavaScript事件是js非常重要的一部分，接下來(lái)我們進(jìn)行事件的學(xué)習(xí)。那么我們對(duì)于JavaScript事件需要學(xué)習(xí)哪些內(nèi)容呢？我們得知道有哪些常用事件，然后我們得學(xué)會(huì)如何給事件綁定函數(shù)。
- 事件綁定
- 常用事件
2 事件綁定
JavaScript對(duì)于事件的綁定提供了2種方式：
-
方式1：通過(guò)html標(biāo)簽中的事件屬性進(jìn)行綁定
例如一個(gè)按鈕，我們對(duì)于按鈕可以綁定單機(jī)事件，可以借助標(biāo)簽的onclick屬性，屬性值指向一個(gè)函數(shù)。
在VS Code中創(chuàng)建名為09. JS-事件-事件綁定.html，添加如下代碼：
<input type="button" id="btn1" value="事件綁定1" onclick="on()">很明顯沒(méi)有on函數(shù)，所以我們需要?jiǎng)?chuàng)建該函數(shù)，代碼如下：
<script> function on(){ alert("按鈕1被點(diǎn)擊了..."); } </script>瀏覽器打開(kāi)，然后點(diǎn)擊按鈕，彈框如下：
-
方式2：通過(guò)DOM中Element元素的事件屬性進(jìn)行綁定
依據(jù)我們學(xué)習(xí)過(guò)得DOM的知識(shí)點(diǎn)，我們知道html中的標(biāo)簽被加載成element對(duì)象，所以我們也可以通過(guò)element對(duì)象的屬性來(lái)操作標(biāo)簽的屬性。此時(shí)我們?cè)俅翁砑右粋€(gè)按鈕，代碼如下：
<input type="button" id="btn2" value="事件綁定2">我們可以先通過(guò)id屬性獲取按鈕對(duì)象，然后操作對(duì)象的onclick屬性來(lái)綁定事件，代碼如下：
document.getElementById('btn2').onclick = function(){ alert("按鈕2被點(diǎn)擊了..."); }瀏覽器刷新頁(yè)面，點(diǎn)擊第二個(gè)按鈕，彈框如下：
需要注意的是：事件綁定的函數(shù)，只有在事件被觸發(fā)時(shí)，函數(shù)才會(huì)被調(diào)用。
整體代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS-事件-事件綁定</title> </head> <body> <input type="button" id="btn1" value="事件綁定1" onclick="on()"> <input type="button" id="btn2" value="事件綁定2"> </body> <script> function on(){ alert("按鈕1被點(diǎn)擊了..."); } document.getElementById('btn2').onclick = function(){ alert("按鈕2被點(diǎn)擊了..."); } </script> </html>
3 常見(jiàn)事件
上面案例中使用到了 onclick 事件屬性，那都有哪些事件屬性供我們使用呢？下面就給大家列舉一些比較常用的事件屬性
| 事件屬性名 | 說(shuō)明 |
|---|---|
| onclick | 鼠標(biāo)單擊事件 |
| onblur | 元素失去焦點(diǎn) |
| onfocus | 元素獲得焦點(diǎn) |
| onload | 某個(gè)頁(yè)面或圖像被完成加載 |
| onsubmit | 當(dāng)表單提交時(shí)觸發(fā)該事件 |
| onmouseover | 鼠標(biāo)被移到某元素之上 |
| onmouseout | 鼠標(biāo)從某元素移開(kāi) |
在代碼中提供了10. JS-事件-常見(jiàn)事件.html的文件，我們可以通過(guò)瀏覽器打開(kāi)來(lái)觀察幾個(gè)常用事件的具體效果：
-
onfocus:獲取焦點(diǎn)事件，鼠標(biāo)點(diǎn)擊輸入框，輸入框中光標(biāo)一閃一閃的，就是輸入框獲取焦點(diǎn)了
-
onblur:失去焦點(diǎn)事件，前提是輸入框獲取焦點(diǎn)的狀態(tài)下，在輸入框之外的地方點(diǎn)擊，光標(biāo)從輸入框中消失了，這就是失去焦點(diǎn)。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-736135.html
后記
????????美好的一天，到此結(jié)束，下次繼續(xù)努力！欲知后續(xù)，請(qǐng)看下回分解，寫(xiě)作不易，感謝大家的支持??！ ??????文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-736135.html
到了這里，關(guān)于掌握 JavaScript：從初學(xué)者到高級(jí)開(kāi)發(fā)者的完整指南（三）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
