自學日記

學習程式相關知識及學習法

0%

DOM與BOM與API

發表於 更新於

DOM與BOM與API

介紹什麼是DOM、什麼是BOM及什麼是API

什麼是DOM?

  • Document Object Model =文件 物件 模型
  • HTML可以被解析成 DOM Tree(樹)

    DOM Tree示意圖:

    https://info343.github.io/dom.html
    資料引用自:https://info343.github.io/dom.html

    圖片裡的資料結構像是倒過來的樹，而這些<>裡的元素又稱為節點(node)，其中最上層的節點(html)又稱為根元素(root)，包裹所有tag。

    其中也有父節點與子節點的關係，如同圖中ul是li的父節點，li是ul的子節點。

    示意圖二:


    資料參考自:https://blog.10pines.com/2018/08/27/reactjs-virtual-dom/

    此圖主要想敘述，各物件(html、body..)會由文件(document) 包裹，因此形成的樹狀圖稱為模型，因此稱為DOM(文件 物件 模型)

延伸參考:
星巴哥技術專欄-資料結構 樹 Tree
JavsScript 的 DOM 介紹與操作

在瀏覽器觀察DOM Tree 與 document

在網頁檢察界面中輸入document這個物件，可以看他其裝載的所有物件元素。

DOM Tree 與 document呈現示意圖:

什麼是API(DOM的API)

  • API(Application Programming Interface )為應用程式介面，有分為程式存取的方式，及發出請求(request)至伺服器取得資源的方式。

  • 即是藉由程式與網頁應用程式溝通，DOM 定義了一組標準 API ，讓我們可以使用 JavaScript（和其他編程語言） 對 HTML DOM文件做訪問操作。

  • 在DOM中，所有HTML元素都定義為objects。

A property is a value that you can get or set (like changing the content of an HTML element).
A method is an action you can do (like add or deleting an HTML element).
(一個屬性是一個值，你可以獲取或設置（如更改HTML元素的內容）。
一個方法是你可以做的（如添加或刪除HTML元素）的動作。)

以下示例使用更改元素的內容（innerHTML）：<p>id="demo"

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

在上面的示例中，getElementById是方法，innerHTML而是 屬性。
(資料引用自:https://www.w3schools.com/js/js_htmldom_methods.asp)

  • 通常，使用JavaScript，您需要操作HTML元素。為此，您必須首先找到元素。做這件事有很多種方法：

    通過ID查找HTML元素
    通過標籤名稱查找HTML元素
    通過類名稱查找HTML元素
    通過CSS選擇器查找HTML元素
    通過HTML對象集合查找HTML元素

什麼是BOM?

  • Browser Object Model (瀏覽器物件模型)

  • 注意!瀏覽器與網頁是不同的(BOM/DOM)

  • Window是瀏覽器的根物件

在上面章節在瀏覽器觀察DOM Tree 與 document中，有document的示意圖，其實document也等於windows.document。
示意圖如下:

(引用自:https://ithelp.ithome.com.tw/m/articles/10191666)

另外也知道一點，

javascript是一個依賴根物件的語言

延伸參考:

BOM API:
JavaScript Window - The Browser Object Model