資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學JavaScript 的 window 物件和 document 物件有何區別？
在JavaScript中，window物件代表當前的網頁瀏覽器視窗，而document物件代表當前在視窗中載入的網頁。
JavaScript 中的window 物件提供了訪問瀏覽器歷史記錄、位置和其他屬性和方法的途徑，這些屬性和方法允許我們與瀏覽器視窗本身進行互動。它包含關於瀏覽器視窗的資訊，例如大小、視窗包含的文件以及視窗的歷史記錄。
document 物件表示網頁的整體結構，並提供訪問頁面內容以及操作該內容的方法。它包含關於頁面內容的資訊，例如 URL、標題、內容和連結。
例如，我們可以使用 `document.getElementById()` 方法透過其 ID 獲取頁面上元素的引用，或者使用 `document.createElement()` 方法建立新元素。我們還可以使用 window 物件來操作瀏覽器視窗，例如使用 `window.open()` 方法開啟新視窗，或者使用 `window.scrollTo()` 方法滾動到頁面上的特定位置。
JavaScript 視窗
在 JavaScript 中，window 物件代表當前的網頁瀏覽器視窗。它提供了訪問瀏覽器歷史記錄、位置和其他屬性和方法的途徑，這些屬性和方法允許你與瀏覽器視窗進行互動。
window 物件是 JavaScript 中的全域性物件，在整個程式碼中的所有上下文中都可用。你可以使用 `window` 關鍵字直接訪問它。
以下是一些涉及 window 物件的常見任務示例：
獲取頁面的當前 URL：`var currentUrl = window.location.href;`
獲取瀏覽器視窗的寬度：`var windowWidth = window.innerWidth;`
獲取瀏覽器視窗的高度：`var windowHeight = window.innerHeight;`
開啟一個新視窗：`window.open('http://www.example.com', '_blank');`
關閉當前視窗：`window.close();`
語法
javascript window 的語法如下：
window.propertyName
示例
在這個例子中，我們獲取了三樣東西：視窗的 `innerHeight`、`innerWidth` 和當前 `URL`。
</head>
<body>
<h2>JavaScript Window</h2>
<p id="innerHeight"></p>
<p id="innerWidth"></p>
<p id="currentUrl"></p>
<script>
const height = document.getElementById('innerHeight');
const width = document.getElementById('innerWidth');
const url = document.getElementById('currentUrl');
height.textContent = "innerHeight - " +
window.innerHeight;
width.textContent = "innerWidth - " +
window.innerWidth;
url.textContent = "currentUrl - " + window.location.href;
</script>
</body>
</html>
JavaScript 文件
在 JavaScript 中，document 物件代表當前在網頁瀏覽器中載入的網頁。它提供了訪問頁面內容以及操作該內容的方法。
document 物件是 window 物件的一個屬性，也是 JavaScript 中的全域性物件，這意味著它在整個程式碼中的所有上下文中都可用。你可以使用 `document` 關鍵字直接訪問它。
以下是涉及 document 物件的一些常見任務示例：
獲取文件的標題：`var docTitle = document.title;`
獲取文件的最後修改日期：`var modified = document.lastModified;`
獲取文件的 body 元素：`var bodyEl = document.body;`
透過其 ID 獲取元素：`var el = document.getElementById('my-element');`
建立一個新元素：`var newEl = document.createElement('div');`
語法
javascript document 的語法如下：
document.propertyName
示例
在這個例子中，我們獲取了三樣東西：
<html>
<head>
<title>Example- JavaScript Document</title>
</head>
<body>
<h2> JavaScript Document </h2>
<p id="title"></p>
<p id="currentUrl"></p>
<script>
const p = document.getElementById('title');
const url = document.getElementById('currentUrl');
p.textContent = "Doc Title - " + document.title;
url.textContent = "Doc CurrentUrl - " + document.location.href;
</script>
</body>
</html>
JavaScript 視窗和文件的區別
下表重點介紹了 javascript window 與 javascript document 的區別：
| JavaScript 的 window | JavaScript 的 document |
|---|---|
| 它代表當前的網頁瀏覽器視窗。 | 它代表當前在視窗中載入的網頁。 |
| 其屬性包括 location、history、innerWidth、innerHeight 等。 | 其屬性包括 title、lastModified、body、head 等。 |
| JavaScript window 方法有：open()、close()、scrollTo()、alert() 等。 | JavaScript document 方法有：getElementById()、createElement()、querySelector()、querySelectorAll() 等。 |
| 它是全域性可用的。 | 它是全域性可用的。 |
| 它是 window 的一個物件。 | 它是瀏覽器的物件。 |
結論
總而言之，JavaScript window 和 document 是 JavaScript 中兩個最重要的物件，兩者都有不同的用途。window 代表當前的網頁瀏覽器視窗，而 document 物件代表當前在視窗中載入的網頁。
雖然這兩個物件都是全域性的，可以從程式碼的任何地方訪問，但在開發 web 專案時，理解它們之間的區別對於有效使用它們至關重要。
268 次瀏覽
