選擇元素(Selecting DOM Elements) | Javascript
在DOM（文檔對象模型）中選擇元素是 JavaScript 開發人員的基本技能。透過操作HTML元素，讓我們的網頁增加更多靈活的互動性。我們將介紹使用 JavaScript 選擇元素的不同方法。
元素選擇方法:
// 1. getElementById: 通過其唯一ID選擇元素。
const elementById = document.getElementById('myElementId');
// 2. getElementsByClassName: 根據類名選擇元素。
const elementsByClass = document.getElementsByClassName('myClassName');
// 3. getElementsByTagName: 根據HTML標籤名檢索元素。
const elementsByTag = document.getElementsByTagName('div');
// 4. querySelector: 使用CSS樣式選擇器選擇單個元素。
const singleElement = document.querySelector('#myElementId');
// 5. querySelectorAll: 選擇所有與CSS樣式選擇器匹配的元素。
const allElements = document.querySelectorAll('.myClassName');
示範代碼:
// 使用不同方法選擇元素
const elementById = document.getElementById('myElementId');
const elementsByClass = document.getElementsByClassName('myClassName');
const elementsByTag = document.getElementsByTagName('div');
const singleElement = document.querySelector('#myElementId');
const allElements = document.querySelectorAll('.myClassName');
// 操作選擇的元素
elementById.textContent = '通過ID選擇';
elementsByClass[0].style.color = 'red';
elementsByTag[1].classList.add('highlight');
singleElement.innerHTML = '<strong>修改的內容</strong>';
allElements.forEach(element => element.setAttribute('data-selected', true));
Tags