fbpx

前言

在剛開始學程式時,你是不是常常聽到一個說法: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物件。舉例來說:

很明顯,全域變數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:

在最根部的地方,就是 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

JavaScript

結語

通過以上的介紹希望大家可以更了解BOM/DOM的定義以及基礎知識,如果想要對JavaScript更系統化的瞭解,Udemy這裡開課囉!老師從基礎手把手的帶你,教你主流寫法提升 JS 開發能力!

 

如果你的入門還在單打獨鬥,歡迎來到快樂學程式找到志同道合的夥伴,你的自學之路不孤單。

Leave a Reply