1、window對象
window對象是BOM的核心,window對象指當前的瀏覽器窗口,window對象中有很多種方法供開發者調用:
方法 | 描述 |
---|---|
alert() | 顯示帶有一段消息和一個確認按鈕的警告框 |
prompt() | 顯示可提示用戶輸入的對話框 |
confirm() | 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框 |
open() | 打開一個新的瀏覽器窗口,或者查找一個已命名的窗口 |
close() | 關閉瀏覽器窗口 |
print() | 打印當前窗口內容 |
focus() | 把鍵盤焦點給予一個窗口 |
blur() | 把鍵盤焦點從頂層窗口移開 |
movebBy() | 可相對窗口的當前座標把它移動到指定的像素 |
moveTo() | 把窗口的左上角移動到一個指定的座標 |
resizeBy() | 按照指定的像素調整窗口的大小 |
resizeTo() | 把窗口的大小調整到指定的寬和高 |
scrollBy() | 按照指定的像素值來滾動內容 |
scrollTo() | 把內容滾動到指定位置 |
setInterval() | 每隔指定的時間執行代碼 |
setTimeOut() | 在指定的延遲時間之後來執行代碼 |
clearInterval() | 取消setInterval的值 |
clearTimeout() | 取消setTimeOut的值 |
2、history對象
history對象記錄了用戶曾經瀏覽過的頁面(URL),並可以實現瀏覽器前進與後退相似導航的功能。需要注意的是從窗口被打開的那一刻開始記錄,每個瀏覽器窗口、每個標籤頁乃至每個框架,都有自己的history對象與特定的window對象關聯。
方法/屬性 | 描述 |
---|---|
length | 返回瀏覽器歷史列表中的URL數量 |
back() | 加載history列表中的前一個URL |
forward() | 加載history列表中的下一個URL |
go() | 加載history列表中的某個具體的頁面 |
3、location對象
location用於獲取或設置窗體的URL,並且可以用於解析URL。我們先看看location對象屬性圖示:
下面是location對象的一些屬性以及方法:
方法/屬性 | 描述 |
---|---|
hash | 設置或返回從#號開始的URL(錨) |
host | 設置或返回主機名和當前URL的端口號 |
hostname | 設置或返回當前URL的主機名 |
href | 設置或返回完整的URL |
pathname | 設置或返回從#號開始的URL(錨) |
port | 設置或返回當前URL的端口號 |
protocol | 設置或返回當前URL的協議) |
search | 設置或返回從?號開始的URL(查詢部分) |
assign() | 加載新的文檔 |
reload() | 重新加載當前文檔 |
replace() | 用心的文檔替換當前文檔 |
4、navigator對象
navigator對象包含有關瀏覽器的信息,通常用於檢測瀏覽器與操作系統的版本。以下是navigator對象的一些屬性:
屬性 | 描述 |
---|---|
appCodeName | 瀏覽器代碼名的字符串表示 |
appName | 返回瀏覽器名稱 |
appVersion | 返回瀏覽器的平臺和版本信息 |
platform | 返回運行瀏覽器的操作系統平臺 |
userAgent | 返回由客戶機發送服務器的user-agent頭部值 |
4.1、userAgent
返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串);幾種瀏覽的user_agent,像360的兼容模式用的是IE、極速模式用的是chrom的內核。可以使用userAgent屬性來判斷使用的是什麼瀏覽器:
5、screen對象
screen對象用於獲取用戶的屏幕信息,以下是screen對象的屬性
屬性 | 描述 |
---|---|
avaiHeight | 窗口可以使用的屏幕高度,單位爲像素 |
avaiWidth | 窗口可以使用的屏幕寬度,單位爲像素 |
colorDepth | 用戶瀏覽器表示的顏色位數,通常爲32位(每像素的位數)(IE瀏覽器不支持) |
pixelDepth | 窗口可以使用的屏幕高度,單位爲像素 |
height | 屏幕的高度,單位爲像素 |
width | 屏幕的寬度,單位爲像素 |
6、DOM對象
文檔對象模型DOM(Document Object Model)定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構(節點樹)。將HTML代碼分解爲DOM節點層次如圖所示:
HTML文檔是由節點構成的集合,DOM節點有以下幾種:
6.1、元素節點:上圖中html、body、p等都是元素節點,即標籤。 6.2、文本節點:向用戶展示的內容,入li中的JavaScript、DOM、CSS等文本。 6.3、屬性節點:元素屬性,如a標籤的鏈接屬性href="http:xxx.xxx.xxx"。
節點屬性如下表:
屬性 | 說明 |
---|---|
nodeName | 返回一個字符串,其內容是給定節點的名字 |
nodeType | 返回一個整數,這個數值代表給定節點的類型 |
nodeValue | 返回給定節點的當前值 |
- nodeName 屬性: 節點的名稱,是隻讀的。
- 元素節點的 nodeName 與標籤名相同
- 屬性節點的 nodeName 是屬性的名稱
- 文本節點的 nodeName 永遠是 #text
- 文檔節點的 nodeName 永遠是 #document
- nodeValue 屬性:節點的值
- 元素節點的 nodeValue 是 undefined 或 null
- 文本節點的 nodeValue 是文本自身
- 屬性節點的 nodeValue 是屬性的值
- nodeType 屬性: 節點的類型,是隻讀的。以下常用的幾種結點類型:
元素類型 | 節點類型 |
---|---|
元素 | 1 |
屬性 | 2 |
文本 | 3 |
註釋 | 8 |
文檔 | 9 |
遍歷節點樹:
方法 | 說明 |
---|---|
childNodes | 返回一個數組,這個數組由給定元素節點的子節點 |
firstChild | 返回第一個子節點 |
lastChild | 返回最後一個節點 |
parentNode | 返回一個給定節點的父節點 |
nextSibling | 返回給定節點的下一個節點 |
previousSibling | 返回給定節點的下一個節點 |
DOM操作:
方法 | 說明 |
---|---|
createElement(ele) | 創建一個新的元素節點 |
createTextNode() | 創建一個包含着給定文本的新文本節點 |
appendChild() | 指定節點的最後一個節點列表之後添加一個新的子節點 |
insertBefore() | 將一個給定節點插入到一個給定元素節點的給定子節點前面 |
removeChild() | 從一個給定元素中刪除字子節點 |
replaceChild(ele) | 把一個給定元素裏的一個子節點替換成另外一個節點 |
6.4、getElementsByName()方法,返回帶有指定名稱的節點對象的集合。
- 因爲文檔中的name屬性可能不唯一,所有getElementsByName() 方法返回的是元素的數組,而不是一個元素。
- 和數組類似也有length屬性,可以和訪問數組一樣的方法來訪問,從0開始。
6.5、getElementsByTagName()方法,返回帶有指定標籤名的節點對象的集合。返回元素的順序是它們在文檔中的順序。
- Tagname是標籤的名稱,如p、a、img等標籤名。
- 和數組類似也有length屬性,可以和訪問數組一樣的方法來訪問,所以從0開始。