上一篇使用Date取得日期與時間後，結果都是透過console.log()顯示在主控台。這次要把 JavaScript取得的資料放進網頁，讓畫面上的內容真的產生變化。

在開始操作前，這裡先介紹一個新的概念：DOM。DOM 的全名是 Document Object Model，中文稱為文件物件模型，它讓 JavaScript可以讀取及修改網頁中的內容。

瀏覽器讀取 HTML 後，會按照標籤之間的關係，把網頁整理成 JavaScript能夠操作的物件。先準備下面這段 HTML：

<main class="panel">
  <h1 id="title">JavaScript 30 天</h1>
  <p id="status">目前進度：0 天</p>
  <ul id="topics">
    <li>日期與時間</li>
  </ul>
</main>

瀏覽器會保留這些標籤的上下層關係。main裡面有h1、p和ul，而ul裡面又有一個li。這些元素在 DOM 中都會成為 JavaScript可以操作的節點。

要修改內容，首先要找到對應的元素。這裡使用document.querySelector()選取元素：

const panel = document.querySelector(".panel");
const title = document.querySelector("#title");
const status = document.querySelector("#status");
const topics = document.querySelector("#topics");

console.log(title);

document代表目前的網頁，querySelector()則使用和 CSS 相同的選擇器尋找元素。.panel尋找 class，#title尋找 id。它只會取得第一個符合的元素，如果找不到則會得到null。

找到元素後，可以使用textContent讀取或修改文字：

console.log(title.textContent); // JavaScript 30 天

title.textContent = "JavaScript 30 天挑戰";
status.textContent = "目前進度：14 天";

執行後，畫面上的標題和進度文字會直接改變。這裡修改的是瀏覽器目前顯示的 DOM，不會改寫原本的 HTML 檔案。

如果要改變元素的樣式，可以先在 CSS 準備一個 class：

.panel.active {
  border-color: #16845b;
  background: #f0fff8;
}

接著使用classList.add()把active加入panel：

panel.classList.add("active");

可以看到外框和背景顏色都改變了。這種方式會讓 CSS 繼續負責外觀，JavaScript只負責決定什麼時候加入 class。

除了修改現有元素，也可以使用createElement()建立新元素：

const item = document.createElement("li");
item.textContent = "DOM 操作";
topics.append(item);

第一行建立一個新的li，第二行放入文字，最後使用append()將它加到ul的尾端。執行後，列表中就會多出一個「DOM 操作」。下一篇再讓這些修改配合使用者的點擊或輸入執行。