Cẩm nang nhanh — HTML, CSS, JavaScript

document.getElementById('id')              // Một phần tử theo id
document.querySelector('.class')           // Phần tử đầu tiên theo CSS selector
document.querySelectorAll('div.card')      // Tất cả phần tử theo CSS selector
document.createElement('div')             // Tạo phần tử mới
element.closest('.parent')                // Tìm ancestor gần nhất khớp selector

el.textContent = 'text'                   // Nội dung text (an toàn, không render HTML)
el.innerHTML   = '<b>html</b>'            // Nội dung HTML (cẩn thận XSS)
el.classList.add('active')               // Thêm class
el.classList.remove('active')            // Xoá class
el.classList.toggle('dark')              // Thêm/xoá class
el.classList.contains('btn')            // Kiểm tra có class không
el.setAttribute('href', '/url')         // Set thuộc tính
el.getAttribute('href')                  // Lấy thuộc tính
el.style.color = 'red'                   // Style inline
parent.appendChild(child)               // Thêm phần tử con cuối
parent.removeChild(child)               // Xoá phần tử con
el.remove()                             // Xoá phần tử khỏi DOM

el.addEventListener('click', function(event) {
  event.preventDefault()                 // Ngăn hành vi mặc định (a, form)
  event.stopPropagation()               // Ngăn bubble lên parent
  console.log(event.target)             // Phần tử được click
  console.log(event.currentTarget)      // Phần tử gắn listener
})
el.removeEventListener('click', handler)

// Các sự kiện phổ biến:
// click, dblclick, mouseenter, mouseleave, mouseover
// keydown, keyup, keypress
// input, change, submit, focus, blur
// scroll, resize (window)
// DOMContentLoaded, load (window)

// GET
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))

// POST (async/await)
async function postData(url, payload) {
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

localStorage.setItem('key', JSON.stringify(value))    // Lưu vĩnh viễn
localStorage.getItem('key')                            // Lấy (string)
JSON.parse(localStorage.getItem('key'))               // Lấy object
localStorage.removeItem('key')                        // Xoá
localStorage.clear()                                   // Xoá tất cả

// sessionStorage: tương tự nhưng chỉ tồn tại trong phiên trình duyệt

// Destructuring
const { name, age = 0 } = person
const [first, ...rest]   = array

// Spread
const merged = { ...obj1, ...obj2 }
const copy   = [...arr1, ...arr2]

// Template literal
const msg = `Xin chào ${name}, bạn ${age} tuổi`

// Arrow function
const double = x => x * 2
const add    = (a, b) => a + b

// Optional chaining
const city = user?.address?.city     // undefined nếu thiếu

// Nullish coalescing
const name = user.name ?? 'Ẩn danh' // 'Ẩn danh' nếu null/undefined

// Array methods
arr.map(x => x * 2)                  // Biến đổi từng phần tử → mảng mới
arr.filter(x => x > 0)               // Lọc → mảng mới
arr.reduce((sum, x) => sum + x, 0)  // Gộp thành một giá trị
arr.find(x => x.id === 1)            // Phần tử đầu tiên khớp
arr.findIndex(x => x.id === 1)       // Index phần tử đầu tiên khớp
arr.some(x => x > 0)                 // true nếu có ít nhất 1 khớp
arr.every(x => x > 0)                // true nếu tất cả khớp
arr.includes(value)                  // true nếu có chứa value
arr.flat()                           // Làm phẳng 1 cấp
arr.flatMap(fn)                      // map() + flat(1)