12-29-2018
JavaScript入門系列:BOM和DOM筆記
前言
在剛開始學程式時,你是不是常常聽到一個說法:HTML、CSS 與 JavaScript 是網頁前端三大要素。HTML 主要是負責資料與結構,CSS 則負責樣式的呈現,而JavaScript 負責行為與互動。但其實JavaScript 並沒有提供網頁的操作方法,前端開發者在網頁的操作方法都是「瀏覽器」提供的。 這些操作方法基本上會分別由這兩種物件所擁有:「BOM」與「DOM」。
所以在瀏覽器上的 JavaScript 包含了:
JavaScript 核心 (以 ECMAScript 標準為基礎)
BOM (Browser Object Model,瀏覽器物件模型)
DOM (Document Object Model,文件物件模型)
前端開發者就是透過 JavaScript 去呼叫 BOM 與 DOM 提供的 API,進一步透過它們去控制瀏覽器的行為與網頁的內容。
BOM是什麼
BOM (Browser Object Model,瀏覽器物件模型),是瀏覽器所有功能的核心,與網頁的內容無關。早期沒有規範時,各家瀏覽器廠商自行開發瀏覽器的功能,非常混亂。 直到最近幾年, W3C 把各家瀏覽器統一集合起來納入了 HTML5 的標準中。因為在DOM Level 1標準定制前,BOM已經存在了,所以也可以稱作Level 0 DOM。
BOM 的核心其實是 window 物件。而 window 物件提供的屬性主要為 document、location、navigator、screen、history 以及 frames。
在瀏覽器裡的 window 物件扮演著兩種角色:
ECMAScript 標準裡的「全域物件」 (Global Object)
JavaScript 用來與瀏覽器溝通的窗口
Window 物件
在上面的內容有提到說,瀏覽器物件模型有著階層性的架構,最上層便是Window物件,代表著瀏覽器視窗本身,若是視窗中含有框架,則每個框架都還有屬於自己的window物件。
所有的BOM都可透過window來存取。window物件的使用不須經過宣告,可以直接使用。事實上,在Javcascript中,所有的全域變數、函式、物件,其實都是屬於window物件。舉例來說:
<script> x=5; alert (window.x); //輸出 5 </script> |
很明顯,全域變數x是window物件的一個屬性。事實上,上面使用到的 alert() 函式,也是window的一個方法。
常用的window屬性
屬性 |
說明 |
closed |
返回視窗是否已關閉 |
defaultStats |
用於瀏覽器狀態欄內的預設字符串 |
document |
document物件 |
history |
history物件 |
innerheight |
視窗內部高度,在IE8(包含)之前,無法使用。可以用document.documentElement.clientHeight作為代替 |
innerwidth |
視窗內部寬度,在IE8(包含)之前,無法使用。可以用document.documentElement.clientWidth作為代替 |
length |
返回框架數量 |
location |
location物件 |
name |
視窗名稱 |
Navigator |
Navigator物件 |
opener |
表示打開窗口的Window對象 |
outerheight |
返回視窗外部高度 |
outerwidth |
返回視窗外部寬度 |
pageXOffset |
當前頁面相對於視窗顯示區左上角的X位置 |
pageYOffset |
當前頁面相對於視窗顯示區左上角的Y位置 |
parent |
返回父視窗 |
Screen |
screen物件 |
self |
視窗本身的引用 |
status |
顯示瀏覽器狀態欄的字串 |
top |
最頂層祖先視窗 |
window |
視窗本身的引用 |
常用的window方法
方法 |
說明 |
alert() |
跳出一個警告訊息窗 |
blur() |
移除該視窗焦點 |
clearInterval() |
取消由 setInterval() 設定的計時器 |
clearTimeout() |
取消由 setTimeout() 方法設定的計時器 |
close() |
關閉瀏覽器視窗 |
confirm() |
跳出一個有確認與取消按鈕地確認框 |
createPopup() |
建立一個彈出視窗 |
focus() |
取得焦點 |
moveBy() |
以相對位置移動視窗 |
moveTo() |
移動視窗到指定位置 |
open() |
開啟一個新的瀏覽器視窗 |
print() |
輸出目前窗口內容 |
prompt() |
跳出可輸入訊息的對話 |
resizeBy() |
調整視窗大小 |
resizeTo() |
調整視窗大小 |
scrollBy() |
滾動內容 |
scrollTo() |
滾動內容 |
setInterval() |
計時器 |
setTimeout() |
計時器 |
DOM 是什麼
DOM (Document Object Model,文件物件模型),是一個以樹狀結構來表示 HTML 文件的模型,而組合起來的樹狀圖,我們稱之為「DOM Tree」。我們把 HTML 每個節點的關係攤來看,就好像是一棵樹一樣。我們舉例一個基本的HTML:
<html> |
在最根部的地方,就是 document,就是 BOM 圖中 window 下面的那個。往下可以延伸出一個個的 HTML 標籤,一個節點就是一個標籤,往下又可以再延伸出「文本節點」與「屬性的節點」。
此時JavaScript就可以藉由DOM API去存取並改變HTML架構、樣式和內容的方法,JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作。
總結以上幾點可以得知其實DOM的document也包含在BOM的window物件裡,所以BOM/DOM的最大差別在於:
BOM: JavaScript 與瀏覽器溝通的窗口,不涉及網頁內容。
DOM: JavaScript 用來控制網頁的節點與內容的標準。
取得DOM原型物件
在JavaScript文章中有提到JavaScript的基礎使用方式,那要如何用JavaScript取得網頁中的元素呢,取得元素的方式有四種:
根據ID名稱選取:document.getElementById(elementId)
根據元素名稱選取:document.getElementsByTagName(tagName)
根據名稱選取:document.getElementsByName(name)
根據 Class 名稱選取:document.getElementsByClassName(classname)
從中可以發現唯獨 Id 的 element 是單數,其他的都是複數(Elements),從這一點上就可以知道, Id 在每個頁面中都是唯一的,不能重複使用。以下舉一個用ID去取得目標getElementByID的例子
HTML
<button class="btn" id="demo11">取得這個 按鈕 的HTML</button> //當你去點擊你所製作的button後,網頁會顯示:取得這個 <b>按鈕</b> 的HTML |
JavaScript
document.getElementById("demo11").onclick = function () { //當你點擊你所製作的button時,網頁上會顯示你在button上所顯示的文字 |
結語
通過以上的介紹希望大家可以更了解BOM/DOM的定義以及基礎知識,如果想要看更多有關的內容,可以來我們“快樂學程式”的官網逛逛喔。網址連結:https://www.happycoding.today/posts
在最根部的地方,就是 document,就是 BOM 圖中 window 下面的那個。往下可以延伸出一個個的 HTML 標籤,一個節點就是一個標籤,往下又可以再延伸出「文本節點」與「屬性的節點」。
此時JavaScript就可以藉由DOM API去存取並改變HTML架構、樣式和內容的方法,JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作。
總結以上幾點可以得知其實DOM的document也包含在BOM的window物件裡,所以BOM/DOM的最大差別在於:
BOM: JavaScript 與瀏覽器溝通的窗口,不涉及網頁內容。
DOM: JavaScript 用來控制網頁的節點與內容的標準。
取得DOM原型物件
在JavaScript文章中有提到JavaScript的基礎使用方式,那要如何用JavaScript取得網頁中的元素呢,取得元素的方式有四種:
根據ID名稱選取:document.getElementById(elementId)
根據元素名稱選取:document.getElementsByTagName(tagName)
根據名稱選取:document.getElementsByName(name)
根據 Class 名稱選取:document.getElementsByClassName(classname)
從中可以發現唯獨 Id 的 element 是單數,其他的都是複數(Elements),從這一點上就可以知道, Id 在每個頁面中都是唯一的,不能重複使用。以下舉一個用ID去取得目標getElementByID的例子
HTML
//當你去點擊你所製作的button後,網頁會顯示:取得這個 按鈕 的HTML |
JavaScript
document.getElementById("demo11").onclick = function () { //當你點擊你所製作的button時,網頁上會顯示你在button上所顯示的文字 |
結語
通過以上的介紹希望大家可以更了解BOM/DOM的定義以及基礎知識,如果想要看更多有關的內容,可以來我們“快樂學程式”的官網逛逛喔。網址連結:https://www.happycoding.today/posts