[作特效, 學JS] -- 13 加餐-聊聊BOM

什麼是BOM和DOM

• BOM => browser object model
• DOM => document object model
• 你能夠這樣理解
• BOM就是瀏覽器, DOM就是瀏覽器裏的網頁

爲何聲明變量時, 不加var就是隱式的全局變量?

• 瀏覽器裏面，window對象（注意，w爲小寫）指當前的瀏覽器窗口。
• 它也是當前頁面的頂層對象，即最高一層的對象，全部其餘對象都是它的下屬。
• 一個變量若是未聲明，那麼默認就是頂層對象的屬性。
• 因此會出現以下的狀況

a = 1;
window.a // 1
複製代碼

• a是一個沒有聲明就直接賦值的變量，它自動成爲頂層對象的屬性

window對象

• 最頂層的對象, 全部的其餘對象, 都是它的屬性
• 由於是頂層對象, 也能夠不寫
• document和window.document是一回事兒
• document.getElementById()和window.document.getElementById()是同樣的
• 你能夠這樣理解: 瀏覽器裏面有網頁, 因此 BOM.document就是DOM
• 還有咱們熟悉的alert(), 其實是window.alert()

常見對象和屬性

window.history

• window.history屬性指向 History 對象，它表示當前窗口的瀏覽歷史

window.history.length // 3
history.back() // 後退到前一個網址
history.go(-1) // 同上

history.go(0); // 刷新當前頁面
history.forward(); // 調到下一個記錄
history.go(1); // 同上
複製代碼

window.location

• Location對象是瀏覽器提供的原生對象，提供 URL 相關的信息和操做方法。
• 經過window.location和document.location屬性，能夠拿到這個對象。
• Location.href：整個 URL。
• Location.protocol：當前 URL 的協議，包括冒號（:）。
• Location.host：主機，包括冒號（:）和端口（默認的80端口和443端口會省略）。
• Location.hostname：主機名，不包括端口。
• Location.port：端口號。
• Location.pathname：URL 的路徑部分，從根路徑/開始。
• Location.search：查詢字符串部分，從問號?開始。
• Location.hash：片斷字符串部分，從#開始。
• Location.username：域名前面的用戶名。
• Location.password：域名前面的密碼。
• Location.origin：URL 的協議、主機名和端口。

// 當前網址爲
// http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href
// "http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol
// "http:"
document.location.host
// "www.example.com:4097"
document.location.hostname
// "www.example.com"
document.location.port
// "4097"
document.location.pathname
// "/path/a.html"
document.location.search
// "?x=111"
document.location.hash
// "#part1"
document.location.username
// "user"
document.location.password
// "passwd"
document.location.origin
// "http://user:passwd@www.example.com:4097"
複製代碼

• 若是對Location.href寫入新的 URL 地址，瀏覽器會馬上跳轉到這個新地址。

// 跳轉到新網址
document.location.href = 'http://www.example.com';
複製代碼

• 直接改寫location，至關於寫入href屬性。

document.location = 'http://www.example.com';
// 等同於
document.location.href = 'http://www.example.com';
複製代碼

• reload方法使得瀏覽器從新加載當前網址，至關於按下瀏覽器的刷新按鈕。

// 向服務器從新請求當前網址
window.location.reload(true);
複製代碼

專欄地圖

• [作特效, 學JS] -- 00 開篇
• [作特效, 學JS] -- 01 超連接鼠標移入變大變紅, 鼠標移除還原
• [作特效, 學JS] -- 02 鼠標移入, div變大變紅, 鼠標移出, 回覆原貌
• [作特效, 學JS] -- 03 網頁換膚
• [作特效, 學JS] -- 04 複選框全選
• [作特效, 學JS] -- 05 複選框全選/全不選
• [作特效, 學JS] -- 06 複選框全選/全不選/反選
• [作特效, 學JS] -- 07 網頁選項卡
• [作特效, 學JS] -- 08 倒計時
• [作特效, 學JS] -- 09 正經的 全選和反選
• [作特效, 學JS] -- 10 自動生成表格
• [作特效, 學JS] -- 11 加餐-神奇的正則表達式
• [作特效, 學JS] -- 12 加餐-DOM擴展
• [作特效, 學JS] -- 13 加餐-聊聊BOM