一、怎麼找東西

昨天的課程已經有小小的介紹到網頁的基本三巨頭，得知JavaScript是為了讓網「動起來」。

但有沒有想過，JavaScript 要怎麼知道我要改的是哪一個文字、按鈕或圖片？

這時候就要介紹一個很重要的東西——DOM！

二、DOM是什麼?

DOM(文件物件模型)

定義：是 HTML 和 XML 文件的標準程式介面（API）。

結構：瀏覽器會把網頁的結構（如 HTML 標籤、文字、圖片）轉化成一個樹狀結構（Tree Structure），每個標籤都是一個「節點」或「物件」。

用途：讓JavaScript可以透過它來動態存取、修改、新增或刪除網頁的內容、樣式與結構。

講這麼多概念理論是不是很難理解，把它想簡單點

「把我們的 HTML 網頁變成 JavaScript 可以操作的東西。」

三、實際操作

    <h1>JavaScript</h1>
    <button>點我</button>

那JavaScript怎麼找到他呢?

const title = document.querySelector("h1");
title.textContent = "你被我找到了!!";

使用 querySelector() 就會幫我們找到第一個 <h1>。找到以後修改文字內容如下：

流程可以想成

👉🏻 HTML → DOM → JavaScript找到元素 → 修改或操作網頁

四、結論

昨天成功讓JavaScript跑起來了，今天成功了解了什麼是DOM，能夠成功了解目前所學很重要呀!!!

明天會讓各位來玩Event事件，好好期待吧~