Các thao tác CRUD trên DOM

Document Object Model (DOM) là một cấu trúc dạng cây cho HTML của bạn. JavaScript sử dụng nó để truy cập và thay đổi mọi phần tử, thuộc tính và đoạn văn bản trên một trang web.

Khi bạn nhấp vào một nút và trang web cập nhật mà không cần tải lại, đó chính là lúc bạn thấy sự thao tác DOM đang hoạt động.

Dưới đây là cách bạn thực hiện các thao tác CRUD (Create - Tạo, Read - Đọc, Update - Cập nhật, Delete - Xóa).

  1. Read: Truy cập các phần tử Sử dụng các phương thức sau để tìm các phần tử trên trang của bạn:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create: Tạo các phần tử mới Bạn có thể tạo các phần tử HTML mới bằng JavaScript.
  • createElement(): Tạo một thẻ mới trong bộ nhớ.
  • append(): Thêm nội dung vào cuối một phần tử cha.
  • appendChild(): Thêm một nút (node) duy nhất làm con cuối cùng.
  • prepend(): Thêm nội dung vào đầu một phần tử cha.
  • before(): Chèn một phần tử vào trước một mục tiêu cụ thể.
  • after(): Chèn một phần tử vào sau một mục tiêu cụ thể.
  • insertBefore(): Đặt một phần tử mới vào trước một phần tử con hiện có.
  1. Update: Thay đổi nội dung Thay đổi những gì người dùng nhìn thấy trên màn hình:
  • innerText: Chỉ cập nhật văn bản hiển thị.
  • textContent: Cập nhật tất cả văn bản, bao gồm cả văn bản bị ẩn.
  • innerHTML: Cập nhật nội dung và cho phép bạn thêm các thẻ HTML.
  1. Attributes: Quản lý thuộc tính Các thuộc tính bổ sung thông tin cho các thẻ của bạn.
  • setAttribute(): Thiết lập giá trị mới cho một thuộc tính. Lưu ý rằng điều này sẽ thay thế giá trị cũ.
  • getAttribute(): Lấy giá trị hiện tại.
  • removeAttribute(): Xóa một thuộc tính.
  • hasAttribute(): Kiểm tra xem một thuộc tính có tồn tại hay không.

Mẹo chuyên nghiệp: Sử dụng classList.add() để thêm một class mà không làm mất các class hiện có. Sử dụng setAttribute() cho các thuộc tính tùy chỉnh.

  1. Delete: Xóa các phần tử Để xóa một phần tử khỏi trang, hãy sử dụng:
  • remove()

Tóm tắt luồng CRUD:

  • Create: document.createElement("p")
  • Update: p.innerText = "Hello"
  • Read: document.getElementById("p")
  • Delete: p.remove()

Thành thạo các phương thức này cho phép bạn xây dựng các công cụ tương tác như danh sách việc cần làm (to-do list), máy tính và trình xác thực biểu mẫu (form validator). Đây là một bước quan trọng để tiến tới học các framework web hiện đại.

Source: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka

Optional learning community: https://t.me/GyaanSetuAi