1、BOM對象
在JavaScript中把一個瀏覽器啓動之後,瀏覽器這個應用程序就會被加載到內存中運行。那麼在內存就會形成一個對象,這個對象就是Window。
window對象中包含了瀏覽器的所有信息, 由於這些過多,因此有在window對象中封裝了其他的子對象。
window的子對象:
Navigator:獲取瀏覽器本身的一些信息,例如瀏覽器版本等信息。
Screen:獲取整個瀏覽器窗口在屏幕上的相關信息
History:使用瀏覽器訪問其他網絡資源,這時瀏覽器會記錄住訪問過的信息,那麼可以History來獲取訪問過的資源路徑
Location:它封裝的是瀏覽器的地址欄中的信息,使用它可以修改瀏覽器地址欄中的URL.
它們合在一起組成BOM對象。BOM Browser Object Model 瀏覽器對象模型
2、Window對象
Window 對象是 JavaScript 層級中的頂層對象。
Window 對象代表一個瀏覽器窗口或一個框架。
Window 對象會在 <body> 或 <frameset> 每次出現時被自動創建。
Window中的集合(數組):
frames[] 獲取一個窗口中的所有frame組成的集合
Window中的屬性:
Window中的方法:
closed 判斷窗口是否被關閉
document 獲取到一個document對象 文檔對象
history 獲取到歷史記錄對象 window.location.href="www.momxmo.com"
location 地址欄對象
返回上一次訪問網站:window.history.back();
關閉網頁:window.close();
status 獲取窗口的狀態欄,可以設置和獲取狀態欄中的信息
opener 獲取到當前這個瀏覽器是通過哪個瀏覽器打開的。
parent 獲取當前窗口的父窗口
self 當前窗口的一些引用的信息
top 獲取當前窗口的頂層window對象
window對象中的方法:
alert() 警告框
confirm() 確認框
prompt() 輸入框
setInterval() 通過js設置讓瀏覽器對象重複的執行某段js代碼
clearInterval() 清除這種重複執行JS代碼的動作
setTimeout() 在指定的時間後執行指定的JS代碼,只執行一次
clearTimeout() 清除在指定的時間後需要執行的JS代碼
close() 關閉瀏覽器
open() 打開一個新的窗口
4、DOM對象 :------ html dom ---- xml dom
DOM 是 Document Object Model 文檔對象模型
DOM技術是由W3C組織制定的,這裏的文檔Document指的是標記性文檔。使用標籤書寫的文檔(html、xml)。
Document 對象代表整個 HTML 文檔,可用來訪問頁面中的所有元素。
Document 對象是 Window 對象的一個部分,可通過 window.document 屬性來訪問。
當html文件(html文檔)被瀏覽器加載到內存中之後,在內存中就形成了文檔對象,這個對象使用document來描述。在JavaScript中,只要獲取到document對象,就相當於拿到整個html文檔。拿到整個html文檔,就可以獲取其中封裝的任何一個標籤,以及標籤中的屬性,或者標籤中封裝的文本數據。
W3C組織在指定DOM規範的時候,規定當一個標記性文檔被加載到內存中之後,這個文檔中的所有的標籤,全部又被解析成標籤對象,標籤中的屬性被解析成屬性對象,標籤中封裝的文本被解析成文本對象。
當我們在程序獲取到document對象,就可以獲取或設置整個dom樹上的任何一個標籤(元素)對象,以及任何一個標籤中的屬性數據,文本數據。
在獲取到document對象之後,就可以獲取其中的任何一個標籤,獲取到這個標籤之後,就可以根據當前這個標籤獲取它的父標籤,子標籤,前一個兄弟標籤,後一個兄弟標籤。
document對象集合
forms[] 獲取整個html文檔中的所有form標籤組成對象
document對象的屬性
body 獲取到當前html標籤對象
document對象的方法:
getElementById() 是根據標籤的id屬性值,獲取這個標籤對象
getElementsByName() 根據標籤的name屬性值,獲取當前html文檔中所有name爲當前指定的值的所有標籤對象 獲取到是一個數組(集合)
getElementsByTagName() 根據標籤名獲取標籤對象,由於在html頁面上標籤名肯定會重複,所以獲取到的也是一個數組(集合)。
js中的事件:
在使用JS操作頁面上的標籤,每個標籤上都有對應的事件。這些事件不用我們去給其註冊,它已經存在,需要我們做的
給相應的事件綁定對應的函數。
在html文件加載完之後會觸發的onload事件
onblur 失去焦點時觸發的事件
onfocus 獲取焦點後觸發的事件
onchange 當標籤中的數據被改變時觸發
onclick 當鼠標單擊時觸發的事件
ondblclick 當鼠標雙擊時觸發的事件
onmousedown 鼠標被按下但沒有鬆開
onmousemove 鼠標在某個標籤對象上移動
onmouseout 鼠標從標籤對象上移出
onmouseover 鼠標懸停在某個標籤對象上
onmouseup 鼠標鬆開
onsubmit form表單被提交的時候觸發的事件
7.1、dom中常用的方法
document.createElement("table") 創建了一個table標籤<table></table>
createTextNode 創建文本節點對象
appendChild 把子節點添加到父節點上
setAttribute(name,value) 給標籤對象設置屬性 name是屬性名 value是屬性值
parentNode 獲取當前調用這個方法的標籤對象的父標籤
parenNode.removeChild(childNode) 通過父標籤刪除子標籤
firstChild 獲取第一個子節點
lastChild 獲取最後一個子節點
nextSibling 獲取下一個兄弟節點
previousSibling 獲取前一個兄弟節點
在獲取兄弟節點的時候,如果標籤之間有空白內容,比如回車,也會被當作自己的兄弟節點存在。