JavaScript - DOM 文件：初學者指南

您好，有志於成為程序員的人們！今天，我們將踏上一段令人興奮的旅程，探索 JavaScript 和文件對象模型（DOM）的世界。別擔心這些術語聽起來有點令人生畏 - 在這個教學結束時，你將能像專業人士一樣操作網頁！

JavaScript - DOM Document

HTML DOM 文件是什麼？

想像你正在蓋房子。房子的設計圖就像你的 HTML 文件，而你在瀏覽器中看到的就是房子的實際樣子。現在，如果你想在房子蓋好後改變牆壁的顏色或新增一扇窗戶，那麼 DOM 就派上用場了！

HTML DOM（文件對象模型）是 HTML 文件的編程接口。它將文件的結構表示為樹狀層次結構，其中每個節點都是代表文件一部分的對象。

這棵樹的根是 document 對象。它就像我們房子的基礎 - 所有其他部分都是建立在它之上的。

讓我們從一個簡單的例子開始：

<!DOCTYPE html>
<html>
<head>
<title>我的第一個 DOM 頁面</title>
</head>
<body>
<h1>歡迎來到 DOM！</h1>
<p>這是一段文字。</p>
</body>
</html>

在這個 HTML 結構中，document 位於頂端，然後是 html，接著是 head 和 body，以此類推。

既然我們了解了 DOM 是什麼，讓我們學習如何讀取它。在 JavaScript 中，我們可以使用 document 關鍵字輕鬆地讀取文件對象。

以下是一個簡單的例子：

console.log(document);

如果你在瀏覽器的控制台中運行這段代碼，你會看到整個文件對象。這就像從鳥瞰的角度看我們的房子！

文件對象有許多屬性，讓我們訪問 HTML 文件的不同部分。讓我們探討一些這些屬性：

childElementCount 屬性返回元素有的子元素數量。對於文件對象，它返回 <html> 元素的直接子元素數量。

console.log(document.childElementCount);

這通常會返回 1，因為 <html> 元素通常只有一個直接子元素：<body> 元素。

links 屬性返回文件中所有帶有 href 屬性的 <a> 和 <area> 元素的集合。

console.log(document.links);

這就像在問："我們的房子有多少扇門（鏈接）？"

title 屬性獲取或設置當前文件的標題。

console.log(document.title);
document.title = "我的新標題";

這就像更改你房子的名牌！

讓我們通過一些真實世界的範例來將我們的知識付諸實踐：

document.title = "歡迎來到 " + document.title;
console.log("新的標題是： " + document.title);

這段腚本將 "歡迎來到 " 加到當前頁面標題的開頭。這就像在你房子的名牌上加上一個友好的問候！

let linkCount = document.links.length;
console.log("這個頁面有 " + linkCount + " 個鏈接。");

這段腚本計算你頁面上有多少個鏈接。這就像計算有多少種方式可以離開你的房子！

let newHeading = document.createElement("h2");
newHeading.textContent = "這個標題是由 JavaScript 添加的！";
document.body.appendChild(newHeading);

這段腚本創建一個新的 <h2> 元素，設置其文字內容，並將其添加到 <body> 的末尾。這就像用 JavaScript 在你的房子中添加一個新房間！

以下是一些常見的 DOM 文件方法：

方法	描述
`document.getElementById(id)`	返回指定 ID 的元素
`document.getElementsByClassName(name)`	返回指定類名的元素集合
`document.getElementsByTagName(name)`	返回指定標籤名的元素集合
`document.createElement(name)`	創建一個元素節點
`document.createTextNode(text)`	創建一個文本節點
`document.querySelector(selector)`	返回第一個匹配 CSS 選擇器的元素
`document.querySelectorAll(selector)`	返回所有匹配 CSS 選擇器的元素

恭喜你！你已經邁出了使用 JavaScript 操作 DOM 世界的第一步。記住，DOM 是你構建動態、互動網頁的工具包。它就像一根可以隨意更改網頁任何部分的魔法棒！

在你繼續旅程的過程中，你會發現使用 DOM 的更多令人興奮的方式。繼續練習，保持好奇心，並不怕嘗試。在你意識到之前，你將會構建出隨著你的 JavaScript 节奏跳舞的網頁！

祝你好運，未來的網頁魔法師！

Credits: Image by storyset