BOM和DOM關係圖
與BOM相關的一些對象
window對象:整個BOM的核心,在瀏覽器中打開網頁時,首先看到的是瀏覽器的窗口,即頂層的window對象。調用window對象的方法可以直接使用方法名。
window對象的常用屬性
名稱 |
說明 |
history |
有關客戶訪問過的URL的信息 |
location |
有關當前URL的信息 |
window對象的常用方法
名稱 |
說明 |
prompt() |
顯示可提示用戶輸入的對話框 |
alert() |
顯示一個帶有提示信息和一個“確定”按鈕的警示對話框 |
confirm() |
顯示一個帶有提示信息、“確定”和“取消”按鈕的對話框 |
close() |
關閉瀏覽器窗口 |
open() |
打開一個新的裏瀏覽器窗口,加載給定URL所指定的文檔 |
setTimeout() |
在指定的毫秒數後調用函數或計算表達式(只執行一次) |
setInterval() |
按照指定的週期(以毫秒計)來調用函數或表達式(循環) |
說明:setTimeout()和setInterval()方法可用clearTimeout(setTimeout()返回的ID值)和clearInterval(setInterval()返回的ID值)來清除。
window對象的常用事件
名稱 |
說明 |
onload |
一個頁面或一幅圖像完成加載 |
onmouseover |
鼠標指針移到某元素之上 |
onclick |
鼠標單擊某個對象 |
onkeydown |
某個鍵盤按下時 |
onchange |
域的內容改變時 |
history對象:提供用戶最近瀏覽過的URL列表。
history對象的方法
名稱 |
描述 |
back() |
加載history對象列表中的前一個URL |
forward() |
加載history對象列表中的後一個URL |
go() |
加載history對象列表中的某個具體URL(通過參數指定) |
location對象:提供當前頁面的URL信息,並且可以重新裝載當前頁面或裝入新頁面。
location對象的屬性
名稱 |
描述 |
host |
設置或返回主機名和當前URL的端口號 |
hostname |
設置或返回當前URL的主機名 |
href |
設置或返回完整的URL |
location對象的方法
名稱 |
描述 |
reload() |
重新加載當前文檔 |
replace() |
用新的文檔替換當前文檔 |
document對象:既是window對象的一部分,又代表了整個HTML文檔,可用來訪問頁面中的所有元素。
document對象的常用屬性
名稱 |
描述 |
referrer |
返回載入當前文檔的URL |
URL |
返回當前文檔的URL |
document對象的常用方法
名稱 |
描述 |
getElementById() |
返回對擁有指定id的第一個對象的引用 |
getElementsByName() |
返回帶有指定名稱的對象的集合 |
getElementsByTagName() |
返回帶有指定標籤名的對象的集合 |
write() |
向文檔寫文本,HTML表達式或JavaScript代碼 |
DOM模型:每一個(X)HTML頁面,都具有一個DOM,每一個DOM都可以表示成一棵樹,這棵樹有包括很多的節點,DOM裏面的節點通常分爲3中類型,即元素節點、文本節點和屬性節點。
元素節點:HTML中的各種標籤,這些元素在文檔中的佈局形成了文檔的結構。
文本節點:標籤中的內容,網頁內容決定了一切。
屬性節點:對元素做出了更具體的描述。屬性節點都是元素節點的子節點。
DOM對象:可以使用getElementsByTagName()或者getElementById()來獲取的元素節點,通過該方式得到的DOM元素就是DOM對象。