第JavaScript中BOM,DOM和事件的用法詳解目錄BOM概念對象組成Window：窗口對象Location：地址欄對象History：歷史記錄對象DOM概念W3CDOM標(biāo)準(zhǔn)被分為3個不同的部分核心DOM模型HTMLDOM事件監(jiān)聽機制概念常見的事件事件簡單學(xué)習(xí)

BOM

概念

BOM全稱BrowserObjectModel瀏覽器對象模型，將瀏覽器的各個組成部分封裝成對象。

對象組成

Window：窗口對象Navigator：瀏覽器對象Screen：顯示器屏幕對象History：歷史記錄對象Location：地址欄對象

Window：窗口對象

方法

與彈出框有關(guān)的方法

alert()顯示帶有一段消息和一個確認(rèn)按鈕的警告框。confirm()顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。如果用戶點擊確定按鈕，則方法返回true如果用戶點擊取消按鈕，則方法返回falseprompt()顯示可提示用戶輸入的對話框。返回值：獲取用戶輸入的值

與打開關(guān)閉有關(guān)的方法

close()關(guān)閉瀏覽器窗口。誰調(diào)用我，我關(guān)誰open()打開一個新的瀏覽器窗口返回新的Window對象

與定時器有關(guān)的方式

setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。

參數(shù)：

js代碼或者方法對象毫秒值

返回值：唯一標(biāo)識，用于取消定時器

clearTimeout()取消由setTimeout()方法設(shè)置的timeout。setInterval()按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。clearInterval()取消由setInterval()設(shè)置的timeout。

屬性

獲取其他BOM對象

historylocationNavigatorScreen:

獲取DOM對象

document

特點

Window對象不需要創(chuàng)建可以直接使用window使用。window.方法名();window引用可以省略。方法名();

Location：地址欄對象

創(chuàng)建(獲取)：

window.locationlocation

方法：

reload()重新加載當(dāng)前文檔。刷新

屬性

href設(shè)置或返回完整的URL。

History：歷史記錄對象

創(chuàng)建(獲取)：

window.historyhistory

方法：

back()加載history列表中的前一個URL。forward()加載history列表中的下一個URL。go(參數(shù))加載history列表中的某個具體頁面。

參數(shù)：

正數(shù)：前進幾個歷史記錄負(fù)數(shù)：后退幾個歷史記錄

屬性

length返回當(dāng)前窗口歷史列表中的URL數(shù)量。

DOM

DOM全稱DocumentObjectModel文檔對象模型，將標(biāo)記語言文檔的各個組成部分，封裝為對象。可以使用這些對象，對標(biāo)記語言文檔進行CRUD的動態(tài)操作。

W3CDOM標(biāo)準(zhǔn)被分為3個不同的部分

1.核心DOM-針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型

Document：文檔對象Element：元素對象Attribute：屬性對象Text：文本對象Comment:注釋對象Node：節(jié)點對象，其他5個的父對象

2.XMLDOM-針對XML文檔的標(biāo)準(zhǔn)模型

3.HTMLDOM-針對HTML文檔的標(biāo)準(zhǔn)模型

核心DOM模型

Document：文檔對象

創(chuàng)建(獲取)：在htmldom模型中可以使用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é)點

方法

CRUDdom樹：

appendChild()：向節(jié)點的子節(jié)點列表的結(jié)尾添加新的子節(jié)點。

removeChild()：刪除（并返回）當(dāng)前節(jié)點的指定子節(jié)點。

replaceChild()：用新節(jié)點替換一個子節(jié)點。

屬性

parentNode返回節(jié)點的父節(jié)點。

HTMLDOM

標(biāo)簽體的設(shè)置和獲?。篿nnerHTML使用html元素對象的屬性控制元素樣式

使用元素的style屬性來設(shè)置

如：//修改樣式方式1div1.style.border=1pxsolidreddiv1.style.width=200px//font-size--fontSizediv1.style.fontSize=20px

提前定義好類選擇器的樣式，通過元素的className屬性來設(shè)置其class屬性值。

事件監(jiān)聽機制

概念：某些組件被執(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

imgid="light"src="img/off.gif"

imgid="light2"src="img/off.gif"

script

functionfun(){