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

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.

Thích thì Like, yêu thì Share, ghét thì bấm phím Ctrl + W

Đọc thêm DOM HTML