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>
  <head>
    <title>一個簡單的網頁</title>
  </head>

  <body>
    <h1>這是標題</h1>
    <p>這是一個<i>簡單</i>的網頁</p>
  </body>

</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 class="btn" id="demo12" onclick="doAlert(this)">取得這個 按鈕 的文字</button>

//當你去點擊你所製作的button後，網頁會顯示：取得這個 <b>按鈕</b> 的HTML

 

JavaScript

document.getElementById("demo11").onclick = function () {
 alert(this.innerHTML);
}
function doAlert(tag) {
 alert(tag.innerText);
}

//當你點擊你所製作的button時，網頁上會顯示你在button上所顯示的文字

 

結語

通過以上的介紹希望大家可以更了解BOM/DOM的定義以及基礎知識，如果想要看更多有關的內容，可以來我們“快樂學程式”的官網逛逛喔。網址連結：https://www.happycoding.today/posts