提姆寫程式

0%

JS 筆記 - 認識 DOM 文件物件模型

發表於 更新於 分類於 Disqus：
DOM 的基本認識

tree

常常聽到人家講說 DOM 元素，到底是什麼?

DOM 的英文全名是 Document Object Model，中文是「文件物件模型」。

是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序。 本質上，它將網頁與腳本或程式語言連結在一起。

參考來源：https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model

另外透過 KURO 老師所寫的重新認識 JavaScript 的文章 一書中解釋 DOM 是滿簡單明瞭的，文中提到：

DOM 是一個將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」。

一開始學習 HTML 時，會學習到基本架構如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>document</title>
  </head>

  <body>
    <h1>這是h1</h1>
    <p>這是內容</p>
    <a href="#">這是一個 a 連結</a>
  </body>
</html>

瀏覽器是從上到下一行一行的讀取，DOM tree 就是把所有的節點拆開後，彼此的關係會像一棵樹，故取名之，如下圖：

DOM tree

以 document 為起點，可以延伸出許多的 HTML 標籤，一個節點就是一個標籤，往下又可以再延伸出「本文(text)節點」與「屬性 (Attribute)的節點」。JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作。

一些節點註記：

  • Element: html, head, body, ul, li…
  • Attribute: a, id, type…
  • text: h1, p, span…
    <以上有誤還請不吝指正。>

DOM API

DOM: JavaScript 用來控制「網頁」的節點與內容的標準，「DOM」有著 W3C 所制定的標準來規範。上方提到的 DOM API 是什麼?

先解釋一下 API，應用程式介面，英文全名是：Application Programming Interface。

我個人比較喜歡知道縮寫英文的意思，不然會被英文名詞嚇唬了。超級多英文縮寫名詞啊!

可以透過下方影片了解 API 的概念。

想要透過 DOM API 取得節點，透過 JavaScript 可以這樣寫：

1
2
3
4
5
6
7
8
9
10
11
12
// 根據傳入的值，找到 DOM 中 id 為 'xxx' 的元素。
document.getElementById("xxx");

// 針對給定的 tag 名稱，回傳所有符合條件的 NodeList 物件 [註1]
document.getElementsByTagName("xxx");

// 針對給定的 class 名稱，回傳所有符合條件的 NodeList 物件。
document.getElementsByClassName("xxx");

// 針對給定的 Selector 條件，回傳第一個 或 所有符合條件的 NodeList。
document.querySelector("xxx");
document.querySelectorAll("xxx");

而透過 DOM API 選取出來的節點，我們可以透過操作 textContent 屬性來變更它的文字。

設定一個 HTML 屬性節點為 id，名稱為 greet：

<h1 id="greet"></h1>

可以先透過 document.querySelector() 選取方法來取得節點，然後修改 textContent 屬性：

1
<script>document.querySelector('#greet').textContent = 'Hello World!'</script>

可以看一下 codepen

這樣就可以透過 JavaScript 在網頁上輸出 “Hello World!” 囉！

心得

一開始有學到 getByElementById 來賦予 id 的內容，後面會學習到透過 querySelector 能選擇的屬性更多元! jQuery 的 $ 錢字號概念就是從 DOM API 取得方式來的。

參考文章：https://ithelp.ithome.com.tw/articles/10191666