DOM 概述
DOM (Document Object Model) 是瀏覽器將 HTML 文件解析為的樹狀結構，允許 JavaScript 動態存取和修改網頁內容、結構與樣式。
選取元素
// 單一元素
const el = document.querySelector('#app');
const el = document.getElementById('app');
// 多個元素
const els = document.querySelectorAll('.item');
const els = document.getElementsByClassName('item');
// 走訪 DOM 樹
const parent = el.parentElement;
const children = el.children;
const next = el.nextElementSibling;
修改元素
// 修改內容
el.textContent = '新內容';
el.innerHTML = '<strong>HTML</strong>';
// 修改屬性
el.setAttribute('data-id', '123');
// 修改類別
el.classList.add('active');
el.classList.remove('active');
el.classList.toggle('active');
// 修改樣式
el.style.color = 'red';
建立與插入元素
const newEl = document.createElement('div');
newEl.textContent = '新元素';
parent.appendChild(newEl);
parent.insertBefore(newEl, reference);
el.insertAdjacentHTML('beforeend', '<span>內容</span>');
el.remove();
事件處理
el.addEventListener('click', (event) => {
console.log('Clicked!', event.target);
});
// 事件委託
document.querySelector('.list').addEventListener('click', (e) => {
if (e.target.matches('.item')) {
console.log('Item clicked');
}
});