讓我們看看如何通過在項目中添加 h1 標籤來使用 JavaScript 和 DOM 方法。
打開您的程式碼編輯器並建立一個新的 index.html 文件。 在 HTML 文件中，添加以下程式碼：
<!-- index.html -->
<html>
<body>
<div></div>
</body>
</html>然後給 div 一個唯一的 id，以便您以後可以定位它。
<!-- index.html -->
<html>
<body>
<div id="app"></div>
</body>
</html>要在 HTML 文件中編寫 JavaScript，請添加 script 標記：
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript"></script>
</body>
</html>現在，在 script 標籤中，您可以使用 DOM 方法 getElementById() 通過其 id 選擇 <div> 元素：
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>你可以繼續使用 DOM 方法來創建一個新的 h1元素：
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// Select the div element with 'app' id
const app = document.getElementById('app');
// Create a new H1 element
const header = document.createElement('h1');
// Create a new text node for the H1 element
const headerContent = document.createTextNode(
'Develop. Preview. Ship. 🚀',
);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
</script>
</body>
</html>為確保一切正常，請在您選擇的瀏覽器中打開您的 HTML 文件。 您應該會看到一個 h1 標籤，上面寫著 ‘Develop. Preview. Ship. 🚀’。
如果您查看瀏覽器開發人員工具中的 DOM 元素，您會注意到 DOM 包含 h1 元素。 頁面的 DOM 與原始碼不同 – 換句話說，與您建立的原始 HTML 文件不同。
這是因為 HTML 代表初始頁面內容，而 DOM 代表由您編寫的 JavaScript 程式碼更改的更新頁面內容。
使用純 JavaScript 更新 DOM 非常強大，但很冗長。 您已經編寫了這些程式碼來添加帶有一些文本的 h1
<!-- index.html -->
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
header.appendChild(headerContent);
app.appendChild(header);
</script>隨著應用程式或團隊規模的擴大，以這種方式構建應用程序變得越來越具有挑戰性。
使用這種方法，開發人員會花費大量時間編寫指令來告訴計算機它應該如何做事。 但是，描述您想要顯示的內容並讓計算機弄清楚如何更新 DOM 不是很好嗎？
（Imperative vs Declarative Programming）
上面的程式碼是命令式編程的一個很好的例子。 您正在編寫如何更新用戶界面的步驟。 但是在建構用戶介面時，通常首選聲明性方法，因為它可以加快開發過程。 如果開發人員能夠聲明他們想要顯示的內容（在本例中是帶有一些文本的 h1 標籤），那麼不必編寫 DOM 方法，這將很有幫助。
換句話說，命令式編程就像給廚師一步一步地指導如何製作披薩。 聲明式編程就像訂購披薩而不關心製作披薩所需的步驟。 🍕
而 React 是幫助開發人員建構用戶介面的流行聲明式編程庫其中之一。
作為開發人員，您可以告訴 React 您希望用戶介面發生什麼，React 將代表您計算出如何更新 DOM 的步驟。
在下一節中，我們將探討如何開始使用 React。
© Copyrights 從想像到創造. All Rights Reserved.
