JS-8: DOM操作全解析

電資鼠

發佈於前端網頁程式設計入門

更新於 2025/03/03發佈於 2025/03/03閱讀時間約 1 分鐘

JavaScript 使用文件物件模型（DOM）與 HTML 進行互動。 DOM 是表示 HTML 的物件樹。您可以使用文件物件存取 HTML，該物件代表整個 HTML 文件。

HTML 文件中的標籤、文本、屬性都被解析成節點（Node），以層級結構表示：

節點類型

元素節點（Element Node）：如 <html>、<body> 等標籤。
文本節點（Text Node）：標籤內的純文本內容。
屬性節點（Attribute Node）：標籤的屬性，如 class="example"。
文檔節點（Document Node）：整個 HTML 文件的根節點。

HTML 文件中的標籤、文本、屬性都被解析成節點（Node），以層級結構表示：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Document
 └── <html>
      ├── <head>
      │    └── <title>
      │         └── "Example"
      └── <body>
           ├── <h1>
           │    └── "Hello World"
           └── <p>
                └── "This is a paragraph."

節點關係:

父節點（Parent Node）：直接包含子節點的節點。
子節點（Child Node）：直接被父節點包含的節點。
兄弟節點（Sibling Node）：共享同一父節點的節點。

接下來我將示範一些常見的操作 (示範都在vscode 中執行)。

為此，你需要在 vscode 中下載一個延伸模組，下圖所示:

接著，我們需要連結 JS 程式碼，將<script src="script.js"></script>放置於Body區塊的最後，如下所示。

  <script src="script.js"></script>
</body>

接著就可以開始實際操作了。若要進行測試，撰寫完所有程式碼後，右鍵點擊 HTML 程式碼，選擇 Open with Live Server ，接著按下 F12 ，在選項卡中選擇 Console 就可以進行測試囉。

document.getElementById()，根據ID獲取元素。並使用element.textContent 打印出內容

<h1 id="title">Hello, World!</h1>

const title = document.getElementById("title");
console.log(title.textContent); // "Hello, World!"

此時，你會看到Console 中輸出了你想要的內容。

document.getElementsByClassName()，根據Class獲取元素，用讀取陣列的方式使我們可以針對每一個項目去做文字的更改:

<p class="text">First Paragraph</p>
<p class="text">Second Paragraph</p>

const paragraphs = document.getElementsByClassName("text");
console.log(paragraphs[0].textContent); // "First Paragraph"
paragraphs[1].textContent = "Updated Second Paragraph";
console.log(paragraphs[1].textContent);  // "Updated Second Paragraph"

document.querySelector()，回傳文件第一個符合特定選擇器群體的元素

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<div>
  <p class="text">A paragraph</p>
</div>

const paragraph = document.querySelector(".text");
const listItem = document.querySelector("li");
console.log(paragraph.textContent); // "A paragraph"
console.log(listItem.textContent); // "Item 1"

document.querySelectorAll()，把所有符合特定選擇器群體的元素選取起來，並存放於一個陣列，用一些陣列的方法使我們可以針對每一個項目去做文字的更改:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

const listItems = document.querySelectorAll("li");
listItems.forEach((item, index) => {
  item.textContent = `Updated Item ${index + 1}`;
});

document.createElement()，用於創建標籤元素，接著使用appendChild()將標籤元素附加到某父節點內。

<div id="container"></div>

const container = document.getElementById("container");
const newElement = document.createElement("p");
newElement.textContent = "This is a new paragraph.";
container.appendChild(newElement);

element.innerHTML，允許讀取或寫入 HTML 結構，也就是說可以插入 HTML 標籤和文本內容，非常靈活，不過缺點是安全性較低。容易遭受 XSS攻擊 (一種網站應用程式的安全漏洞攻擊，是代碼注入的一種。它允許惡意使用者將程式碼注入到網頁上，其他使用者在觀看網頁時就會受到影響)。

<div id="content"></div>

const content = document.getElementById("content");
content.innerHTML = `<h1>Test</h1>
<p>This is added with innerHTML</p>`;

element.setAttribute()，為元素創建某個新屬性。

<input id="inputField" />

const inputField = document.getElementById("inputField");
inputField.setAttribute("placeholder", "Type here...");

element.removeAttribute()，移除元素的某個屬性

<input id="inputField" placeholder="Type here..." />

const inputField = document.getElementById("inputField");
inputField.removeAttribute("placeholder");

element.classList，透過這個物件可以動態的在節點的 class 屬性上操作。

<div id="box" class="blue"></div>

const box = document.getElementById("box");
box.classList.add("red"); //Add a new class (用來新增一個或多個 CSS 類別到元素中，如果該類別已經存在，不會重複添加。)
box.classList.remove("blue"); //Remove an existing class (用來移除一個或多個 CSS 類別，如果該類別不存在，則不會執行任何動作。)
box.classList.toggle("highlight"); //Toggle a class (如果該類別不存在，則新增該類別，如果該類別已經存在，則移除該類別。)

其中toggle可以傳入第二個參數 force（布林值）來強制決定新增或移除該類別。

const box = document.getElementById("box");
box.classList.toggle("highlight"); // 如果 "highlight" 存在就移除，否則新增
box.classList.toggle("highlight", true);  // 強制新增 "highlight"
box.classList.toggle("highlight", false); // 強制移除 "highlight"

remove()，移除元素，若是要隱藏則使用element.style.display = 'none';

<p id="toRemove">This will be removed</p>

const toRemove = document.getElementById("toRemove");
// toRemove.style.display = 'none';
toRemove.remove();

addEventListener()，可以偵測用戶在瀏覽網頁時的各種操作。像是點擊滑鼠、鍵盤輸入。而我們可以讓其執行一些函數功能。

<button id="clickMe">Click Me</button>

const button = document.getElementById("clickMe");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

好，目前你對於一些基本的DOM操作有了初步認識，不過有幾處細節需要特別留意。

element.innerText 和 element.textContent 的區別

innerText 取得的是被 CSS 調整過樣式後渲染的文字；textContent 則是實際取得節點中的文字內容。

<h1 style="text-transform: uppercase;">Hello world</h1>

const h1 = document.querySelector('h1');
console.log(h1.innerText);  // HELLO WORLD
console.log(h1.textContent);  // Hello world

第2個例子:

<h1>Hello world<span style="display: none;">Hidden Text</span></h1>

const h1 = document.querySelector('h1');
console.log(h1.innerText);  // Hello world
console.log(h1.textContent);  // Hello worldHidden Text

第3個例子:

<h1>Hello <br />world</h1>

const h1 = document.querySelector('h1');
console.log(h1.innerText);
// 輸出
Hello
world

console.log(h1.textContent);  // Hello world

innerText 回傳的會是換行的結果；textContent 則會忽略掉它。

addEventListener()的其他事件類型:

keyup示範

<h2>文字欄監測範例</h2>
<label for="textInput">請輸入文字：</label>
<input type="text" id="textInput" placeholder="開始輸入文字...">

// 取得輸入框元素
const textInput = document.getElementById("textInput");

// 監聽 keyup 事件，偵測按下按鍵後放開的行為，並觸發後面的函數。
// 而用戶動作的所有相關資訊，將其打包為event這個參數並傳到函數內
textInput.addEventListener("keyup", (event) => {
  // 將用戶按下的鍵名打印到主控台
  console.log("目前按下的內容：", event.key);
  // 將目前文字欄內的所有值打印到主控台
  console.log("輸入的內容：", event.target.value); // event.target 會指向觸發該事件的 <input> 元素，也就是文字欄。
});

有了上面的觀念，你也可以開始撰寫一些程式碼的判斷並執行相應的動作，例如:

const textInput = document.getElementById("textInput");

textInput.addEventListener("keyup", (event) => {
	if(event.key === "Enter") {
	  console.log("文字欄內容：", textInput.value);
    }
});

addEventListener() 支援許多事件類型，沒有辦法一一示範，不過最基本的觀念掌握好，之後遇到其他事件的處理也都可以快速掌握並使用。

節點類型

電資鼠 - 您的學習好夥伴前端網頁程式設計入門前端三劍客

電資鼠 - 您的學習好夥伴

3會員

33內容數

在當今數位時代，電資領域人才需求爆發式成長，不論是前端網頁設計、嵌入式開發、人工智慧、物聯網還是軟硬體整合，這些技術都在改變世界。而掌握 C/C++、Python、數位邏輯、電路學與嵌入式開發等大學電資領域的課程，正是進入這個高薪、高需求產業的關鍵！

留言

留言分享你的想法！

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

‌

‌
‌

電資鼠 - 您的學習好夥伴的其他內容

JS-7: 高階與回呼函數全解析

本章將深入探討 JS中高階函式 (Higher-Order Functions) 與回呼函式 (Callback Functions)，這是函數式程式設計的核心概念。透過學習高階函式的應用，如 map()、filter()等，以及回呼函式的使用，你將能夠寫出更簡潔、可讀性更高且可重複使用的程式碼。

#Javascript #程式 #教學

JS-6: 物件全解析

物件是一種鍵值對(Key-Value Pair)的數據結構。用於儲存和組織複雜的資料。本章節不廢話的帶你嘗試各種物件的操作，透過本章的學習，你將能夠掌握 JavaScript 物件操作技巧，並為後續學習物件導向程式設計、API 資料處理與前端框架(如 React)打下堅實基礎！

#Javascript #程式 #教學

JS-5: 陣列全解析

本章將深入探討 JavaScript 陣列 (Arrays)，這是一種用來儲存多筆相關數據的結構，比起個別宣告變數，更適合用於大量數據處理與運算。我們將學習如何建立、遍歷陣列與各種操作，並透過實作範例來熟悉陣列方法 (Array Methods)，讓數據處理更加靈活高效。

#Javascript #程式 #教學

JS-4: 函數全解析

函數是可重複使用的程式碼區塊，用於執行特定任務或計算，你可以將它視為機器，它可以接受一些變數作為參數，並對其進行一些操作，接著產生輸出。本章節帶你快速熟悉這個 JavaScript 最核心的概念之一，為更進階的觀念打好基礎。

#Javascript #程式 #教學

JS-3: 流程控制全解析

本章節帶你非常快速地了解條件控制、switch語句、迴圈控制，這些都是程式碼的核心概念。

#Javascript #程式 #教學

JS-2: 運算符、數字方法、數學物件全解析

這篇文章鉅細靡遺地介紹 JavaScript 中數字的各種特性和操作，涵蓋了基本運算符、類型轉換、位元運算、內建的數字方法和 Math 物件的常用函式等。文中包含多個程式碼範例幫助理解每個片段知識，有助於讀者完全理解和掌握這些JavaScript 的重要基石。

本章節帶你非常快速地了解條件控制、switch語句、迴圈控制，這些都是程式碼的核心概念。

#Javascript #程式 #教學

JS-2: 運算符、數字方法、數學物件全解析

你可能也想看

HTML入門-Day1：語言介紹、應用領域、誰在使用

在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。

#HTML

Amber hh的沙龍

2024/08/03

學習紀錄 | JSDoc 是什麼？怎麼寫？

JSDoc 全名是 JavaScript Documentation，顧名思義是為 JavaScript 所使用的 API 文件，在程式碼內透過註解的方式撰寫，運行後 JSDoc 會自動掃描註解內容，並生成一份網頁版的文件，對於沒有使用 Typescript 開發的專案，也

#JSDoc #前端

Michael楊

2024/06/02

Javascript入門-Day8：物件導向

本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用，建構子的作用，以及公開，私有，受保護(Protected)等不同訪問修飾符的概念。此外，還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。

Michael楊

2024/05/29

Javascript入門-Day4：資料型別

這些章節的目的是為了介紹JavaScript中的各種數據類型，包括基礎類型和物件類型，以及如何將數據從一種類型轉換為另一種類型。此外，還介紹了如何創建自定義類型，以及如何使用JavaScript中的陣列、集合和字典。

#Javascript

Michael楊

2024/05/26

Javascript入門-Day1：語言介紹、觸及的領域、誰在使用

JavaScript是一種具有動態型別、弱型別、原型繼承等特性的高級腳本語言，應用範圍廣泛，包括前端開發、後端開發、移動應用等。它被各種公司和開源社區廣泛使用。學習JavaScript需要掌握ECMAScript標準、異步編程、模塊系統等知識。

※ 查找 DOM 元素有兩種途徑：直接選出一個節點 (select)：要在樹狀結構裡查找資料，至少要先選出第一個元素。從一個特定節點，查找到週邊的節點：選出一個元素後，就可以順著結構找出父元素、子元素、甚至同一層的兄弟元素，這種行為稱為「遍歷 (traverse)」。 ※ 選出特定 D

奧莉薇走在成為後端工程師之路上

2024/05/05

※ 認識DOM(二)

※ Javascript和HTML的關係當我們輸入新的網址或按下重新整理時，從解析檔案到畫面顯示出來，瀏覽器會進行以下流程：解析 HTML / CSS 檔案，建立物件模型： HTML → DOM (Document Object Model)。 CSS → CSSOM (CSS Obje

奧莉薇走在成為後端工程師之路上

2024/05/05

※ 認識DOM(一)

※ DOM是什麼？ DOM 全名為 Document Object Model 中文翻譯為文件物件模型，就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構。就 Document Object Model 這個名字來說，其中 documen

奧莉薇走在成為後端工程師之路上

2024/04/30

認識 JavaScript (十四)

※ 函式基礎介紹： ※ JavaScript 特殊的函式特性：函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法： ※ 調用 (invoke) 函式： "調用" 意指呼叫或執行

奧莉薇走在成為後端工程師之路上

2024/04/19

認識 JavaScript (七)

※ 常用Object(物件)型態的方法：拿到object裡面某個key的value(值)：拿到所有屬性： ※ 存取物件屬性：點記法與括號記法使用點記法 (dot notation) 或括號記法 (bracket notation) 來存取物件的值，以下兩種寫法的結果是一樣的： //

Michael楊

2024/08/13

HTML入門-Day1：語言介紹、應用領域、誰在使用

#HTML

Amber hh的沙龍

2024/08/03

學習紀錄 | JSDoc 是什麼？怎麼寫？

#JSDoc #前端

Michael楊

2024/06/02

Javascript入門-Day8：物件導向

Michael楊

2024/05/29

Javascript入門-Day4：資料型別

#Javascript

Michael楊

2024/05/26

Javascript入門-Day1：語言介紹、觸及的領域、誰在使用