HOME › học javascript - lập trình javascript cơ bản>>13. dom trong javascript

Sự khác biệt giữa DOM, Node và Element trong JavaScript

17 tháng 6 ,2022

Bài viết đăng tại: https://laptrinhcanban.com

Cùng phân biệt 3 khái niệm rất dễ nhầm lẫn nhưng rất quan trọng đối với một lập trình viên web là DOM, Node và Element trong JavaScript sau bài học này.

DOM trong JavaScript

Như Kiyoshi đã giới thiệu trong bài DOM là gì trong JavaScript thì chúng ta có thể hiểu DOM (viết tắt của Document Object Model) là mô hình xử lý tài liệu như các đối tượng.

Cấu trúc phân cấp được gọi là cây DOM và JavaScript có thể vận hành HTML bằng cách thao tác với cây DOM này.

<body>
├──<section>
│ ├──<p>
│ ├──<p>
│ └──<p>
├──<section>
│ └─<p>
...

Node trong JavaScript

Node đề cập đến “mỗi phần tử tạo nên cây DOM”.
Vì nó là phần tương ứng với các lá của cấu trúc cây DOM nên mỗi Node sẽ có một Node cha và một Node con.

<Node cha>
├──<Node hiện tại>
│ ├──<Node con>
│ ├──<Node con>
│ └──<Node con>
...

Element trong JavaScript

Element là một loại Node trong JavaScript.

Có nhiều loại Node như Document, Element, Document Fragment, tương ứng với từng chủng loại Node sẽ có các phương pháp xử lý khác nhau.
Trong đó Element được coi là loại Node cơ sở phổ biến nhất mà tất cả các đối tượng phần tử đều dựa trên nó và được chia thành nhiều loại khác nhau.

Một cách đơn giản, một element chính là một Node được viết bằng cách sử dụng các tag trong HTML Document, ví dụ như là <html>, <head>, <title>, <body>, <h2>, <p> chẳng hạn.

Trong khi đó, các thành phần khác cấu tạo nên DOM như document type, comment, text nodes, xuống hàng, dấu cách tuy là Node nhưng không phải là element, bởi chúng không được viết thông bằng các tag của HTML.

Bằng cách phân biệt rõ ràng giữa Element và Node trong JavaScript, chúng ta có thể lý giải được cấu trúc cũng như các kết quả trả về của các phương thức và thuộc tính tương ứng của các đối tượng này trong JavaScript.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về sự khác biệt giữa DOM, Node và Element trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.