1. window 和document 對象
瀏覽器每次加載和顯示頁面時,都在內存里創建頁面及其全部元素的一個內部表示體系,也就是DOM。在DOM 里,頁面的元素具有一個邏輯化、層級化的結構,就像一個由父對象和子對象組成的樹形結構。這些對象及其相互關系構成了Web 頁面及顯示頁面的瀏覽器的抽象模型。每個對象都有“屬性”列表來描述它,而利用JavaScript可以使用一些方法來操作這些屬性。
這個層級樹的最頂端是瀏覽器window對象,它是DOM 樹里一切對象的根。window對象具有一些子對象,如圖下圖所示。圖中第一個子對象是document,這也是最經常使用的對象。瀏覽器加載的任何HTML頁面都會創建一個document對象,包含全部HTML內容及其他構成頁面顯示的資源。利用JavaScript以父子對象的形式就可以訪問這些信息。這些對象都具有自己的屬性和方法。
2. DOM對象和內置對象
2.1 alert()
alert() 沒有返回值,向用戶彈出一個對話框。
2.2 confirm()
confirm() 對話框為用戶提供了一個選擇,可以點擊“確定”或者“取消”按鈕。點擊任意一個按鈕都會關閉對話框,讓腳本繼續執行,但根據哪個按鈕被單擊,confirm()方法返回不同的值。單擊“確定”返回布爾值“真”,單擊“取消”返回布爾值“假”。
2.3 prompt()
prompt() 是打開模態對話框的另一種方式,它允許用戶輸入信息。使用示例:
var name =prompt(“what is your name?”);prompt() 方法還可以有第二個可選參數,表示默認的輸入內容,從而避免用戶直接點擊“確定”而不輸入任何內容。如,
var name = prompt(“what is your name?”,”John”);
當用戶輸入了信息,然后點擊“確定”按鈕或者按回車鍵后,返回值就是用戶輸入的字符串;如果用戶沒有在對話框輸入信息就點擊“確定按鈕”或者按回車鍵,返回值就是prompt()方法設置的第二個可選參數的值(如果有的話);當用戶簡單關閉了這個對話框(點擊了“取消”或者按了Esc鍵),返回值就是null。
2.4 根據ID選取元素
如果想從HTML頁面里選擇某個特定id的元素,我們只需要把相應的id作為參數來調用document對象的 getElementById()方法,他就會返回特定id的頁面元素所對應的DOM對象。例如,
var myDiv = document.getElementById(“div1”);
注:innerHTML屬性的介紹:innerHTML屬性可以讀取或者設置特定頁面元素內部的HTML內容。假設假設HTML頁面包含如下元素:
<div id=”div1”> <p> Here is some originaltext. </p> </div>
如果執行下面的語句
var myDivContents =document.getElementById().innerHTML;
那么myDivContents則包含了如下字符串:Hereis some original text.
2.5 訪問瀏覽器記錄
在JavaScript里,瀏覽器的歷史記錄是以 window.history對象代表的,它基本上就是訪問過的URL列表。這個對象的方法讓我們能夠使用這個列表,但是不能直接修改這些URL。這個對象只有一個屬性,就是他的長度,即history.length。有三個方法,forward(),backward(),go()。
forward()和backward()方法相當于點擊瀏覽器的“前進”和“后退”按鈕。
go()方法有一個參數,正數或者負數,可以跳到歷史記錄列表里的相對位置。如,
history.go(-3); // 回退3個頁面 history.go(2); // 前進2個頁面這個方法也可以接受字符串作為參數,找到歷史記錄列表里第一匹配的URL。如,
history.go(“example.com”); //到達歷史記錄列表里面第一個包含“example.com”的URL
2.6 location對象
location對象主要是包含當前加載頁面的URL信息。
location對象的屬性:
屬性 | 描述 |
設置或返回從井號 (#) 開始的 URL(錨)。 | |
設置或返回主機名和當前 URL 的端口號。 | |
設置或返回當前 URL 的主機名。 | |
設置或返回完整的 URL。 | |
設置或返回當前 URL 的路徑部分。 | |
設置或返回當前 URL 的端口號。 | |
設置或返回當前 URL 的協議。 | |
設置或返回從問號 (?) 開始的 URL(查詢部分)。 |
利用location對象導航。第一種是直接設置對象的href屬性:
location.href= ‘www.baidu.com’;
使用這種方法把用戶轉移到新頁面時,原始頁面還保留在瀏覽器的歷史記錄里面。第二種是直接用新的URL代替當前頁面,即把當前頁面從歷史記錄列表里刪除。如:
location.replace(‘www.baidu.com’);
更多內容可以參考 JavaScript手冊