【掌握HTML DOM，輕鬆修改元素值】技巧揭秘與實戰案例

引言

HTML DOM 是網頁開辟中弗成或缺的一部分，它容許開辟者經由過程 JavaScript 操縱 HTML 文檔中的元素。控制 HTML DOM 的操縱技能，可能輕鬆實現對網頁元素的修改，從而晉升開辟效力跟網頁的交互性。本文將深刻探究 HTML DOM 的操縱方法，並供給實戰案例，幫助讀者疾速控制相幹技能。

HTML DOM 基本

什麼是 HTML DOM？

HTML DOM（文檔東西模型）是一種將 HTML 文檔表示為樹形構造的模型。在 DOM 中，每個 HTML 元素跟屬性都被視為節點，這些節點可能經由過程 JavaScript 停止操縱。

常用 DOM 節點

• 元素節點：代表 HTML 元素，如 <div>、<p> 等。
• 屬性節點：代表 HTML 元素的屬性，如 id、class 等。
• 文本節點：代表 HTML 元素中的文本內容。

修改元素值技能

1. 利用 getElementById() 查找元素

var element = document.getElementById("id");

2. 修改元素內容

利用 textContent 屬性

element.textContent = "新內容";

利用 innerHTML 屬性

element.innerHTML = "<strong>新內容</strong>";

3. 修改元素屬性

利用 setAttribute() 方法

element.setAttribute("屬性名", "屬性值");

4. 修改元素款式

利用 style 屬性

element.style.color = "red";

實戰案例

案例一：靜態變動文本內容

HTML

<p id="text">這是一個段落。</p>
<button onclick="changeText()">變動文本</button>

JavaScript

function changeText() {
  var textElement = document.getElementById("text");
  textElement.textContent = "文本已被變動！";
}

案例二：切換按鈕款式

HTML

<button id="button" onclick="toggleStyle()">切換款式</button>

JavaScript

function toggleStyle() {
  var button = document.getElementById("button");
  if (button.style.backgroundColor === "blue") {
    button.style.backgroundColor = "";
  } else {
    button.style.backgroundColor = "blue";
  }
}

總結

經由過程本文的進修，信賴讀者曾經控制了 HTML DOM 的基本操縱技能。在現實開辟中，機動應用這些技能，可能輕鬆實現對網頁元素的修改，晉升開辟效力跟用戶休會。盼望本文對妳的進修有所幫助。