Các thao tác CRUD với DOM

Document Object Model (DOM) là cách trình duyệt biểu diễn HTML. Nó chuyển đổi mọi phần tử, thuộc tính và đoạn văn bản thành một đối tượng. JavaScript sử dụng các đối tượng này để thay đổi những gì bạn thấy trên màn hình.

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, đó là lúc JavaScript đang thay đổi DOM.

Bạn có thể thực hiện các thao tác CRUD (Create - Tạo, Read - Đọc, Update - Cập nhật, Delete - Xóa) bằng các phương thức này.

  1. Truy cập các phần tử (Read) Để thay đổi thứ gì đó, trước tiên bạn phải tìm thấy nó. Hãy sử dụng các phương thức sau:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Tạo các phần tử (Create) Bạn có thể tạo các phần tử HTML mới bằng JavaScript.
  • createElement("tagName") tạo phần tử 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 cụ thể.
  • after() chèn một phần tử vào sau một mục cụ thể.
  • insertBefore() đặt một phần tử vào trước một nút con cụ thể.

Lưu ý: Một phần tử sẽ nằm trong bộ nhớ cho đến khi bạn thêm nó vào trang web.

  1. Cập nhật các phần tử (Update) Bạn có thể thay đổi nội dung hiện có bằng các thuộc tính sau:
  • innerText: Chỉ thay đổi văn bản hiển thị.
  • textContent: Thay đổi tất cả văn bản, bao gồm cả văn bản bị ẩn.
  • innerHTML: Thay đổi nội dung và cho phép bạn thêm các thẻ HTML.
  1. Làm việc với các thuộc tính (Update) Các thuộc tính cung cấp thêm thông tin về phần tử.
  • setAttribute(name, value): Thiết lập hoặc thay thế một thuộc tính.
  • getAttribute(name): Lấy giá trị của một thuộc tính.
  • removeAttribute(name): Xóa một thuộc tính.
  • hasAttribute(name): 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 cũ. setAttribute() sẽ thay thế toàn bộ giá trị.

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

Tóm tắt luồng CRUD:

  • Create: createElement()
  • Update: innerText = "New text"
  • Add: appendChild()
  • Delete: remove()

Thành thạo các phương thức này cho phép bạn xây dựng các ứng dụng tương tác như danh sách việc cần làm (to-do list) hoặc máy tính. Đây là một kỹ năng quan trọng đối với phát triển front-end.

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