BOM 和 DOM !?

十一月 13, 2019

BOM 是什麼?

BOM (Browser Object Model，瀏覽器物件模型)，是瀏覽器所有功能的核心，與網頁的內容無關。

BOM 也有人非正式地稱它為「Level 0 DOM」。因為它在 DOM level 1 標準前就已存在，而不是真的有文件去規範這些，所以「Level 0 DOM」與「BOM」兩者實際上指的是同一個東西。


window|  
      |navigator  
      |location  
      |frames  
      |screen  
      |history  
      |document  
              |forms  
              |links  
              |anchors  
              |images  
              |all  
              |cookie

window

window 物件代表瀏覽器視窗本身，擁有一些控制視窗的方法，其中像是 open()、close()、alert()、prompt()、confirm()、setTimeout()等函式，都是以 window 作為名稱空間物件的函式。

你可以在 W3schools 查詢關於 window 函式或方法的使用方式，在使用 window 物件時，可省略 window 關鍵字，直接使用該函式或方法即可。

開啟一個新視窗：

1	window.open("https://www.w3schools.com");

開啟一個確認視窗：

1	confirm("Press a button!");

點擊按紐後，等待三秒鐘，開啟一個警告視窗：

<!DOCTYPE html>
<html>
<body>

<p>Click the first button to alert "Hello" after waiting 3 seconds.</p>

<button onclick="myFunction()">Try it</button>


<script>
var myVar;

function myFunction() {
  myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}

</script>

</body>
</html>

window.navigator

navigator 物件主要是包含了瀏覽器的資訊，像是取得瀏覽器的版本、語言以及是否啟用 cookie 等資訊，你可以在 W3schools 查詢這個物件上有哪些資訊可以取得。

<!DOCTYPE html>
 <html>
 <body>
 <div id="demo"></div>
 <script>
 var txt = "";
 txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
 txt += "<p>Browser Name: " + navigator.appName + "</p>";
 txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
 txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
 txt += "<p>Browser Language: " + navigator.language + "</p>";
 txt += "<p>Browser Online: " + navigator.onLine + "</p>";
 txt += "<p>Platform: " + navigator.platform + "</p>";
 txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
 document.getElementById("demo").innerHTML = txt;
 </script>
 </body>
 </html>

輸出結果：


Browser CodeName: Mozilla

Browser Name: Netscape

Browser Version: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36

Cookies Enabled: true

Browser Language: zh-TW

Browser Online: true

Platform: Win32

User-agent header: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36

window.location

location 物件可以取得瀏覽器目前頁面的URL資訊，也有 reload() 與 replace() 方法，可以重新載入頁面或取代頁面。，你可以在W3schools查詢這個物件上有哪些資訊可以取得。

取代目前頁面的URL：

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Replace document</button>

<script>
function myFunction() {
  location.replace("https://cheng-yi-ting.github.io/") // 取代目前的頁面為此URL

}
</script>

</body>
</html>

取得目前URL所採用的協定：

1	location.protocol; // https

window.frames

frames 物件可以取得瀏覽器中擁有的框架資訊，索引位置是框架在視窗中出現的順序，如果框架有設定id或name屬性，也可以使用[]搭配名稱來取得框架。

點擊按紐後，更改第一個 iframe 的來源：

<!DOCTYPE html>
<html>
<body>

    <p>Click the button to change the location of the first iframe element (index 0).</p>

    <button onclick="myFunction()">Try it</button>
    <br><br>

    <iframe src="https://zh.wikipedia.org/wiki/Wiki"></iframe>
    <iframe src="https://www.ettoday.net/"></iframe>

    <script>
        function myFunction() {
            window.frames[0].location = "https://cheng-yi-ting.github.io/";
        }
    </script>

</body>

</html>

點擊按鈕後，修改視窗內所有 iframe 來源URL：

<!DOCTYPE html>
<html>
<body>
    <p>Click the button to loop through the frames on this page, and change the location of every frame to "w3schools.com".
    </p>

    <button onclick="myFunction()">Try it</button>
    <br><br>

    <iframe src="https://zh.wikipedia.org/wiki/Wiki"></iframe>
    <iframe src="https://www.ettoday.net/"></iframe>
    <iframe src="https://tw.appledaily.com/new/realtime"></iframe>

    <script>
        function myFunction() {
            var frames = window.frames;
            var i;

            for (i = 0; i < frames.length; i++) {
                frames[i].location = "https://cheng-yi-ting.github.io/";
            }
        }
    </script>

</body>

</html>

window.screen

screen 物件可以取得目前視窗的螢幕資訊，像是寬、高、顏色深度等，你可以在W3schools查詢這個物件上有哪些資訊可以取得。

點擊按紐後，顯示視窗寬度：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the available width of your screen.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = "Available Width: " + screen.availWidth + "px";
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

window.history

history 物件可以取得瀏覽器瀏覽歷史，基於安全與隱私，你無法取得瀏覽歷史，但可以有back()、forward()、go()等方法，指定前進、後退至哪個歷史頁面，像是回到上一面、下一頁的功能。你可以在W3schools查詢這個物件上有哪些資訊可以取得。

點擊按紐後，回到上一頁的URL：

<!DOCTYPE html>
<html>
<body>

<button onclick="goBack()">Go Back</button>

<p>Notice that clicking on the Back button here will not result in any action, because there is no previous URL in the history list.</p>

<script>
function goBack() {
  window.history.back();
}
</script>

</body>
</html>

window.document

DOM (Document Object Model，文件物件模型)，是一個將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」。。

舉個來說，如果有個網頁如下：

<html>
  <head>
    <title>網站標題</title>

  </head>

  <body>
    <h1>這是一個內文標題</h1>

    <p>這是一個段落</p>

  </body>

</html>

DOM API 就是定義了讓 JavaScript 可以存取、改變 HTML 架構、樣式和內容的方法，甚至是對節點綁定的事件。

JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作。

Cyting 部落格