iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

30天學網頁設計系列 第 29

Day29 DOM 介紹

文件物件模型 (DOM)

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

DOM的組成

DOM是由節點組成的。
1.html載入完畢後,瀏覽器會把html文件結構化生成一個DOM樹
2.獲取DOM的元素節點
3.操作該元素(改變該元素的屬性或給該元素新增事件)

在HTML中,一切都是節點

  • 元素節點:HTML標籤
  • 文字節點:標籤中的文字
  • 屬性節點:標籤的屬性,
    文字節點是元素節點的子節點,屬性節點既不是元素節點的子節點也不是元素節點的父節點,整個html文件是一個文件節點,而所有的節點都是Object型別。

DOM的用處

  • 獲取元素節點
  • 設定元素的屬性值
  • 設定元素的樣式
  • 動態建立和刪除元素
  • 給元素繫結事件

DOM API

DOM: JavaScript 用來控制網頁的節點與內容的標準,DOM有著W3C所制定的標準來規範。API:應用程式介面,英文全名是:Application Programming Interface。可以透過 DOM API 取得節點,JavaScript如下方程式碼:

根據傳入的值,找到 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 屬性:

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

上一篇
Day28 Flutter—BLoC介紹(二)
下一篇
Day30 完賽結語
系列文
30天學網頁設計30

尚未有邦友留言

立即登入留言