當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

菜鸟教程之 HTML DOM 和浏览器BOM

發布時間：2024/7/23 HTML 52 豆豆

生活随笔收集整理的這篇文章主要介紹了菜鸟教程之 HTML DOM 和浏览器BOM 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML DOM：https://www.runoob.com/js/js-htmldom.html

瀏覽器對象模型 (BOM)：https://www.runoob.com/js/js-window.html

DOM、DOCUMENT、BOM、WINDOW 有什么區別? ：https://www.zhihu.com/question/33453164

通過 HTML DOM，JavaScript 可訪問 HTML 文檔的所有元素。
通過瀏覽器對象模型 (BOM) ，?JavaScript 有能力與瀏覽器 "對話" 。

document 主要在 js 中指 document 對象，為頁面 window 下頁面文檔的主體如：?window.document.body
Document 主要是 html 中標簽聲明用如：?<!DOCTYPE html>

DOM 是為了操作文檔出現的 API，document 是其的一個對象；
BOM 是為了操作瀏覽器出現的 API，window 是其的一個對象。

歸 DOM 管的：

E區（就是你說的 document 啦。由 web 開發人員嘔心瀝血寫出來的一個文件夾，里面有 index.html，CSS 和 JS 什么鬼的，部署在服務器上，我們可以通過瀏覽器的地址欄輸入URL 然后回車將這個document 加載到本地，瀏覽，右鍵查看源代碼等）

歸 BOM 管的：

A區（瀏覽器的標簽頁，地址欄，搜索欄，書簽欄，窗口放大還原關閉按鈕，菜單欄等等）
B區（瀏覽器的右鍵菜單）
C區（document加載時的狀態欄，顯示http狀態碼等）
D區（不知道咋形容=。=哦對，滾動條scroll bar）
……

暫時把 DOM 粗濫地理解成一套規則（其實就是一個接口，上面記錄著HTML文檔每個節點對應的名字，以及用JavaScript操控這些節點時一些抽象概念對應的具體定義）

HTML DOM

通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。

HTML DOM 定義了訪問和操作 HTML 文檔的標準方法。 HTML DOM 獨立于平臺和語言，可被任何編程語言使用，比如 Java、JavaScript 和 VBscript

HTML DOM (文檔對象模型)

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 樹

HTML DOM?模型被構造為對象的樹：

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

查找 HTML 元素

通常，通過 JavaScript，您需要操作 HTML 元素。

為了做到這件事情，您必須首先找到該元素。有三種方法來做這件事：

通過 id 找到 HTML 元素
通過標簽名找到 HTML 元素
通過類名找到 HTML 元素

通過 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id。

本例查找 id="intro" 元素：（?嘗試一下）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p id="intro">你好世界!</p> <p>該實例展示了 <b>getElementById</b> 方法!</p> <script> x=document.getElementById("intro"); document.write("<p>文本來自 id 為 intro 段落: " + x.innerHTML + "</p>"); </script></body> </html>

如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。如果未找到該元素，則 x 將包含 null。

通過標簽名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素。實例：（?嘗試一下）

var x=document.getElementById("main"); var y=x.getElementsByTagName("p");

通過類名找到 HTML 元素

本例通過?getElementsByClassName?函數來查找 class="intro" 的元素。實例：（?嘗試一下?）

var x=document.getElementsByClassName("intro");

HTML DOM 教程

如何改變 HTML 元素的內容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對 HTML DOM 事件做出反應
如何添加或刪除 HTML 元素

瀏覽器對象模型（ BOM ）

瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器 "對話"。

瀏覽器對象模型 (BOM)

瀏覽器對象模型（Browser?Object?Model (BOM)）尚無正式標準。

由于現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，因此常被認為是 BOM 的方法和屬性。

Window 對象

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

所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。

全局變量是 window 對象的屬性。

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

甚至 HTML DOM 的 document 也是 window 對象的屬性之一：
? ? ? ? window.document.getElementById("header");
? ? ? ? 與此相同：
? ? ? ? document.getElementById("header");

Window 尺寸

有三種方法能夠確定瀏覽器窗口的尺寸。

對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器窗口的內部高度(包括滾動條)
window.innerWidth - 瀏覽器窗口的內部寬度(包括滾動條)

對于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

實用的 JavaScript 方案（涵蓋所有瀏覽器）。實例：（?嘗試一下）

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

該例顯示瀏覽器窗口的高度和寬度。

其他 Window 方法

一些其他方法：

window.open()? ?- 打開新窗口
window.close()? ?- 關閉當前窗口
window.moveTo()? ?- 移動當前窗口
window.resizeTo()? ?- 調整當前窗口的尺寸

筆記：

定義全局變量與在 window 對象上直接定義屬性差別。

1、全局變量不能通過 delete 操作符刪除；而 window 屬性上定義的變量可以通過 delete 刪除

var num = 123; window.str = "string"; delete num; delete str; console.log(num); //123console.log(str); //str is not defined //全局變量不能通過 delete 刪除，因為通過 var 定義全局變量會有一個名為 [Configurable] 的屬性，默認值為 false， // 所以這樣定義的屬性不可以通過 delete 操作符刪除

2、訪問未聲明的變量會拋出錯誤，但是通過查詢 window 對象，可以知道某個可能未聲明的變量是否存在。

var newValue = oldValue; // 報錯：oldValue is not defined var newValue = window.oldValue; // 不會報錯 console.log(newValue); // undefined

3、有些自執行函數里面的變量，想要外部也訪問到的話，在 window 對象上直接定義屬性。

Window Screen

window.screen 對象包含有關用戶屏幕的信息。window.screen對象在編寫時可以不使用 window 這個前綴。

一些屬性：

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度

Window Screen 可用寬度

screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如窗口任務欄。

實例：（?返回您的屏幕的可用寬度：）嘗試一下

Window Screen 可用高度

screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如窗口任務欄。

實例：返回您的屏幕的可用高度：嘗試一下

所有 screen 屬性實例

Window Location

window.location 對象用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面。

window.location?對象在編寫時可不使用 window 這個前綴。一些例子：

一些實例:

location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口（80 或 443）
location.protocol 返回所使用的 web 協議（http: 或 https:）

Window Location Href

location.href 屬性返回當前頁面的 URL。

實例：返回（當前頁面的）整個 URL：

Window Location Pathname

location.pathname 屬性返回 URL 的路徑名。

實例：返回當前 URL 的路徑名：

Window Location Assign

location.assign() 方法加載新的文檔。

實例：加載一個新的文檔：嘗試一下

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <head> <script> function newDoc(){window.location.assign("https://www.runoob.com") } </script> </head> <body><input type="button" value="加載新文檔" onclick="newDoc()"></body> </html>

Window History

window.history 對象包含瀏覽器的歷史。

window.history對象在編寫時可不使用 window 這個前綴。

為了保護用戶隱私，對 JavaScript 訪問該對象的方法做出了限制。

一些方法：

history.back() - 與在瀏覽器點擊后退按鈕相同
history.forward() - 與在瀏覽器中點擊向前按鈕相同

Window history.back()

history.back() 方法加載歷史列表中的前一個 URL。

這與在瀏覽器中點擊后退按鈕是相同的：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <script> function goBack() {window.history.back() } </script> </head> <body><input type="button" value="Back" onclick="goBack()"></body> </html>

Window history.forward()

history forward() 方法加載歷史列表中的下一個 URL。

這與在瀏覽器中點擊前進按鈕是相同的：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function goForward() {window.history.forward() } </script> </head> <body><input type="button" value="Forward" onclick="goForward()"></body> </html>

history.go()?這個方法來實現向前，后退的功能。

function a(){history.go(1); // go() 里面的參數表示跳轉頁面的個數例如 history.go(1) 表示前進一個頁面 } function b(){history.go(-1); // go() 里面的參數表示跳轉頁面的個數例如 history.go(-1) 表示后退一個頁面 }

刷新的功能

function a(){history.go(0); // go() 里面的參數為0,表示刷新頁面 }

Window Navigator

window.navigator 對象包含有關訪問者瀏覽器的信息。

window.navigator?對象在編寫時可不使用 window 這個前綴。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><div id="example"></div> <script> txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>"; txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>"; txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>"; txt+= "<p>啟用Cookies: " + navigator.cookieEnabled + "</p>"; txt+= "<p>硬件平臺: " + navigator.platform + "</p>"; txt+= "<p>用戶代理: " + navigator.userAgent + "</p>"; txt+= "<p>用戶代理語言: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt; </script></body> </html>

警告!!!

來自 navigator 對象的信息具有誤導性，不應該被用于檢測瀏覽器版本，這是因為：

navigator 數據可被瀏覽器使用者更改
一些瀏覽器對測試站點會識別錯誤
瀏覽器無法報告晚于瀏覽器發布的新操作系統

由于 navigator 可誤導瀏覽器檢測，使用對象檢測可用來嗅探不同的瀏覽器。

由于不同的瀏覽器支持不同的對象，您可以使用對象來檢測瀏覽器。例如，由于只有 Opera 支持屬性 "window.opera"，您可以據此識別出 Opera。

例子：if (window.opera) {...some action...}

JavaScript?彈窗

可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框。

警告框

警告框經常用于確保用戶可以得到某些信息。

當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。

語法：window.alert("sometext");

window.alert()?方法可以不帶上window對象，直接使用?alert()?方法。

<!DOCTYPE html> <html> <head> <script> function myFunction() {alert("你好，我是一個警告框！"); } </script> </head> <body><input type="button" onclick="myFunction()" value="顯示警告框"></body> </html>

確認框

確認框通常用于驗證是否接受用戶操作。

當確認卡彈出時，用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。

當你點擊 "確認", 確認框返回 true，如果點擊 "取消", 確認框返回 false。

語法：window.confirm("sometext");

window.confirm()?方法可以不帶上window對象，直接使用confirm()方法。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>點擊按鈕，顯示確認框。</p> <button onclick="myFunction()">點我</button> <p id="demo"></p> <script> function myFunction(){var x;var r=confirm("按下按鈕!");if (r==true){x="你按下了\"確定\"按鈕!";}else{x="你按下了\"取消\"按鈕!";}document.getElementById("demo").innerHTML=x; } </script></body> </html>

提示框

提示框經常用于提示用戶在進入頁面前輸入某個值。

當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。

如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 null。

語法：window.prompt("sometext","defaultvalue");

window.prompt()?方法可以不帶上window對象，直接使用prompt()方法。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>點擊按鈕查看輸入的對話框。</p> <button onclick="myFunction()">點我</button> <p id="demo"></p> <script> function myFunction(){var x;var person=prompt("請輸入你的名字","Harry Potter");if (person!=null && person!=""){x="你好 " + person + "! 今天感覺如何?";document.getElementById("demo").innerHTML=x;} } </script> </body> </html>

換行

彈窗使用反斜杠 + "n"(\n) 來設置換行。

實例：alert("Hello\nHow are you?");

JavaScript?計時事件

JavaScript 設定一個時間間隔之后，再來執行代碼，稱之為計時事件

通過使用 JavaScript，我們有能力做到在一個設定的時間間隔之后來執行代碼，而不是在函數被調用后立即執行。我們稱之為計時事件。

在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

setInterval() - 間隔指定的毫秒數不停地執行指定的代碼。
setTimeout() - 在指定的毫秒數后執行指定代碼。

注意:?setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法。

setInterval() 方法

setInterval() 間隔指定的毫秒數不停地執行指定的代碼

語法：window.setInterval("javascript function",milliseconds);

window.setInterval()?方法可以不使用 window 前綴，直接使用函數?setInterval()。

setInterval()?
? ? ? ? 第一個參數是函數（function）。
? ? ? ? 第二個參數間隔的毫秒數
? ? ? ? 注意:?1000 毫秒是一秒。

實例：每三秒彈出 "hello" ：setInterval(function(){alert("Hello")},3000);

實例展示了如何使用 setInterval() 方法，但是每三秒彈出一次對用戶體驗并不好。

以下實例將顯示當前時間。 setInterval() 方法設置每秒鐘執行一次代碼，就是手表一樣。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>在頁面顯示一個時鐘</p> <p id="demo"></p> <script> var myVar = setInterval(function(){myTimer()},1000); function myTimer(){var d = new Date();var t = d.toLocaleTimeString();document.getElementById("demo").innerHTML=t; } </script></body> </html>

如何停止執行?

clearInterval() 方法用于停止 setInterval() 方法執行的函數代碼。

語法：window.clearInterval(intervalVariable)

window.clearInterval()?方法可以不使用window前綴，直接使用函數clearInterval()。

要使用 clearInterval() 方法, 在創建計時方法時你必須使用全局變量：

myVar=setInterval("javascript function",milliseconds);

然后你可以使用 clearInterval() 方法來停止執行。以下例子,我們添加了 "停止" 按鈕：（?嘗試一下?）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>頁面上顯示時鐘：</p> <p id="demo"></p> <button onclick="myStopFunction()">停止</button> <script> var myVar=setInterval(function(){myTimer()},1000); function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t; } function myStopFunction(){clearInterval(myVar); } </script></body> </html>

setTimeout() 方法

語法：myVar= window.setTimeout("javascript function",?milliseconds);

setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 myVar 的變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。

setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg。

第二個參數指示從當前起多少毫秒后執行第一個參數。

提示：1000 毫秒等于一秒。

實例：等待3秒，然后彈出 "Hello" （?嘗試一下）：setTimeout(function(){alert("Hello")},3000);

如何停止執行?

clearTimeout() 方法用于停止執行setTimeout()方法的函數代碼。

語法：window.clearTimeout(timeoutVariable)

window.clearTimeout()?方法可以不使用window 前綴。

要使用clearTimeout() 方法, 你必須在創建超時方法中（setTimeout）使用全局變量:

myVar=setTimeout("javascript function",milliseconds);

如果函數還未被執行，你可以使用 clearTimeout() 方法來停止執行函數代碼。

實例：以下是同一個實例, 但是添加了 "Stop the alert" 按鈕：（?嘗試一下）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body><p>點擊第一個按鈕等待3秒后出現"Hello"彈框。</p> <p>點擊第二個按鈕來阻止第一個函數運行。（你必須在3秒之前點擊它）。</p> <button onclick="myFunction()">點我</button> <button onclick="myStopFunction()">停止彈框</button> <script> var myVar; function myFunction(){myVar=setTimeout(function(){alert("Hello")},3000); } function myStopFunction(){clearTimeout(myVar); } </script></body> </html>

更多實例

另一個簡單的計時

JavaScript?Cookie

Cookie 用于存儲 web 頁面的用戶信息。

什么是 Cookie？

Cookie 是一些數據, 存儲于你電腦上的文本文件中。
當 web 服務器向瀏覽器發送 web 頁面時，在連接關閉后，服務端不會記錄用戶的信息。
Cookie 的作用就是用于解決 "如何記錄客戶端的用戶信息":

當用戶訪問 web 頁面時，他的名字可以記錄在 cookie 中。
在用戶下一次訪問該頁面時，可以在 cookie 中讀取用戶訪問記錄。

Cookie 以名/值對形式存儲，如下所示:
username=John Doe
當瀏覽器從服務器上請求 web 頁面時，屬于該頁面的 cookie 會被添加到該請求中。服務端通過這種方式來獲取用戶的信息。

使用 JavaScript 創建Cookie

JavaScript 可以使用?document.cookie?屬性來創建、讀取、及刪除 cookie。
JavaScript 中，創建 cookie 如下所示：
document.cookie="username=John Doe";

您還可以為 cookie 添加一個過期時間（以 UTC 或 GMT 時間）。默認情況下，cookie 在瀏覽器關閉時刪除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 參數告訴瀏覽器 cookie 的路徑。默認情況下，cookie 屬于當前頁面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

使用 JavaScript 讀取 Cookie

在 JavaScript 中, 可以使用以下代碼來讀取 cookie：
var x = document.cookie;

document.cookie 將以字符串的方式返回所有的 cookie，類型格式： cookie1=value; cookie2=value; cookie3=value;

使用 JavaScript 修改 Cookie

在 JavaScript 中，修改 cookie 類似于創建 cookie，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

舊的 cookie 將被覆蓋。

使用 JavaScript 刪除 Cookie

刪除 cookie 非常簡單。您只需要設置 expires 參數為以前的時間即可，如下所示，設置為 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，當您刪除時不必指定 cookie 的值。

Cookie 字符串

document.cookie 屬性看起來像一個普通的文本字符串，其實它不是。

即使您在 document.cookie 中寫入一個完整的 cookie 字符串, 當您重新讀取該 cookie 信息時，cookie 信息是以名/值對的形式展示的。

如果您設置了新的 cookie，舊的 cookie 不會被覆蓋。新 cookie 將添加到 document.cookie 中，所以如果您重新讀取document.cookie，您將獲得如下所示的數據：

cookie1=value; cookie2=value;

JavaScript Cookie 實例

在以下實例中，我們將創建 cookie 來存儲訪問者名稱。

首先，訪問者訪問 web 頁面, 他將被要求填寫自己的名字。該名字會存儲在 cookie 中。

訪問者下一次訪問頁面時，他會看到一個歡迎的消息。

在這個實例中我們會創建 3 個 JavaScript 函數:

設置 cookie 值的函數

獲取 cookie 值的函數

檢測 cookie 值的函數

設置 cookie 值的函數

首先，我們創建一個函數用于存儲訪問者的名字：

函數解析：

以上的函數參數中，cookie 的名稱為 cname，cookie 的值為 cvalue，并設置了 cookie 的過期時間 expires。

該函數設置了 cookie 名、cookie 值、cookie過期時間。

獲取 cookie 值的函數

然后，我們創建一個函數用于返回指定 cookie 的值：

function getCookie(cname) {var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++) {var c = ca[i].trim();if (c.indexOf(name)==0) return c.substring(name.length,c.length);}return ""; }

函數解析：

cookie 名的參數為 cname。

創建一個文本變量用于檢索指定 cookie :cname + "="。

使用分號來分割 document.cookie 字符串，并將分割后的字符串數組賦值給 ca (ca = document.cookie.split(';'))。

循環 ca 數組 (i=0;i<ca.length;i++)，然后讀取數組中的每個值，并去除前后空格 (c=ca[i].trim())。

如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。

如果沒有找到 cookie, 返回 ""。

檢測 cookie 值的函數

最后，我們可以創建一個檢測 cookie 是否創建的函數。

如果設置了 cookie，將顯示一個問候信息。

如果沒有設置 cookie，將會顯示一個彈窗用于詢問訪問者的名字，并調用 setCookie 函數將訪問者的名字存儲 365 天：

完整實例

實例：以下實例在頁面載入時執行 checkCookie() 函數。（?嘗試一下）

總結

以上是生活随笔為你收集整理的菜鸟教程之 HTML DOM 和浏览器BOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CompletableFuture详解~
下一篇： Hack.Chat 在浏览器里快速建立简

HTML

菜鸟教程 之 HTML DOM 和 浏览器BOM

HTML DOM

HTML DOM (文檔對象模型)

HTML DOM 樹

查找 HTML 元素

通過 id 查找 HTML 元素

通過標簽名查找 HTML 元素

通過類名找到 HTML 元素

瀏覽器對象模型 （ BOM ）

瀏覽器對象模型 (BOM)

Window 對象

Window 尺寸

其他 Window 方法

筆記：

Window Screen

Window Screen 可用寬度

Window Screen 可用高度

Window Location

Window Location Href

Window Location Pathname

Window Location Assign

Window History

Window history.back()

Window history.forward()

Window Navigator

JavaScript?彈窗

警告框

確認框

提示框

換行

JavaScript?計時事件

setInterval() 方法

如何停止執行?

setTimeout() 方法

如何停止執行?

JavaScript?Cookie

什么是 Cookie？

使用 JavaScript 創建Cookie

使用 JavaScript 讀取 Cookie

使用 JavaScript 修改 Cookie

使用 JavaScript 刪除 Cookie

Cookie 字符串

JavaScript Cookie 實例

設置 cookie 值的函數

獲取 cookie 值的函數

檢測 cookie 值的函數

完整實例

總結

菜鸟教程之 HTML DOM 和浏览器BOM

瀏覽器對象模型（ BOM ）