DOM操作學習1

1. DOM的概念

DOM（Document Object Model）是瀏覽器中把HTML或XML文件結構化為樹狀結構的API，它使開發者能夠通過JavaScript來動態操作網頁內容、結構和樣式。DOM將網頁中的每個元素（如標籤、屬性、文本內容等）作為一個對象來表示，這些對象可以被查詢、修改、刪除或添加。

DOM的主要組成部分：

• Document：整個HTML文檔的頂級對象，表示網頁本身。
• Element：HTML標籤對應的元素對象（如< div>, < p>,< img>）。
• Attribute：元素上的屬性（如class, id等）。
• Node：DOM中的每個對象都稱為一個節點，節點可以是元素節點、文本節點或屬性節點等。

2. DOM選擇器

在操作DOM之前，首先需要選擇我們想要操作的元素。JavaScript提供了幾種常用的方法來選擇DOM元素：

2.1 getElementById

選擇擁有特定id的元素。由於id在一個頁面中是唯一的，因此該方法返回單一元素。

let header = document.getElementById('header');
console.log(header.textContent);  // 取得元素的文本內容

2.2 getElementsByClassName

選擇擁有特定class`的所有元素，返回一個HTMLCollection（類數組），需要通過索引訪問具體元素。

let items = document.getElementsByClassName('item');
console.log(items[0].textContent);  // 訪問第一個元素

2.3 getElementsByTagName

選擇頁面上所有指定標籤名的元素，返回一個HTMLCollection。

let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs[0].textContent);  // 訪問第一個段落元素

2.4 querySelector 和 querySelectorAll

• querySelector：使用CSS選擇器語法，返回匹配的第一個元素。
• querySelectorAll：返回所有匹配的元素，返回值是NodeList，可以使用forEach()來遍歷。

let firstItem = document.querySelector('.item');  // 第一個匹配的class為item的元素
let allItems = document.querySelectorAll('.item');  // 所有匹配的class為item的元素
allItems.forEach(item => console.log(item.textContent));  // 遍歷所有元素

3. DOM內容操作

3.1 修改文本內容

可以使用textContent或innerHTML來修改元素的文本或HTML內容。

• textContent：修改元素內部的純文本內容，不會解析HTML。
• innerHTML：能夠解析並插入HTML標籤，但應謹慎使用，避免XSS攻擊。

let heading = document.getElementById('header');
heading.textContent = '新的標題';  // 修改純文本
heading.innerHTML = '<strong>加粗的標題</strong>';  // 插入HTML

3.2 修改屬性

可以使用getAttribute()和setAttribute()來讀取或修改HTML元素的屬性，也可以直接通過點語法來操作常見屬性（如id、class、src等）。

let image = document.querySelector('img');
image.setAttribute('src', 'new-image.jpg');  // 修改圖片的src屬性
console.log(image.getAttribute('src'));  // 讀取src屬性

3.3 修改樣式

可以使用style屬性直接修改內聯樣式。注意，CSS屬性在JavaScript中使用駝峰式命名（如background-color變為backgroundColor）。

let box = document.querySelector('.box');
box.style.backgroundColor = 'blue';  // 修改背景顏色
box.style.width = '200px';  // 修改寬度