JavaScript中BOM,DOM和事件的用法詳解
BOM
概念
BOM全稱Browser Object Model瀏覽器對象模型，將瀏覽器的各個組成部分封裝成對象。
對象組成
- Window：窗口對象
- Navigator：瀏覽器對象
- Screen：顯示器屏幕對象
- History：歷史記錄對象
- Location：地址欄對象
Window：窗口對象
方法
與彈出框有關(guān)的方法
alert() 顯示帶有一段消息和一個確認(rèn)按鈕的警告框。 confirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。 如果用戶點擊確定按鈕，則方法返回true 如果用戶點擊取消按鈕，則方法返回false prompt() 顯示可提示用戶輸入的對話框。 返回值：獲取用戶輸入的值
與打開關(guān)閉有關(guān)的方法
close() 關(guān)閉瀏覽器窗口。 誰調(diào)用我 ，我關(guān)誰 open() 打開一個新的瀏覽器窗口 返回新的Window對象
與定時器有關(guān)的方式
setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式。
參數(shù)：
- js代碼或者方法對象
- 毫秒值
返回值：唯一標(biāo)識，用于取消定時器
clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。 setInterval() 按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式。 clearInterval() 取消由 setInterval() 設(shè)置的 timeout。
屬性
獲取其他BOM對象
history location Navigator Screen:
獲取DOM對象
document
特點
Window對象不需要創(chuàng)建可以直接使用 window使用。 window.方法名(); window引用可以省略。 方法名();
Location：地址欄對象
創(chuàng)建(獲取)：
window.location location
方法：
reload() 重新加載當(dāng)前文檔。刷新
屬性
href 設(shè)置或返回完整的 URL。
History：歷史記錄對象
創(chuàng)建(獲取)：
window.history history
方法：
back() 加載 history 列表中的前一個 URL。 forward() 加載 history 列表中的下一個 URL。 go(參數(shù)) 加載 history 列表中的某個具體頁面。
參數(shù)：
正數(shù)：前進(jìn)幾個歷史記錄 負(fù)數(shù)：后退幾個歷史記錄
屬性
length 返回當(dāng)前窗口歷史列表中的 URL 數(shù)量。
DOM
概念
DOM全稱Document Object Model 文檔對象模型，將標(biāo)記語言文檔的各個組成部分，封裝為對象?？梢允褂眠@些對象，對標(biāo)記語言文檔進(jìn)行CRUD的動態(tài)操作。
W3C DOM 標(biāo)準(zhǔn)被分為 3 個不同的部分
1.核心 DOM - 針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型
Document：文檔對象 Element：元素對象 Attribute：屬性對象 Text：文本對象 Comment:注釋對象 Node：節(jié)點對象，其他5個的父對象
2.XML DOM - 針對 XML 文檔的標(biāo)準(zhǔn)模型
3.HTML DOM - 針對 HTML 文檔的標(biāo)準(zhǔn)模型
核心DOM模型
Document：文檔對象
創(chuàng)建(獲取)：在html dom模型中可以使用window對象來獲取
1. window.document
2. document
方法：
1.獲取Element對象：
- getElementById() ： 根據(jù)id屬性值獲取元素對象。id屬性值一般唯一
- getElementsByTagName()：根據(jù)元素名稱獲取元素對象們。返回值是一個數(shù)組
- getElementsByClassName():根據(jù)Class屬性值獲取元素對象們。返回值是一個數(shù)組
- getElementsByName(): 根據(jù)name屬性值獲取元素對象們。返回值是一個數(shù)組
2.創(chuàng)建其他DOM對象：
createAttribute(name) createComment() createElement() createTextNode()
Element：元素對象
獲取/創(chuàng)建：通過document來獲取和創(chuàng)建
方法
1. removeAttribute()：刪除屬性
2. setAttribute()：設(shè)置屬性
Node：節(jié)點對象，其他5個的父對象
特點：所有dom對象都可以被認(rèn)為是一個節(jié)點
方法
CRUD dom樹：
appendChild()：向節(jié)點的子節(jié)點列表的結(jié)尾添加新的子節(jié)點。
removeChild() ：刪除（并返回）當(dāng)前節(jié)點的指定子節(jié)點。
replaceChild()：用新節(jié)點替換一個子節(jié)點。
屬性
parentNode 返回節(jié)點的父節(jié)點。
HTML DOM
- 標(biāo)簽體的設(shè)置和獲?。篿nnerHTML
- 使用html元素對象的屬性
- 控制元素樣式
使用元素的style屬性來設(shè)置
如： //修改樣式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; //font-size--> fontSize div1.style.fontSize = "20px";
提前定義好類選擇器的樣式，通過元素的className屬性來設(shè)置其class屬性值。
事件監(jiān)聽機(jī)制
概念
概念：某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。
- 事件：某些操作。如： 單擊，雙擊，鍵盤按下了，鼠標(biāo)移動了
- 事件源：組件。如： 按鈕 文本輸入框...
- 監(jiān)聽器：代碼。
- 注冊監(jiān)聽：將事件，事件源，監(jiān)聽器結(jié)合在一起。 當(dāng)事件源上發(fā)生了某個事件，則觸發(fā)執(zhí)行某個監(jiān)聽器代碼。
常見的事件
點擊事件
onclick：單擊事件
ondblclick：雙擊事件
焦點事件
onblur：失去焦點
onfocus:元素獲得焦點。
加載事件
onload：一張頁面或一幅圖像完成加載。
鼠標(biāo)事件
- onmousedown 鼠標(biāo)按鈕被按下。
- onmouseup 鼠標(biāo)按鍵被松開。
- onmousemove 鼠標(biāo)被移動。
- onmouseover 鼠標(biāo)移到某元素之上。
- onmouseout 鼠標(biāo)從某元素移開。
鍵盤事件
- onkeydown 某個鍵盤按鍵被按下。
- onkeyup 某個鍵盤按鍵被松開。
- onkeypress 某個鍵盤按鍵被按下并松開。
選擇和改變
- onchange 域的內(nèi)容被改變。
- onselect 文本被選中。
表單事件
- onsubmit 確認(rèn)按鈕被點擊。
- onreset 重置按鈕被點擊。
事件簡單學(xué)習(xí)
功能： 某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。
造句： xxx被xxx,我就xxx 我方水晶被摧毀后，我就責(zé)備對友。 敵方水晶被摧毀后，我就夸獎自己。
如何綁定事件
- 直接在html標(biāo)簽上，指定事件的屬性(操作)，屬性值就是js代碼
- 事件：onclick--- 單擊事件
- 通過js獲取元素對象，指定事件屬性，設(shè)置一個函數(shù)
代碼：
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun(){
alert('我被點了');
alert('我又被點了');
}
function fun2(){
alert('咋老點我？');
}
//1.獲取light2對象
var light2 = document.getElementById("light2");
//2.綁定事件
light2.onclick = fun2;
</script>
</body>
案例1：電燈開關(guān)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電燈開關(guān)</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
/
分析：
1.獲取圖片對象
2.綁定單擊事件
3.每次點擊切換圖片
規(guī)則：
如果燈是開的 on,切換圖片為 off
如果燈是關(guān)的 off,切換圖片為 on
使用標(biāo)記flag來完成
/
//1.獲取圖片對象
var light = document.getElementById("light");
var flag = false;//代表燈是滅的。 off圖片
//2.綁定單擊事件
light.onclick = function(){
if(flag){//判斷如果燈是開的，則滅掉
light.src = "img/off.gif";
flag = false;
}else{
//如果燈是滅的，則打開
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
</html>
效果如下：
以上就是JavaScript中BOM,DOM和事件的用法詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript BOM DOM 事件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了微信小程序開發(fā)中遇到的幾個小問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
Moment.js是一個輕量級的JavaScript時間庫,通常會對時間進(jìn)行下面這幾個操作：比如獲取時間,設(shè)置時間,格式化時間,比較時間等等,本文就來介紹一下如何使用,感興趣的可以了解下2023-09-09
JavaScript實現(xiàn)九宮格抽獎功能的示例代碼
這篇文章主要為大家介紹了如何利用JavaScript實現(xiàn)九宮格抽獎功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
本篇文章講解彈出浮動層的javascript函數(shù), 以及函數(shù)的原理和使用注意事項.2011-02-02
Echarts中的clear()和dispose()用法實例
這篇文章主要給大家介紹了關(guān)于Echarts中clear()和dispose()用法的相關(guān)資料,clear和dispose是echarts提供的用于解決內(nèi)存溢出的方法 ,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
最近小編接到這樣的項目需求，接口返回的數(shù)據(jù)中時間單位為秒，但前端顯示的時候需要更人性化的帶有單位（天，小時，分鐘，秒）的字符串；下面小編給大家?guī)韺嵗a，感興趣的朋友跟隨小編一起看看吧2019-07-07
一文教你徹底學(xué)會JavaScript手寫防抖節(jié)流
其實防抖和節(jié)流不僅僅在面試中會讓大家手寫，在實際項目中也可以起到性能優(yōu)化的作用，所以還是很有必要掌握的。本文就帶大家徹底學(xué)會JavaScript手寫防抖節(jié)流，需要的可以參考一下2022-11-11
JavaScript Cookie 直接瀏覽網(wǎng)站分網(wǎng)址
2009-12-12
Flexigrid在IE下不顯示數(shù)據(jù)的有效處理方法
Flexigrid在IE下不顯示數(shù)據(jù)的處理方法是：指定一下Ajax請求數(shù)據(jù)的方式為Get方式,遇到此問題的朋友可以參考下2014-09-09
JavaScript代碼實現(xiàn)春晚劉謙魔術(shù)的模擬程序
昨晚春晚上劉謙的兩個魔術(shù)表演都非常精彩,尤其是第二個魔術(shù),他演繹了經(jīng)典的約瑟夫環(huán)問題！約瑟夫環(huán)是一個經(jīng)典的數(shù)學(xué)問題,本文給出了完整的 JavaScript 代碼實現(xiàn),感興趣的同學(xué)可以自己動手實現(xiàn)一下2024-02-02