Bắt đầu nghiên cứu DOM HTML cần thực hành gì?

JavaScript - JQuery    2020-09-02

Sau khi hình dung sơ bộ thì bạn sẽ hiểu với 1 cái cây có nhiều node thì cần phải tương tác những gì.
Về cơ bản là tương tác với cây DOM để làm các công việc: truy xuất vào 1 node, thêm node mới, xóa node, thay đổi nội dung hoặc thuộc tính.

Có các loại node nào?

  • Toàn bộ tài liệu là document node
  • Tất cả các thành phần của HTML đều là element node
  • Văn bản trong thành phần HTML là text node
  • Tất cả các thuộc tính là attribute node
  • Chú thích là comment node

Vậy bạn cần thực hành cơ bản những gì?

Cứ từng bước thôi:

  1. Khai báo 1 biến để nhận lấy 1 phần tử HTML, có thể dùng x.getElementById(id)x.getElementsByTagName(name)x.querySelector( selector )x.querySelectorAll( selector ),... với x là một node nào đó trong cây, thường thì hay dùng document.
  2. Xem cấu trúc của phần tử x bằng lệnh console.dir(x);
  3. Gán nội dung cho 1 thẻ html đơn giản. VD: Gán nội dung vào thẻ h1 thì dùng thuộc tính innerText hoặc thuộc tính innerHTML của đối tượng.
  4. Lấy giá trị trong 1 thuộc tính của thẻ, sử dụng x.getAttribute()
  5. Định nghĩa một phương thức cho đối tượng bằng lệnh js. VD: x.onclick= function() {.....}
  6. Duyệt danh sách các phần tử lấy được bởi x.querySelectorAll( selector ) , x.getElementsByTagName(name)...
  7. Tạo mới phần tử và thêm vào trong một phần tử
  8. Xóa 1 phần tử con
  9. Thay đổi thuộc tính style
  10. ....



Các bài viết tiếp theo sẽ giúp bạn thao tác từng công việc.