在過去的幾天裡，我們學會了JavaScript的變數、迴圈、函式與物件，但是我們在JavaScript裡把角色的血量和等級算得有多精準，網頁畫面本身始終沒有任何變化，我們只能在控制台（Console）裡看印出來的文字。

如果我們希望JavaScript能夠伸出手，去修改網頁上的文字、甚至改變元件的CSS顏色，我們就必須依賴一個極其重要的橋樑技術：DOM（文件物件模型，Document Object Model）。

今天我們就要學習如何讓JavaScript正式介入網頁畫面，動手操控視覺外觀。

什麼是 DOM

簡單來說，DOM就是瀏覽器幫網頁HTML自動轉換成的一張「元素地圖」。

當瀏覽器載入你的HTML檔案時，它會把裡面的每一個標籤（例如<body>、<h1>、<div>）通通包裝成一個個可以被JavaScript抓取的「物件」，在JavaScript中，這個巨大的地圖起點就叫做 document。

只要透過document提供的方法，JavaScript就能在網頁上尋找特定的標籤，進而對它進行修改。

操控網頁畫面的兩個核心步驟

要用JavaScript改變網頁某個區塊的顏色，只有兩個固定步驟：

1：在網頁上「抓到」那個元件

我們通常會在HTML標籤上設定id或是class，然後在JavaScript中使用**document.querySelector()** 來精準鎖定它。

• 例如要抓取id為box的標籤：const myBox = document.querySelector("#box");

步驟 2：修改外觀

抓到元件後，我們可以透過 **.style**屬性直接修改它的CSS樣式。

• 例如要把背景顏色改成紅色：myBox.style.backgroundColor="red";
• 在CSS裡寫background-color，到了JavaScript裡要改成小駝峰寫法backgroundColor。

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day26 DOM 元素操作基礎</title>
    <style>
        /* 網頁基礎樣式 */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
            background-color: #f5f6fa;
        }

        /* 預設的方塊外觀，此時是灰色 */
        .color-box {
            width: 200px;
            height: 200px;
            background-color: #7f8c8d; /* 預設灰色 */
            margin-top: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transition: background-color 0.5s ease; /* 顏色轉變更平滑 */
        }
    </style>
</head>
<body>

    <h1 id="main-title">這段文字與下方的方塊顏色將被JavaScript 改變</h1>
    
    <!-- 這是我們要抓取的目標方塊，設定一個id叫colorBlock -->
    <div id="colorBlock" class="color-box"></div>

    <script>
        // 使用querySelector抓取網頁上的HTML元件
        const targetBox = document.querySelector("#colorBlock");
        const titleText = document.querySelector("#main-title");
        // 透過style屬性直接用JS修改CSS外觀
        
        // 將標題文字顏色改成深藍色
        titleText.style.color = "#2c3e50";

        // 將原先灰色的方塊背景，直接改寫為紫色
        targetBox.style.backgroundColor = "#9b59b6";
    </script>
</body>
</html>

幾何表現介紹

當你將這段程式碼在瀏覽器中打開時，你會親眼見證JavaScript介入畫面的瞬間：

• 觀察：在HTML/CSS的預設中，那個方塊本來應該是灰色（#7f8c8d），但是當瀏覽器一行行執行到最下方的<script>時，JavaScript大腦成功透過querySelector鎖定了#colorBlock的位置，並強行注入了新顏色。
• 網頁一開啟，方塊就會呈現漂亮的紫色，這證明JavaScript已經跨越了控制台的界線，拿到了控制網頁畫面的指揮權。

總結

今天我們成功解鎖了 DOM（文件物件模型） 的操作，我們學會了先用document.querySelector()把網頁上的標籤抓進JavaScript的變數裡，再用.style.backgroundColor這類型的語法直接對網頁的視覺外觀進行即時改寫。

不過，目前這種改法是一開網頁就自動改掉了，在實際的網頁中，我們更希望它是「使用者點擊了按鈕之後，方塊才變色」。

明天（Day 27），我們將跨入前端互動的核心靈魂：DOM事件監聽（Event Listener），去看看如何讓網頁開始捕捉使用者的滑鼠點擊、鍵盤輸入等動作，實現真正的雙向動態互動，明天見。