使用 JavaScript 更新使用者介面
在本章中，我們將開始使用 JavaScript 和 DOM 方法來為專案添加一個 h1 標籤，從而建構我們的專案。
開啟你的程式碼編輯器並建立一個新的 index.html 檔案。在 HTML 檔案中，加入以下程式碼：
<html>
<body>
<div></div>
</body>
</html>然後給 div 一個唯一的 id，以便稍後可以定位它。
<html>
<body>
<div id="app"></div>
</body>
</html>要在 HTML 檔案中編寫 JavaScript，請添加一個 script 標籤：
<html>
<body>
<div id="app"></div>
<script type="text/javascript"></script>
</body>
</html>現在，在 script 標籤內，你可以使用 DOM 方法 getElementById() 來通過 id 選擇 <div> 元素：
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>你可以繼續使用 DOM 方法來建立一個新的 <h1> 元素：
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// 選擇 id 為 'app' 的 div 元素
const app = document.getElementById('app');
// 建立一個新的 H1 元素
const header = document.createElement('h1');
// 為 H1 元素建立一個新的文字節點
const text = '開發。預覽。部署。';
const headerContent = document.createTextNode(text);
// 將文字附加到 H1 元素
header.appendChild(headerContent);
// 將 H1 元素放入 div 中
app.appendChild(header);
</script>
</body>
</html>為了確保一切正常運作，請在瀏覽器中開啟你的 HTML 檔案。你應該會看到一個顯示「開發。預覽。部署。」的 h1 標籤。
HTML 與 DOM 的區別
如果你在瀏覽器開發者工具中查看 DOM 元素，你會注意到 DOM 包含了 <h1> 元素。頁面的 DOM 與原始碼（即你建立的原始 HTML 檔案）是不同的。
這是因為 HTML 代表的是初始頁面內容，而 DOM 代表的是更新後的頁面內容，這些內容是由你編寫的 JavaScript 程式碼所改變的。
使用純 JavaScript 更新 DOM 非常強大但也很冗長。你已經編寫了所有這些程式碼來添加一個帶有文字的 <h1> 元素：
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const text = '開發。預覽。部署。';
const headerContent = document.createTextNode(text);
header.appendChild(headerContent);
app.appendChild(header);
</script>隨著應用程式或團隊規模的增長，以這種方式建構應用程式可能會變得越來越具有挑戰性。
使用這種方法，開發者需要花費大量時間編寫指令來告訴電腦如何做事情。但如果能描述你想顯示什麼，並讓電腦來決定如何更新 DOM，豈不是更好？
命令式與宣告式程式設計
上面的程式碼是命令式程式設計的一個好例子。你正在編寫如何更新使用者介面的步驟。但在建構使用者介面時，宣告式方法通常更受歡迎，因為它可以加快開發速度。開發者不需要編寫 DOM 方法，而是能夠宣告他們想顯示什麼（在本例中是一個帶有文字的 h1 標籤）。
換句話說，命令式程式設計就像給廚師一步一步的指示來製作披薩。宣告式程式設計就像訂購披薩而不關心製作披薩的步驟。🍕
React 是一個流行的宣告式函式庫，你可以用它來建構使用者介面。
React：一個宣告式 UI 函式庫
作為開發者，你可以告訴 React 你希望使用者介面發生什麼變化，React 會代表你找出如何更新 DOM 的步驟。
在下一節中，我們將探討如何開始使用 React。
其他資源：