一、什麼是 DOM？

在上一篇文章中，我們使用 JavaScript 修改網頁上的文字。

那麼，JavaScript 是怎麼找到 HTML 元素的呢？

這就要認識 DOM（Document Object Model，文件物件模型）。

簡單來說，瀏覽器會將 HTML 文件轉換成一種可以透過程式操作的結構。JavaScript 就能透過這個結構，找到元素、讀取內容，或修改畫面。

例如，以下 HTML：

可以透過 JavaScript 取得指定元素：

const title = document.getElementById("title");
console.log(title.textContent);

執行後，瀏覽器的開發者工具 Console 會顯示：

病患資料管理

console.log() 是開發時常用的除錯方式，可以幫助我們確認程式取得了什麼資料。

二、什麼是事件？

事件（Event）是指使用者或瀏覽器發生的某種行為。

常見的事件包括：

• click：使用者點擊元素。
• input：輸入欄位的內容改變。
• change：表單元素的值發生變化。
• submit：使用者送出表單。
• DOMContentLoaded：HTML 文件解析完成。

我們可以監聽這些事件，並在事件發生時執行指定的程式。

三、使用 addEventListener 監聽按鈕

與其把事件直接寫在 HTML 的 onclick 屬性中，也可以使用 addEventListener()，讓 HTML 與 JavaScript 的職責更清楚。

當按鈕被點擊時，事件監聽器就會執行函式，修改畫面中的文字。

如果之後還需要加入其他互動，也可以在不同元素上設定不同的事件監聽器。

四、製作即時輸入提示

假設我們希望使用者輸入病患姓名時，畫面能即時顯示目前輸入的內容。

可以這樣實作：

病患姓名：
<input
type="text"
id="patientName"
placeholder="請輸入測試姓名"

這裡有兩個值得注意的地方：

第一，value 可以取得輸入欄位目前的內容。

第二，trim() 可以移除字串前後的空白，避免只輸入空格時仍被當成有效姓名。

我們使用 textContent 顯示使用者輸入，而不是直接使用 innerHTML 將內容當成 HTML 解讀，可以降低不必要的 HTML 注入風險。

五、實作一個簡單的顯示與隱藏功能

除了輸入提示，也可以透過 DOM 控制元素的顯示狀態。

透過 hidden 屬性，就能控制說明文字是否顯示，也能依照目前狀態更新按鈕文字。

六、今日小結

今天認識了 DOM、事件監聽器與輸入事件，並練習如何取得 HTML 元素、讀取使用者輸入，以及更新畫面內容。

這些都是前端互動的重要基礎。未來不論是製作病患搜尋、資料輸入表單，或是操作提示，都會用到相同的概念。

下一篇，我們將把這些技巧應用在醫療資訊系統的表單中，加入更完整的前端驗證流程。