章簡介：

我們在上一章認識了JavaScript的主要作用，JavaScript的基本語法及函數，和在網頁中引入JavaScript的三種方式。

本章來認識與DOM相關的一些對象，其中包括了 window、document、location''、history對象，以及Data時間對象和常用的定時函數。

本章單詞：

Confirm 確認提示窗

Open 打開

Close 關閉

Interval 間隔，

Timeout 超時

Element 元素

2、1 Window對象

瀏覽器對象模型（DOM）是JavaScript的組成之一，它提供了獨立于內容與瀏覽器窗口進行交互的對象，使用瀏覽器對象模型可以實現與HTML的交互。

Window對象是整個BOM的核心，在瀏覽器中打開網頁后，首先看到的是瀏覽器窗口，即頂層的window對象，其次才是網頁文檔內容（document）。

Window對象也稱為瀏覽器對象，當瀏覽器打開HTML文檔時，通常會創建一個window對象，如果文檔定義了一個或多個框架，瀏覽器將為原始文檔創建一個window對象，同時為每個框架另外創建一個window對象。

1 常用屬性

History 有關客戶訪問過的URL的信息

Location 有關當前URL的信息

Screen 只讀屬性，包含有關客戶端顯示屏幕的信息

2 常用方法

Prompt() 顯示可提示用戶輸入的對話框

window.prompt("","");

有兩個參數，是輸入對話框，用來提示用戶輸入一些信息。

Alert() 顯示一個帶有提示信息和一個確定按鈕的警告提示框

window.alert("");

只有一個參數，僅顯示警告對話框的信息，無返回值，不能對腳步產生任何改變。

Confirm() 顯示一個帶有提示信息，"確定"和"取消"按鈕的對話框。

window.confirm("");

只有一個參數，是確認對話框，顯示對話框的消息，"確認"和"取消"按鈕。

Close（） 關閉瀏覽器窗口

window.close();

Open（） 打開一個新的瀏覽器窗口，加載指定的URL所指定的文檔

window.open("");

SetTimeout（） 在指定的毫秒數后調用函數和計算表達式，只調用一次

window.setTimeout("");

SetInterval（） 按照指定的周期（以毫秒計）來調用函數或表達式，無限次調用。

window.setInterval("");

2、2 history對象

History對象提供用戶最近瀏覽過的URL列表，出于隱私原因，已經不再允許腳步訪問已經訪問過的實際URL，但是可以使用history對象提供的方法，逐個返回訪問過的頁面的方法。

Back（） 加載history對象列表中前一個URL。

等效于"后退"按鈕

Forward（） 加載history對象列表中后一個URL。

等效于"前進"按鈕

Go（） 加載history對象列表中某個具體的URL。

Go（1） 代表前進一頁，等價于forward（）方法。

Go（-1）代表后退一頁，等價于back（）方法。

2、3 location對象

Location對象提供當前頁面的URL信息，并且可以重新裝載當前的頁面和裝入新頁面。

location對象屬性：

host 設置或返回主機名和當前的URL的端口號

hostname 設置或返回當前URL的主機名

href 設置或返回完整的URL

location對象方法

reload 重新加載當當前文檔

replace 用新的文檔替換當前文檔

2、4 document對象

document對象即是window對象的一部分，又代表了整個HMTL文檔，可以用來訪問頁面中的所有元素，在使用document對象時，除了要適用于瀏覽器外，也要符合W3C標準。

document對象常用屬性

Referrer 返回載入當前文檔的URL

URL 返回當前文檔RUL

document對象常用方法：

//返回對擁有指定 id 的第一個引用

document.getElementById("");

//返回帶有指定名稱的對象的集合

document.getElementsByName("");

//返回帶有指定標簽名的對象的集合

document.getElementsByTagName("");

//向文檔寫文本、HTML代碼、JavaScript代碼

document.write("");

innerHMLT是幾乎所有的HMTL元素都有的屬性，它是一個字符串，用來設置或者獲取當前對象的開始標簽和結束標簽之間的HTML。

2、5 Date對象：

此對象用于操作日期和時間，和Java中的類很相似，需要使用 new對象名（）的方式創建

var time=new Date(); //獲得當前的時間

time.getDate(); //返回一個月中的每一天，其值為 1~31

time.getDay(); //返回星期中的每一天，其值為 0~6

time.getHours(); //返回小時數，其值為 0~23

time.getMinutes(); //返回分鐘數，其值為 0~59

time.getSeconds(); //返回秒數，其值為 0~59

time.getMonth(); //返回月數，其值為 0~11

time.getFullYear(); //返回年數，其值為 四位數

time.getTime(); //返回自 1970-1-1 日以來的毫秒數

2、6 Math對象

Math對象提供了許多與數學相關的功能，它是一個JavaScript的全局對象。

Math.ceil("25.5"); //對數字進行上舍入 返回 26

Math.floor("25.5"); //對數字進行下舍入 返回 25

Math.round("25.5"); //對數字進行四舍五入 返回 26

Math.random(); //返回隨機數

2、7 定時函數

Javscript提供了倆個定時函數 setTimeout（） 和 setInterval（），并且還提供了用于清除定時函數的兩個函數 clearTimeout（）和 clearInterval（）

setTimeout（）

此函數用于在指定的毫秒數后調用函數或者表達式，只執行一次。

window.setTimeout("");

setInterval（）

此函數用于在指定的毫秒數后調用函數或者表達式，重復執行

window.setInterval("");

本章總結：

1、學會使用window對象可以實現彈出窗口，關閉當前窗口，彈出頁面消息框等效果。

2、學會使用Date 對象可以獲得當前系統的日期，時間。

3、學會使用history和location對象的相關屬性和方法可以輕松實現瀏覽器中的"后退"和"進行"以及"刷新"功能。

4、學會使用 document的各個方法來訪問元素。

5、學會使用兩個定時函數，和清除它們。

后記：對于大部分轉行的人來說，找機會把自己的基礎知識補齊，邊工作邊補基礎知識，真心很重要。

"我們相信人人都可以成為一個IT大神，現在開始，選擇一條陽光大道，助你入門，學習的路上不再迷茫。這里是北京尚學堂，初學者轉行到IT行業的聚集地。"

OM 也叫瀏覽器對象模型，它提供了很多對象，用于訪問瀏覽器的功能。BOM 的核心對象是 window，它表示瀏覽器的一個實例。window 對象處于 JavaScript 結構的最頂層，對于每個打開的窗口，系統都會自動為其定義 window 對象。

1.對象的屬性和方法

window 對象有一系列的屬性，這些屬性本身也是對象。

window對象屬性

window 下的屬性和方法，可以使用 window.屬性、window.方法()或者直接屬性、方法()的方式調用。例如：window.alert()和 alert()是一個意思。

2.系統對話框

瀏覽器通過 alert()、confirm()和 prompt()方法可以調用系統對話框向用戶顯示信息。系統對話框與瀏覽器中顯示的網頁沒有關系，也不包含 HTML。

3.新建窗口

使用 window.open()方法可以導航到一個特定的 URL， 也可以打開一個新的瀏覽器窗口 。它可以接受三個參數：

1.第一個參數，是你將要導航到的URL

2.窗口的名稱或者窗口的目標，命名可以給新窗口設置一個名稱，凡事以這個名稱打開的窗口，都在這個窗口里加載URL ， 目標：_blank，_parent，_blank新建一個窗口，_parent表示在本窗口內加載

3.特定的字符串，表示各種窗口配置的功能

不命名會每次打開新窗口，命名的第一次打開新窗口，之后在這個窗口中加載。窗口目標是提供頁面的打開的方式，比如本頁面，還是新建。

第三個參數字符串

4.窗口的位置和大小

用來確定和修改 window 對象位置的屬性和方法有很多。 screenLeft 和 screenTop 屬性，分別用于表示窗口相對于屏幕左邊和上邊的位置 （火狐瀏覽器不支持）。Firefox 則在 screenX 和 screenY 屬性中提供相同的窗口位置信息。

窗口頁面大小，Firefox、Safari、Opera 和 Chrome 均為此提供了 4 個屬性：innerWidth和 innerHeight，返回瀏覽器窗口本身的尺寸；outerWidth 和 outerHeight，返回瀏覽器窗口本身及邊框的尺寸。

5.間歇調用和超時調用

JavaScript 是單線程語言，但它允許通過設置超時值和間歇時間值來調度代碼在特定的時刻執行。前者在指定的時間過后執行代碼，而后者則是每隔指定的時間就執行一次代碼。

超時調用需要使用 window 對象的 setTimeout()方法，它接受兩個參數：要執行的代碼和毫秒數的超時時間。

調用 setTimeout()之后，該方法會返回一個數值 ID，表示超時調用。這個超時調用的 ID是計劃執行代碼的唯一標識符，可以通過它來取消超時調用。要取消尚未執行的超時調用計劃，可以調用 clearTimeout()方法并將相應的超時調用 ID作為參數傳遞給它。

間歇調用與超時調用類似， 只不過它會按照指定的時間間隔重復執行代碼， 直至間歇調用被取消或者頁面被卸載。 設置間歇調用的方法是 setInterval()， 它接受的參數與 setTimeout()相同：要執行的代碼和每次執行之前需要等待的毫秒數。

一般認為，使用超時調用來模擬間歇調用是一種最佳模式。在開發環境下，很少使用真正的間歇調用，因為需要根據情況來取消 ID，并且可能造成同步的一些問題，我們建議不使用間歇調用，而去使用超時調用。

點關注，不迷路，歡迎關注，每日都更新大量前端知識

ECMAScript 是JavaScript 的核心，但如果要在Web 中使用JavaScript，那么BOM（瀏覽器對象模型）則無疑才是真正的核心。BOM 提供了很多對象，用于訪問瀏覽器的功能，這些功能與任何網頁內容無關.

bom 瀏覽器對象模型

bom可以使通過js來操作瀏覽器，在bom中為我們提供一組對象，用來完成瀏覽器的操作

bom中的主要對象

1.window對象 代表整個瀏覽器的窗口，同時window也是網頁的全局對象

2.navigator對象 代表當前瀏覽器的信息，通過該對象可以識別不同的瀏覽器

由于歷史原因，已經navigator的大部分屬性不太能識別了。一般只會使用userAgent來判斷瀏覽器信息

不同的瀏覽器會有不同的userAgent。

console.log(navigator.userAgent)

如果通過UserAgent不能判斷，還可以通過瀏覽器的特有對象，來判斷瀏覽器的信息，

比如ActivexObject，他是ie獨有的一個屬性，可以用來判斷ie瀏覽器ie10以下。

window.ActivexObject如果有的話會返回true，可以用來判斷ie瀏覽器ie10以下。

用('ActivexObject' in window)返回true，可以用來判斷ie所有瀏覽器

3. location對象 封裝了當前瀏覽器的地址欄信息，通過location，可以獲得地址欄信息

也可以改變location的值，可以添加相對路徑和絕對路徑，像一個超鏈接。并且會生成歷史記錄

console.log(location)

location='www.baidu.com'

4.history對象 代表瀏覽器的歷史記錄，該對象不能獲得具體的歷史記錄，只能操作瀏覽器向前或向后翻頁

而且該操作只在當次訪問時有效。

5.screen對象 代表用戶的屏幕信息，通過該對象可以獲得到用戶顯示器相關的信息

這些bom對象在瀏覽器中都是作為window對象的屬性保存的，可以通過瀏覽器對象來使用也可以直接使用為全局對象。

6.定時器

js的程序執行速度是非?？斓?，如果希望一段程序，可以每隔一段時間執行一次，可以使用定時調用。但設置的定時器必須清除，利用click，可能會多次創建定時器，所以創建定時器之前清除定時器每個定時器會返回一個Number類型的數據，這個數字作為定時器的唯一標識