從零開始學 Web 之 BOM（一）BOM的概念，一些BOM對象

時間 2019-11-17

標籤開始 web bom 概念一些對象欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公衆號：Web前端之巔
博客園：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！javascript

1、BOM

一、BOM的概念

BOM（Browser Object Model）：瀏覽器對象模型。html

在瀏覽器中的一些操做均可以使用 BOM 的方法進行編程處理。前端

好比：刷新瀏覽器、前進、後退、在地址欄輸入 URL 等。java

二、BOM 頂級對象

BOM 的頂級對象是：windowgit

window 是瀏覽器的頂級對象，當調用 window 下的屬性和方法時，能夠省略 window。github

注意：chrome

一、window 下的一個特殊屬性：window.name，因此不要輕易定義 name 變量，會致使 window.name 被修改。編程

二、top 等同於 windows。windows

三、系統對話框

window.alert();
window.prompt();
window.confirm(); // 兩個按鈕，分別返回 true 和 false。

以上對話框都不建議使用。瀏覽器

一、彈框時頁面沒法加載；

二、各個瀏覽器的樣式不相同，且樣式不可自定義。

四、頁面加載對象

提出問題：

咱們知道，若是將 script 標籤放在 head 裏面的話，頁面加載的時候是先加載的 script 標籤，以後才加載 body 裏面的標籤。若是 script 特別大的話，就很影響用戶體驗。

解決辦法：

一、將 script 標籤放在 body 最後。

二、使用 window.onload 事件。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                alert("haha");
            }
        }
    </script>
</head>
<body>
<input type="button" value="BUTTON" id="btn">
</body>

一、若是不寫 window.onload 的話，執行到 document.getElementById("btn") 會報錯，由於程序是從上至下執行。

二、window.onload 事件會在頁面加載完畢（頁面中全部內容、標籤、屬性以及外部引入的 js文件）時觸發。

三、window.onload 能夠省略 window。

window.onunload = function () {
    alert("yes");
}

onunload：頁面關閉後才觸發的事件

window.onbeforeunload = function () {
    alert("yes");
}

onbeforeunload：在頁面關閉以前觸發的事件

五、location 對象（地址欄）

學習一個對象主要是學習它裏面的屬性和方法。

5.一、屬性

console.log(window.location.hash); // 地址欄上#及後面的內容
console.log(window.location.host); // localhost:63342 ---- 主機名及端口號
console.log(window.location.hostname); // localhost  ---- 主機名
console.log(window.location.port); //63342  ---- 端口號
console.log(window.location.pathname);// /JS/images/location.html --- 相對路徑
console.log(window.location.protocol);// http:   --- 協議
console.log(window.location.search);//?_ijt=28855sggj8kcffva8q9bhc1eh0  --- 搜索的內容

5.二、方法

document.getElementById("btn").onclick = function () {
    location.href = "http://fengdaoting.com";
    location.assign("http://fengdaoting.com");
    location.reload();
    location.replace("http://fengdaoting.com");
};

location.href 和 location.assign()：設置跳轉的頁面地址，這兩個屬性和方法做用相同，而且都保存跳轉前的地址（在瀏覽器中能夠點擊返回按鈕）。

location.reload()：刷新頁面

location.replace(): 設置跳轉的頁面地址，可是不保存跳轉前的地址。

六、history 對象

6.一、方法

window.history.forward(); // 前進
window.history.back() // 後退
window.history.go(number);  // number爲正，前進；爲負，後退。

七、navigator 對象

7.一、屬性

window.navigator.platform; // 判斷瀏覽器所在的系統平臺
// win32
window.navigator.userAgent; // 判斷瀏覽器的類型，是谷歌火狐仍是IE
// chrome 下結果：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36