JavaScript - 瀏覽器物件模型

上一頁
下一頁

JavaScript 中的瀏覽器物件模型 (BOM) 指的是瀏覽器提供的用於與之互動的物件。透過使用這些物件，您可以操作瀏覽器的功能。例如，您可以獲取瀏覽器歷史記錄和視窗大小，導航到不同的 URL 等。

瀏覽器物件模型沒有標準化。它取決於您使用的瀏覽器。

在這裡，我們列出了瀏覽器物件模型的所有物件及其描述：

  • Window - 'window' 物件表示當前的瀏覽器視窗。您可以使用它來操作瀏覽器視窗。

  • Document - 'document' 物件表示瀏覽器視窗中當前開啟的網頁。您可以使用它來自定義文件的屬性。

  • Screen - 它提供有關使用者裝置螢幕的資訊。

  • History - 它提供瀏覽器的會話歷史記錄。

  • Navigator - 它用於獲取瀏覽器的資訊，例如預設語言等。

  • Location - Location 物件用於獲取 URL 資訊，例如當前網頁的主機名。

  • Console - console 物件允許開發人員訪問瀏覽器的控制檯。

JavaScript Window 物件

JavaScript 的 window 物件表示瀏覽器的視窗。我們可以使用 window 物件的不同方法和屬性來操作當前瀏覽器視窗。例如，顯示警報、開啟新視窗、關閉當前視窗等。

所有 JavaScript 的 全域性變數 都是 window 物件的屬性。所有 全域性函式 都是 window 物件的方法。

上面列出的其他物件，例如 document、screen、history 等，都是 window 物件的屬性。我們可以將這些物件作為 window 物件的屬性訪問。我們也可以透過引用 window 物件來訪問它們。請檢視下面的示例程式碼片段以訪問 document 物件：

window.document.write("Welcome to Tutorials Point");

或者不使用 window 物件：

document.write("Welcome to Tutorials Point");

window 物件的 innerHeight 和 innerWidth 屬性用於訪問瀏覽器視窗的高度和寬度。我們將在後面的章節中詳細學習 JavaScript window 物件。

JavaScript Document 物件

document 物件是 JavaScript window 物件的一個屬性。整個 HTML 文件表示為一個 document 物件。document 物件構成 HTML DOM。它是 HTML 文件的根節點。

document 物件可以訪問為 window.document 或僅為 document。

document 物件為我們提供了許多屬性和方法來訪問 HTML 元素並操作它們。其中一個方法是 document.getElementById()，用於使用其 id 訪問 HTML 元素。

我們可以使用getElementById()方法訪問id為“text”的元素並對其進行操作。

示例

<html>
<body>
   <div id ="text">This text will be changed. </div>
   <script>
      // Access the element with id as text
      const textDiv = document.getElementById("text");
      // Change the content of this element
      textDiv.innerHTML = "The text of this DIV is changed.";
   </script>
</body>
</html>

輸出

The text of this DIV is changed.

JavaScript 螢幕物件

在 JavaScript 中，screen 物件是 window 物件的一個屬性。它為我們提供了可用於獲取裝置視窗螢幕資訊的屬性。我們可以透過window.screen或僅screen訪問螢幕物件。

要以畫素為單位獲取裝置螢幕的寬度和高度，我們可以使用screen.width和screen.height屬性。

示例

<html>
<body>
<div id ="width">Width of the device screen is </div>
<div id ="height">Height of the device screen is </div>
<script>
   document.getElementById("width").innerHTML += screen.width + " px.";
   document.getElementById("height").innerHTML += screen.height + " px.";
</script>
<p> The above result may be different for different device.</p>
</body>
</html>

輸出

Width of the device screen is 1536 px.
Height of the device screen is 864 px.
The above result may be different for different device.

JavaScript 歷史物件

在 JavaScript 中，history 物件也是window物件的一個屬性。它包含當前會話中訪問過的 URL 列表。history 物件提供了一個介面來操作瀏覽器的會話歷史記錄。

可以使用window.history或僅history訪問 JavaScript history 物件。我們可以使用 history 物件的方法來導航歷史列表中的 URL。例如，要轉到歷史列表中的上一頁/URL，我們可以使用history.back()方法。

JavaScript 導航器物件

JavaScript navigator 物件也是window物件的一個屬性。使用“navigator”物件，您可以獲取瀏覽器版本和名稱，並檢查瀏覽器中是否啟用了 cookie。我們可以使用window.navigator訪問 navigator 物件。我們也可以在不使用 window 字首的情況下訪問它。

JavaScript 位置物件

JavaScript“location”物件包含各種屬性和方法來獲取和操作瀏覽器的地址資訊，即 URL。它也是 JavaScript window物件的一個屬性。

我們可以使用 location 物件的屬性和方法來操作 URL 資訊。例如，要從當前 URL 獲取主機，我們可以使用window.location.host或僅location.host。主機是 location 物件的屬性。

示例

<html>
<body>
   <div id = "output"> </div>
   <script>
      document.getElementById("output").innerHTML = 
	  "The host of the current location is: " + location.host;
   </script>
</body>
</html>

輸出

The host of the current location is: www.tutorialspoint.com

JavaScript 控制檯物件

JavaScript console 物件允許我們訪問瀏覽器的除錯控制檯。它是 JavaScript window 物件的一個屬性。可以使用 window.console 或僅使用 console 訪問它。

console 物件為我們提供了不同的方法，例如 console.log()。console.log() 方法用於在除錯控制檯中顯示訊息。

下一步是什麼？

我們在單獨的章節中提供了有關上述每個物件的詳細資訊。

列印頁面
上一頁
下一頁
廣告