JavaScriptKhác nhau ở cách chọn, kiểu trả về, và có cập nhật theo DOM hay không.
javascript
document.getElementById('main') // 1 element hoặc null — chỉ theo id
document.querySelector('.card .title') // element ĐẦU TIÊN khớp CSS selector
document.querySelectorAll('.card') // NodeList — TĨNH
document.getElementsByClassName('card') // HTMLCollection — SỐNG
document.getElementsByTagName('div') // HTMLCollection — SỐNG| Trả về | Sống / tĩnh | Duyệt bằng forEach | |
|---|---|---|---|
getElementById | Element hoặc null | — | — |
querySelector | Element hoặc null | — | — |
querySelectorAll | NodeList | tĩnh | được |
getElementsBy* | HTMLCollection | sống | không (phải Array.from) |
"Sống" nghĩa là danh sách tự cập nhật khi DOM đổi — đây là nguyên nhân của một bug hay gặp:
javascript
const divs = document.getElementsByTagName('div') // sống
for (let i = 0; i < divs.length; i++) {
divs[i].remove() // xoá một cái là length giảm → BỎ SÓT một nửa
}
const all = document.querySelectorAll('div') // tĩnh
all.forEach((d) => d.remove()) // đúngVề hiệu năng: getElementById nhanh nhất vì browser có bảng tra id riêng, nhưng chênh lệch chỉ đáng kể khi gọi hàng nghìn lần trong vòng lặp — trong code ứng dụng bình thường không phải yếu tố cần cân nhắc.
Chốt: mặc định dùng querySelector/querySelectorAll vì selector linh hoạt và kết quả tĩnh dễ đoán. Chỉ chọn getElementsBy* khi thật sự cần danh sách tự cập nhật.