1. Truy cập phần tử (Finding Elements)
Đây là những phương thức phổ biến nhất để bạn “tóm” được một thẻ HTML nào đó:
- `getElementById(id)`: Tìm phần tử theo ID duy nhất.
- `getElementsByClassName(name)`: Trả về danh sách (HTMLCollection) các phần tử có cùng lớp (Class).
- `getElementsByTagName(name)`: Tìm theo tên thẻ (ví dụ `div`, `p`, `h1`).
- `querySelector(selector)`: Tìm phần tử đầu tiên khớp với CSS Selector (cực kỳ mạnh mẽ).
- `querySelectorAll(selector)`: Trả về danh sách (NodeList) tất cả các phần tử khớp với Selector.
—
2. Thay đổi phần tử (Changing Elements)
- `element.innerHTML`: Thay đổi nội dung HTML bên trong.
- `element.attribute`: Thay đổi giá trị thuộc tính (ví dụ `src` của ảnh, `href` của link).
- `element.style.property`: Thay đổi CSS trực tiếp của phần tử.
- `element.setAttribute(attr, value)`: Thiết lập thuộc tính theo cách tổng quát.
—
3. Tạo và Xóa phần tử (Adding/Deleting)
- `createElement(element)`: Tạo một thẻ HTML mới (ví dụ một nút bấm hoặc đoạn văn).
- `createTextNode(text)`: Tạo nội dung văn bản thuần túy.
- `appendChild(node)`: Gắn phần tử mới vào làm con của một phần tử khác.
- `removeChild(node)`: Gỡ bỏ một phần tử con.
- `replaceChild(new, old)`: Thay thế phần tử cũ bằng phần tử mới.
—
4. Các thuộc tính thông tin (Document Properties)
- `document.title`: Lấy hoặc đặt tiêu đề trang web.
- `document.URL`: Trả về địa chỉ URL đầy đủ của trang.
- `document.body`: Truy cập nhanh vào thẻ “.
- `document.head`: Truy cập nhanh vào thẻ “.
- `document.cookie`: Quản lý cookies liên quan đến tài liệu này.
—
Lời kết Tập 13
Đối tượng Document là cánh cửa đầu tiên để bạn điều khiển thế giới DOM. Một khi đã “tóm” được phần tử, bạn sẽ cần biết cách thao tác sâu hơn với chính phần tử đó. Đó là lý do chúng ta sẽ gặp nhau ở Tập 14: HTML DOM Element Reference.
Hẹn gặp lại các bạn!
Leave a comment