week12 - stayjay/wp109b GitHub Wiki

窗口對象

window所有瀏覽器都支持該對象。它代表瀏覽器的窗口。

所有全局 JavaScript 對象、函數和變量都會自動成為 window 對象的成員。

全局變量是窗口對象的屬性。

全局函數是 window 對象的方法。

甚至(HTML DOM 的)文檔對像也是 window 對象的一個屬性:

window.document.getElementById("header");

是相同的:

document.getElementById("header");

窗口大小

可以使用兩個屬性來確定瀏覽器窗口的大小。

這兩個屬性都返回以像素為單位的大小:

window.innerHeight - 瀏覽器窗口的內部高度(以像素為單位)
window.innerWidth - 瀏覽器窗口的內部寬度(以像素為單位)
瀏覽器窗口(瀏覽器視口)不包括工具欄和滾動條。

對於 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

其他窗口方法 其他一些方法:

window.open() - 打開一個新窗口
window.close() - 關閉當前窗口
window.moveTo() - 移動當前窗口
window.resizeTo() - 調整當前窗口的大小

窗口位置

該window.location對象可以在沒有窗口的前綴被寫入。

一些例子:

window.location.href 返回當前頁面的href(URL)
window.location.hostname 返回網絡主機的域名
window.location.pathname 返回當前頁面的路徑和文件名
window.location.protocol 返回使用的網絡協議(http: 或 https:)
window.location.assign() 加載新文檔
<script>
document.getElementById("demo").innerHTML = 
"The full URL of this page is:<br>" + window.location.href;
</script>

窗口歷史

該window.history對象可以在沒有窗口的前綴被寫入。

為了保護用戶的隱私,JavaScript 訪問此對象的方式存在限制。

一些方法:

history.back() - 與在瀏覽器中單擊返回相同
history.forward() - 與在瀏覽器中單擊前進相同
窗口歷史返回
該history.back()方法加載歷史列表中的前一個 URL。

這與單擊瀏覽器中的後退按鈕相同。
該history.back()方法加載歷史列表中的前一個 URL。

這與單擊瀏覽器中的後退按鈕相同。

例子 在頁面上創建後退按鈕:

<html>
<head>
<script>
function goBack() {
  window.history.back()
}
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

JavaScript示例

JavaScript示例

DOM 節點

根據 W3C HTML DOM 標準,HTML 文檔中的所有內容都是一個節點:

整個文檔是一個文檔節點 每個 HTML 元素都是一個元素節點 HTML 元素內的文本是文本節點 每個 HTML 屬性都是一個屬性節點(已棄用) 所有評論都是評論節點 DOM HTML tree 使用 HTML DOM,可以通過 JavaScript 訪問節點樹中的所有節點。

可以創建新節點,並且可以修改或刪除所有節點。

HTMLCollection 對象

該getElementsByTagName()方法返回一個HTMLCollection對象。

一個HTMLCollection對像是一個類似數組的 HTML 元素列表(集合)。

以下代碼選擇

文檔中的所有元素: 例子

var x = document.getElementsByTagName("p");

該length屬性定義節點列表中的節點數: 例子

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

HTMLCollection 和 NodeList 之間的區別

An HTMLCollection(上一章)是 HTML 元素的集合。

ANodeList是文檔節點的集合。

NodeList 和 HTML 集合非常相似。

HTMLCollection 對象和 NodeList 對像都是一個類似數組的對象列表(集合)。

兩者都有一個長度屬性,用於定義列表(集合)中的項目數。

兩者都提供了一個索引 (0, 1, 2, 3, 4, ...) 來像數組一樣訪問每個項目。

HTMLCollection 項可以通過其名稱、ID 或索引號進行訪問。

NodeList 項只能通過它們的索引號訪問。

# 筆記文章和程式碼均引用JavaScript

⚠️ **GitHub.com Fallback** ⚠️