JavaScript Day 20. BOM 與 DOM

2021 iThome 鐵人賽

DAY 20

Modern Web

我的JavaScript日常系列第 20 篇

13th鐵人賽 javascript

Jemma

團隊前端新手練功團

2021-09-29 12:16:14

1194 瀏覽

分享至

前端網頁三大要素：JavaScript、HTML、CSS，HTML 負責整體資料與架構，CSS 負責網頁樣式外觀的呈現，JavaScript 處理使用者行為與互動，而這些互動其實都是由瀏覽器提供，主要提供的方法則分為兩種「BOM」及「DOM」。

JavaScript 由三部分構成：

JavaScript 核心 ( 以 ECMAScript 標準為基礎 )
BOM ( Browser Object Model，瀏覽器物件模型 )
DOM ( Document Object Model，文件物件模型 )

大家熟悉的 API，就是透過 JavaScript 去呼叫 BOM 與 DON，讓使用者得以與瀏覽器做互動。

BOM

究竟，什麼是 BOM 呢？BOM ( Browser Object Model，瀏覽器物件模型 )，是瀏覽器所有功能的核心，主要處理瀏覽器視窗和框架，不過通常瀏覽器特定的 JavaScript 擴充套件都被看做 BOM 的一部份，包括：彈出新的瀏覽器視窗、移動與關閉及調整瀏覽器視窗、提供 web 瀏覽器詳細資訊的定位物件、對 cookie 的支援.....等等。

window 物件其實就是 BOM 的核心，window 物件提供的屬性主要有 document、location、navigator、screen、history 以及 frames。

在瀏覽器裡的 window 物件扮演著兩種角色：

ECMAScript 標準裡的「全域物件」 (Global Object)

凡是在「全域作用範圍內」宣告的變數、物件、函式等等，都會自動變成「全域物件」，

這樣的變數便稱它為「全域變數」，可以使用 window.xxx 的方式抓取。
JavaScript 用來與瀏覽器溝通的窗口

指的是 alert()、blur()、close()、open() 等等我們所看到的 window 方法，就是窗口。

全域變數範例，var a = 5 這個全域變數，可以透過 window 抓取

var a = 5;
console.log( window.a );    // 5

在「全域作用範圍」宣告全域變數無法使用 delete 來移除，必須直接透過 window ：

// 無法使用 delete 來移除
var dog = 8;
console.log( window.dog ); // 8

delete window.dog; // false
console.log(window.dog); // 8

// 直接透過 window 來移除
window.dog = 8;
console.log(window.dog); // 8

delete window.dog; // true
console.log(window.dog); // undefined

由於 BOM 的 window 包含了 document，window 物件的屬性和方法是可以直接使用及運作的，因此可以直接使用 window 物件的 document 屬性，因為 document 物件又是 DOM 的根節點。可以說，BOM 包含了 DOM(物件)，瀏覽器提供訪問的是 BOM 物件，從 BOM 物件在訪問到 DOM 物件，因此 JavaScript 可以操作瀏覽器以及讀取瀏覽器的文件。

DOM

接著聊聊 DOM，DOM ( Document Object Model，文件物件模型 )，是一個以樹狀結構來表示 HTML 文件的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」。這邊這一行看起來可能還沒有辦法馬上理解，所以這裡直接範例：

<html xmlns="" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>DOM</title>
	</head>
	<body>
		<h2><a href="http://www.baidu.com">javascript DOM</a></h2>
		<p>對HTML元素進行操作，可新增、改變或移除css樣式等</p>
		<ul>
			<li>Javascript</li>
			<li>DOM</li>
			<li>CSS</li>
		</ul>
	</body>
</html>

HTML 可以說是由節點構成的集合，我們將 HTML 程式碼分解為 DOM 節點層次圖：

元素節點：上面範例中、、等都是元素節點，也是標籤。
文字節點：向使用者展示的內容，如中的 JavaScript、DOM、CSS 等文字。
屬性節點：元素屬性，如標籤的連結屬性 href="http://xxxx.xxxx.com"。

由上面的說明可以知道，一個節點就是一個標籤，JavaScript 就可以藉由 DOM API 去存取並改變 HTML 架構及互動方法，底下歸納 BOM 與 DOM 的分別：

BOM / JavaScript 與瀏覽器溝通的窗口，不涉及網頁內容。
DOM / JavaScript 用來控制網頁的節點與內容的標準。

取得 DOM 原型物件

參考開發者，透過 JavaScript 取得 DOM API 的寫法：

// 根據傳入的值，找到 DOM 中 id 為 'xxx' 的元素。
document.getElementById('xxx');

// 針對給定的 tag 名稱，回傳所有符合條件的 NodeList 物件
document.getElementsByTagName('xxx');

// 針對給定的 class 名稱，回傳所有符合條件的 NodeList 物件。
document.getElementsByClassName('xxx');

// 針對給定的 Selector 條件，回傳第一個 或 所有符合條件的 NodeList。
document.querySelector('xxx');
document.querySelectorAll('xxx');

參考資料：

重新認識 JavaScript: Day 11 前端工程師的主戰場：瀏覽器裡的 JavaScript
JavaScript入門系列：BOM和DOM筆記
 javascript學習筆記（三）BOM和DOM詳解