1. Quản lý thuộc tính và Class
Thay vì thao tác chuỗi thô sơ, Element cung cấp những công cụ rất hiện đại:
- `classList`: Trả về một đối tượng chứa danh sách class. Bạn có thể dùng `.add()`, `.remove()`, `.toggle()` (bật/tắt) và `.contains()` (kiểm tra tồn tại).
- `id` / `className`: Lấy hoặc đặt trực tiếp ID và chuỗi Class.
- `getAttribute(name)` / `setAttribute(name, value)`: Làm việc với bất kỳ thuộc tính nào (kể cả thuộc tính tự tạo `data-*`).
- `hasAttribute(name)`: Kiểm tra phần tử có thuộc tính đó không.
—
2. Kích thước và Vị trí (Layout)
Đây là nhóm thuộc tính cực kỳ hữu ích khi bạn làm các hiệu ứng hoạt họa (Animation) hoặc Scroll:
- `clientHeight` / `clientWidth`: Kích thước vùng nội dung bên trong (bao gồm Padding, không bao gồm Border/Scrollbar).
- `offsetHeight` / `offsetWidth`: Kích thước đầy đủ của phần tử (bao gồm cả Border và Scrollbar).
- `offsetTop` / `offsetLeft`: Vị trí của phần tử so với phần tử cha gần nhất có `position`.
- `scrollHeight` / `scrollWidth`: Tổng kích thước nội dung bên trong phần tử (bao gồm cả phần bị che khuất phải cuộn mới thấy).
—
3. Duyệt cây DOM từ Element
Từ một phần tử hiện tại, bạn có thể “di chuyển” sang các phần tử lân cận:
- `parentElement`: Tìm phần tử cha.
- `children`: Danh sách các phần tử con trực tiếp (không bao gồm text node).
- `firstElementChild` / `lastElementChild`: Phần tử con đầu tiên hoặc cuối cùng.
- `nextElementSibling` / `previousElementSibling`: Phần tử anh em ngay phía sau hoặc phía trước.
—
4. Các phương thức tương tác
- `focus()` / `blur()`: Kích hoạt hoặc bỏ chọn (thường dùng cho các ô Input).
- `click()`: Mô phỏng hành vi click chuột của người dùng.
- `scrollIntoView()`: Cuộn trang sao cho phần tử đó hiện ra trong tầm mắt người dùng.
—
Lời kết Tập 14
Làm chủ đối tượng Element giúp bạn biến những trang web tĩnh thành những ứng dụng tương tác cực kỳ linh hoạt. Trong Tập 15, chúng ta sẽ khám phá các Attribute Reference để hiểu sâu hơn về cách JavaScript quản lý các thuộc tính HTML.
Hẹn gặp lại các bạn!
Leave a comment