JavaScript與DOM (1)

2024 iThome 鐵人賽

DAY 22

JavaScript

入門JavaScript系列第 22 篇

16th鐵人賽

mlin_1229

2024-10-05 18:15:18

51 瀏覽

分享至

JavaScript 與 DOM (Document Object Model) 是 Web 開發的核心，允許開發者透過 JavaScript 動態操作 HTML 文件的內容和結構，從而創建互動性強的網頁應用。DOM 是瀏覽器提供的一個 API，JavaScript 可以藉由操作 DOM 來改變頁面的外觀、增加互動功能以及管理事件。

DOM 簡介

DOM (文件物件模型) 是瀏覽器把 HTML 或 XML 文件轉換為一棵由節點（nodes）構成的樹狀結構，這棵樹稱為 DOM 樹。每個節點對應一個 HTML 元素、屬性或文字。JavaScript 可以存取、修改這棵樹上的各個節點，進而影響整個網頁。

簡單 DOM 結構

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

對應的 DOM 樹：

document 節點代表整個 HTML 文件。
html 節點是根節點，包含了 head 和 body 節點。
h1 和 p 元素分別是 body 的子節點。

操作 DOM 的核心 API

document 物件
document 代表整個 DOM，是進入 DOM 操作的入口。通過 document 可以訪問、查詢、修改頁面的元素。

主要的 DOM 查詢方法：

document.getElementById(id): 根據 ID 查找元素。

const heading = document.getElementById('heading');
console.log(heading);  // <h1 id="heading">Hello World</h1>

document.getElementsByClassName(className): 根據 class 查找元素。

const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs);  // HTMLCollection of elements with class "text"

document.getElementsByTagName(tagName): 根據標籤名查找元素。

const allDivs = document.getElementsByTagName('div');
console.log(allDivs);  // HTMLCollection of all <div> elements

document.querySelector(selector): 使用 CSS 選擇器查找第一個符合條件的元素。

const firstParagraph = document.querySelector('p');
console.log(firstParagraph);  // <p>This is a simple paragraph.</p>

document.querySelectorAll(selector): 使用 CSS 選擇器查找所有符合條件的元素。

const allParagraphs = document.querySelectorAll('p');
console.log(allParagraphs);  // NodeList of all <p> elements

修改 DOM 元素
查詢到 DOM 元素後，可以使用 JavaScript 來修改這些元素的內容、屬性、樣式等。

修改元素內容：

修改 innerHTML: 改變元素的 HTML 內容。

const heading = document.getElementById('heading');
heading.innerHTML = 'New Heading';  // 修改 <h1> 標題內容

修改 textContent: 改變元素的純文字內容。

const paragraph = document.querySelector('p');
paragraph.textContent = 'This is new text';  // 修改段落中的純文字

修改屬性：

修改 setAttribute() 和 getAttribute()**: 可以動態修改或獲取元素屬性。

const img = document.querySelector('img');
img.setAttribute('src', 'new-image.jpg');  // 修改圖片的 src 屬性
const altText = img.getAttribute('alt');  // 獲取圖片的 alt 屬性

修改樣式：

修改 style 屬性: 可以通過 JavaScript 動態修改元素的樣式。

const div = document.querySelector('div');
div.style.backgroundColor = 'blue';  // 修改背景顏色
div.style.fontSize = '20px';  // 修改字體大小

新增與移除元素
JavaScript 可以新增、移除、複製 DOM 節點，這對於動態內容生成非常有用。

新增元素：

document.createElement(): 創建新元素。

const newDiv = document.createElement('div');  // 創建一個新的 div 元素
newDiv.textContent = 'This is a new div';  // 新增內容
document.body.appendChild(newDiv);  // 將這個新元素添加到 body 中

移除元素：

removeChild(): 移除某個子節點。

const parentElement = document.getElementById('container');
const childElement = document.getElementById('child');
parentElement.removeChild(childElement);  // 從 container 中移除 child

element.remove(): 直接移除元素本身。

const element = document.querySelector('p');
element.remove();  // 直接移除該段落元素

事件處理
JavaScript 允許開發者通過監聽事件來增加網頁的互動性。常見的事件包括點擊、鍵盤輸入、滑鼠移動等。

事件處理範例：

addEventListener(): 用來為元素綁定事件監聽器。

const button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

事件對象 (event): 在事件處理函數中，可以獲得 event 物件來查看觸發事件的詳細資訊。

document.addEventListener('click', function(event) {
  console.log('Clicked element:', event.target);  // 顯示被點擊的元素
});

DOM 節點的類型
在 DOM 中，節點分為幾種類型：
- 元素節點（Element Node）: 例如 <div>、<p> 等 HTML 標籤。
- 屬性節點（Attribute Node）: 元素的屬性如 id、class 等。
- 文字節點（Text Node）: 包含文字的節點。
- 文件節點（Document Node）: 整個 HTML 文件。

例子：動態表單生成

以下是一個簡單的例子，展示如何通過 JavaScript 操作 DOM 來動態生成一個表單。

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Form</title>
</head>
<body>
  <button id="addInput">Add Input</button>
  <form id="myForm">
    <input type="submit" value="Submit">
  </form>

  <script>
    const addButton = document.getElementById('addInput');
    const form = document.getElementById('myForm');

    addButton.addEventListener('click', function() {
      const newInput = document.createElement('input');
      newInput.type = 'text';
      newInput.placeholder = 'Enter text';
      form.insertBefore(newInput, form.querySelector('input[type="submit"]'));  // 在提交按鈕之前插入
    });
  </script>
</body>
</html>

在這個例子中，當點擊按鈕時，會在表單中動態新增一個文字輸入框。