前幾天一直在 JavaScript 裡面玩資料。

一下 Array，

一下 map()、filter()、find()，

昨天又把 Function 抓出來上班。

結果今天突然發現一件事。

我一直：

console.log("哈納");

哈納確實有出現。

但都只出現在 Console 裡。

不是欸，我是要你出現在網頁上，不是躲在後台偷偷上班 ==

所以今天就來看一下：

JavaScript 到底要怎麼抓到 HTML，然後真的改畫面。

先準備一個最簡單的 HTML

<h1 id="title">今天誰要上班？</h1>

<p class="message">目前還沒有人出現。</p>

<button id="btn">叫哈納出來</button>

目前畫面就是：

今天誰要上班？

目前還沒有人出現。

[叫哈納出來]

很和平。

但現在按鈕還只是裝飾品。

按下去完全沒反應。

哈納本人依然拒絕出場。

querySelector：先把人找到！

如果 JavaScript 想修改 HTML，

第一件事就是先找到那個元素。

例如：

const title = document.querySelector("#title");

這裡的：

#title

就是在找：

<h1 id="title">

如果要找 class：

const message = document.querySelector(".message");

就是找到：

<p class="message">

所以我現在先簡單記成：

querySelector() = 去 HTML 裡抓我要的人。

不然 JavaScript 連對方在哪都不知道，

是要改誰啦 XD

抓到了，那就改文字！

找到元素之後，

就可以用：

title.textContent = "哈納今天上班！";

原本：

今天誰要上班？

就會變成：

哈納今天上班！

欸！！！

哈納終於從 Console 裡走出來了！！！

再改下面那段：

message.textContent = "哈納：為什麼又是我？？？";

畫面就會變成：

哈納今天上班！

哈納：為什麼又是我？？？

很好。

今天終於不是只有：

console.log();

自己看爽的了 XD

那按鈕呢？

既然 HTML 都有一顆按鈕了，

當然不能讓它繼續當花瓶。

先找到它：

const btn = document.querySelector("#btn");

再加上：

btn.addEventListener("click", function () {
  title.textContent = "哈納今天上班！";
  message.textContent = "哈納：我就知道又是我 == ";
});

現在只要按下按鈕，

哈納就會正式出場。

整段 JavaScript：

const title = document.querySelector("#title");
const message = document.querySelector(".message");
const btn = document.querySelector("#btn");

btn.addEventListener("click", function () {
  title.textContent = "哈納今天上班！";
  message.textContent = "哈納：我就知道又是我 == ";
});

這次真的有互動了。

按一下 → 畫面改變。

終於開始有一點網頁不是死的感覺了。

還可以順便改 class

除了文字之外，

JavaScript 也可以幫 HTML 加上 class。

例如先準備 CSS：

.active {
  color: tomato;
  font-size: 32px;
}

然後在按鈕事件裡加：

title.classList.add("active");

變成：

btn.addEventListener("click", function () {
  title.textContent = "哈納今天上班！";
  title.classList.add("active");
});

按下去之後，

標題除了換文字，

也會套上 .active 的樣式。

哈納：

出場就出場，為什麼還要幫我變大？？？

因為今天要測試啊 XD

今天先記這三個

今天主要碰到：

document.querySelector()

找到 HTML 元素。

textContent

修改文字內容。

classList.add()

加入 class。

再搭配之前用過的：

addEventListener()

監聽使用者操作。

其實串起來就是：

找到元素 → 等使用者操作 → 修改畫面。

今天的小心得

前幾天的 JavaScript 大部分還是在處理資料。

今天開始真的把 JavaScript 跟 HTML 接在一起，

感覺突然比較有「網頁互動」的樣子了。

以前看到：

document.querySelector()

會覺得很長。

現在比較像：

喔，就是先去 HTML 抓人。

抓到之後，

要改文字、

加 class、

或做其他事情，

才有辦法繼續。

所以今天最大的進度就是：

哈納終於不用一直待在 console 裡了。

成功登上網頁版面 XD

Day 19，完成！