TÌM HIỂU VỀ DOM VÀ CÁC LOẠI DOM TRONG JAVASCRIPT

24-01-2018 15:39

Javascript là một ngôn ngữ được dùng trong các trình duyệt Browser nên nó đóng vai trò rất quan trọng trong các ứng dụng website. Nhiệm vụ của javascript là thao tác với các tài liệu HTML kết hợp với cú pháp riêng của nó tạo nên sự ảo diệu trong trang web.

Để có thể thao tác với các thẻ HTML phải thông qua một cơ chế được gọi là DOM (Document Objects Model). Sau đây chúng ta sẽ cùng đi tìm hiểu về nó nhé!

DOM là gì?

DOM (Document Objects Model) là mô hình các đối tượng trong tài liệu HTML.

Trong mỗi thể HTML có những thuộc tính và có phân cấp cha - con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này được gọi là selector và DOM sẽ có trách nhiệm xử lý các vấn đề như đổi cấu trúc HTML của thẻ, đổi thuộc tính của thẻ,…

Tất cả các thẻ HTML sẽ được quản lý trong đối tượng Document, thẻ cao nhất là thẻ HTML, tiếp theo là phân nhánh body và head. Bên trong head có các thẻ style, title,…bên trong body có vô số các thẻ HTML khác.

Dưới đây là một ví dụ:

Trong ví dụ này có sử dụng một đoạn code Javascript như sau:

Đoạn code này có ý nghĩa rằng tìm thẻ có id=”main-content” và gán nội dung HTML bên trong của thẻ dòng chữ “ Chào mừng bạn đến với website học lập trình”.

Các thể loại DOM trong Javascript:

Việc xử lý, làm việc với các đối tượng HTML rất đa dạng và phức tạp, vì vậy, Javascript có cung cấp cho chúng ta rất nhiều phương thức, các đối tượng, mỗi thành phần như vậy có những nhiệm vụ riêng biệt. Sau đây là danh sách chia nhóm và những bài chia sẻ kiến thức sau chúng ta sẽ cùng tìm hiểu nó nhé!

Danh sách chia nhóm DOM:

DOM document: lưu trữ toàn bộ các thành phần trong tài liệu của website.
DOM element: truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML.
DOM HTML: thay đổi giá trị nội dung và giá trị của thẻ HTML.
DOM CSS: thay đổi các định dạng CSS của thẻ HTML.
DOM Event: gán các sự kiện như onclick(), onload() vào các thẻ HTML.
DOM Listener: lắng nghe các sự kiện tác động lên thẻ HTML đó.
DOM Navigation: quản lý, thao tác với các thẻ HTML, thể hiện mối quan hệ cha – con của các thẻ HTML.
DOM Node, Nolelist: thao tác với HTML thông qua đối tượng (Object)

Việc xử lý HTML rất là ảo diệu và tuyệt vời cho nên website nào cũng phải sử dụng nó. Thực tế, các Libraries như jQuery vẫn sử dụng các loại DOM này, ví du sự kiện click(), hover() thì bản chất nó chính là thuộc nhóm Event + Listener.

Ban Truyền thông ITPlus Academy