JavaScript - DOM 方法

歡迎，有抱負的程式設計師們！今天，我們將要深入探索JavaScript和文件對象模型（DOM）的精彩世界。作為你們親切鄰居的電腦老師，我在這裡指引你們開展這次旅程，並提供大量的範例和解釋。所以，拿起你們最喜歡的飲料，舒適地坐好，讓我們開始我們的冒險吧！

DOM是什麼？

在我們進入方法之前，讓我們快速了解DOM是什麼。想像一個網頁就像是一個家族樹。DOM就像那個家族樹，代表著你的HTML文件的結構。它允許JavaScript與網頁的內容、結構和樣式進行交互和操作。

現在，讓我們探索一些強大的DOM方法，這些方法將幫助你成為一名JavaScript大師！

JavaScript document.getElementById() 方法

getElementById() 方法就像是你HTML文件中的尋寶者。它尋找具有特定ID的元素並將其帶回給你。讓我們看看它是如何工作的：

<div id="myAwesomeDiv">Hello, I'm an awesome div!</div>

<script>
let myDiv = document.getElementById("myAwesomeDiv");
console.log(myDiv.innerHTML);
</script>

在這個範例中，我們告訴JavaScript："嘿，找到具有ID 'myAwesomeDiv' 的元素並將其存儲在變量 'myDiv' 中。" 然後，我們將其內容打印到控制台。

當你運行這段代碼時，你會在控制台看到 "Hello, I'm an awesome div!"。這就像魔法，但更好，因為你懂得它是如何工作的！

實用範例：更改內容

讓我們讓事物更具交互性：

<h1 id="greeting">Hello, World!</h1>
<button onclick="changeGreeting()">更改問候語</button>

<script>
function changeGreeting() {
let greetingElement = document.getElementById("greeting");
greetingElement.innerHTML = "Hello, JavaScript Ninja!";
}
</script>

在這裡，我們有一個按鈕，當點擊時，會更改我們h1元素的文本。這就像只用幾行代碼就給你的網頁來個個性改造！

JavaScript document.addEventListener() 方法

現在，讓我們來谈谈 addEventListener()。這個方法就像為你的元素設置安全攝像頭。它觀察特定的事件，當那個事件發生時，它會做某件事。

<button id="myButton">點我！</button>

<script>
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("按鈕被點擊！你真是太棒了！");
});
</script>

在這個範例中，我們告訴我們的按鈕："嘿，當有人點擊你時，顯示這個消息。" 這就像教你的網頁如何响應用戶操作！

實用範例：切換暗色模式

讓我們創建一個簡單的暗色模式切換：

<button id="darkModeToggle">切換暗色模式</button>

<script>
let darkModeToggle = document.getElementById("darkModeToggle");
darkModeToggle.addEventListener("click", function() {
document.body.style.backgroundColor = document.body.style.backgroundColor === "black" ? "white" : "black";
document.body.style.color = document.body.style.color === "white" ? "black" : "white";
});
</script>

這段代碼會聆聽我們按鈕的點擊事件，並切換整個頁面的背景和文字顏色。這就像給你的用戶一個個人化的網站光源開關！

JavaScript document.write() 方法

document.write() 方法就像是你對HTML文件的直線。它允許你直接寫入你的HTML輸出。然而，請謹慎使用！在頁面加載後使用此方法將覆蓋所有現有內容。

<script>
document.write("<h2>Hello from JavaScript!</h2>");
</script>

這將在你的頁面上添加一個新的h2元素，文本為 "Hello from JavaScript!"。這就像有一支神奇的筆可以直接在你的網頁上寫字！

實用範例：動態內容生成

讓我們創建一個基於用戶輸入生成列表的簡單範例：

<input type="number" id="listLength" placeholder="Enter list length">
<button onclick="generateList()">Generate List</button>

<script>
function generateList() {
let length = document.getElementById("listLength").value;
document.write("<ul>");
for (let i = 1; i <= length; i++) {
document.write("<li>Item " + i + "</li>");
}
document.write("</ul>");
}
</script>

這個腚本會根據用戶輸入的數字生成一個無序列表。記住，這將覆蓋你的整個頁面內容，所以請謹慎使用！

DOM方法列表

還有許多DOM方法可以探索。這裡是常用的一些方法的表格：

方法	描述
getElementById()	返回具有指定ID的元素
getElementsByClassName()	返回具有指定類名的元素集合
getElementsByTagName()	返回具有指定標籤名的元素集合
querySelector()	返回匹配CSS選擇器的第一個元素
querySelectorAll()	返回匹配CSS選擇器的所有元素
createElement()	創建一個新的元素節點
appendChild()	將一個新子節點添加到元素的最后一個子節點
removeChild()	從元素中刪除一個子節點
replaceChild()	在元素中替換一個子節點
setAttribute()	設置或更改指定的屬性，為指定的值

這些方法每一個都為操作你的網頁打開了新的可能性。這就像有一把網頁開發的瑞士軍刀！

總結來說，DOM方法是強大的工具，它們允許你與網頁進行交互和動態操作。它們是使網站交互和響應的秘訣。隨著你繼續在網頁開發的道路上前行，你會越來越多地使用這些方法。

記住，熟能生巧。嘗試使用這些方法，與它們進行實驗，並不要害怕犯錯誤。這是我們所有人學習和成長為開發者的方式。祝你好運，未來的JavaScript忍者！

Credits: Image by storyset