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:
- 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.
- Xem cấu trúc của phần tử x bằng lệnh console.dir(x);
- 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.
- Lấy giá trị trong 1 thuộc tính của thẻ, sử dụng x.getAttribute()
- Định nghĩa một phương thức cho đối tượng bằng lệnh js. VD:
x.onclick= function() {.....} - Duyệt danh sách các phần tử lấy được bởi x.querySelectorAll( selector ) , x.getElementsByTagName(name)...
- Tạo mới phần tử và thêm vào trong một phần tử
- Xóa 1 phần tử con
- Thay đổi thuộc tính style
- ....
Các bài viết tiếp theo sẽ giúp bạn thao tác từng công việc.