有想法就大膽分享
有疑問就大聲提問,Have Fun !

首頁 " 討論區 " HTML / CSS / JS 討論區 " JavaScript入門系列:BOM和DOM筆記

標籤: 

  • JavaScript入門系列:BOM和DOM筆記

  • 文尼先生

    管理員
    2021 年 10 月 13 日07:36

    前言

    在剛開始學程式時,你是不是常常聽到一個說法:HTML、CSS 與 JavaScript 是網頁前端三大要素。HTML 主要是負責資料與結構,CSS 則負責樣式的呈現,而JavaScript 負責行為與互動。但其實JavaScript 並沒有提供網頁的操作方法,前端開發者在網頁的操作方法都是「瀏覽器」提供的。 這些操作方法基本上會分別由這兩種物件所擁有:「BOM」與「DOM」。

    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>這是一個簡單的網頁</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後,網頁會顯示:取得這個 按鈕 的HTML

    JavaScript

    document.getElementById("demo11").onclick = function () {
    alert(this.innerHTML);
    }
    function doAlert(tag) {
    alert(tag.innerText);
    }
    //當你點擊你所製作的button時,網頁上會顯示你在button上所顯示的文字

    結語

    通過以上的介紹希望大家可以更了解BOM/DOM的定義以及基礎知識

    • 這次討論是修改1 一個月, 2 星期前 文尼先生.
查看1 / 1回覆

原文
00 回覆 六月2018
現在