Mô hình đối tượng tài liệu [DOM] là một giao diện xử lý tài liệu HTML hoặc XML dưới dạng cấu trúc cây, trong đó mỗi nút là một đối tượng của tài liệu. DOM cũng cung cấp một tập hợp các phương thức để truy vấn cây, thay đổi cấu trúc, kiểu
DOM cũng sử dụng thuật ngữ phần tử. khá giống với một nút. Vì vậy, sự khác biệt giữa nút DOM và phần tử là gì?
1. Nút DOM
Chìa khóa để hiểu sự khác biệt giữa nút và phần tử là hiểu nút là gì
Từ quan điểm cao hơn, một tài liệu DOM bao gồm một hệ thống phân cấp các nút. Mỗi nút có thể có cha và/hoặc con
Hãy xem tài liệu HTML sau
html
DOCTYPE html>
My Page
My Page
Thank you for visiting my web page!
Tài liệu chứa hệ thống phân cấp các nút sau
0 là một nút trong cây tài liệu. Nó có 2 con. Các nútjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
1 vàjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
2javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
2 cũng là một nút có 3 nút con. một bình luậnjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
4, tiêu đềjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
5, và đoạn vănjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
6. Cha mẹ của nútjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
2 là nútjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
0javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Các thẻ trong tài liệu HTML đại diện cho một nút, điều thú vị là văn bản thông thường cũng là một nút. Đoạn node
6 có 1 con. nút văn bảnjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
10javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
1. 2 loại nút
Làm cách nào bạn có thể phân biệt các loại nút khác nhau này?
11 có thể có một trong các giá trị sau đại diện cho loại nútjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
13javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
14javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
15javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
16javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
17javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
18javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
19javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
10javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
11javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
12javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Các hằng số chỉ ra loại nút một cách có ý nghĩa. ví dụ:
13 đại diện cho một nút phần tử,javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
15 đại diện cho nút văn bản,javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
19 nút tài liệu, v.v.javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Ví dụ: hãy chọn nút đoạn văn và xem thuộc tính
16 của nójavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Đúng như dự đoán,
17 có giá trịjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
13, cho biết đoạn văn là một phần tửjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Đoạn văn cũng chứa một nút văn bản
1javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Có một loại nút đại diện cho toàn bộ cây tài liệu gồm các nút —
19javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
1javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
2. Phần tử DOM
Sau khi hiểu rõ về nút DOM là gì, bây giờ là lúc để phân biệt nút DOM và phần tử
Nếu bạn hiểu rõ thuật ngữ nút, thì câu trả lời là hiển nhiên. một phần tử là một nút của một loại cụ thể — phần tử [
13]. Cùng với các loại như tài liệu, bình luận, văn bản, v.v.javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Nói một cách đơn giản, một phần tử là một nút được viết bằng thẻ trong tài liệu HTML.
0,javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
1,javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
73,javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
2,javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
5,javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
6 đều là các phần tử vì chúng được đại diện bởi các thẻjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Loại tài liệu, nhận xét, nút văn bản không phải là thành phần vì chúng không được viết bằng thẻ
7javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
77 là hàm tạo của một nút vàjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
78 là hàm tạo của một phần tử trong JavaScript DOM. Một đoạn, là một nút và cũng là một phần tử, là một thể hiện của cảjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
77 vàjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
78javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
6javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Nói một cách đơn giản hơn, một phần tử là một kiểu con của một nút giống như cách một con mèo là một kiểu con của một con vật
3. Thuộc tính DOM. nút và phần tử
Ngoài việc phân biệt các nút với các phần tử, bạn cũng cần phân biệt các thuộc tính DOM chỉ chứa các nút cụ thể hoặc chỉ các phần tử
Các thuộc tính sau của loại
77 đánh giá một nút hoặc một tập hợp các nút [javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
62]javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
9javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Tuy nhiên, các thuộc tính sau đây là các phần tử hoặc tập hợp các phần tử [______463]
1javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Vì cả
64 vàjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
65 đều trả về một danh sách con, tại sao lại có cả hai thuộc tính này?javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Xem xét phần tử đoạn văn sau có chứa một số văn bản
4javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Mở bản trình diễn, sau đó xem các thuộc tính
66 vàjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
67 của nút đoạn vănjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
7javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Bộ sưu tập
68 chứa 2 nút. phần tử in đậmjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
69, cũng như nút văn bảnjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
90javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Tuy nhiên, bộ sưu tập
91 chỉ chứa 1 mục. yếu tố in đậmjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
69javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Bởi vì
91 chỉ chứa các phần tử, nút văn bản không được đưa vào đây vì loại của nó là văn bản [javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
15] và không phải là phần tử [javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
13]javascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Có cả
64 vàjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
65 cho phép bạn chọn bộ sưu tập trẻ em mà bạn muốn truy cập. tất cả các nút con hoặc chỉ các nút con là phần tửjavascript
const paragraph = document.querySelector['p'];
paragraph.nodeType === Node.ELEMENT_NODE; // => true
4. Bản tóm tắt
Tài liệu DOM là tập hợp các nút có thứ bậc. Mỗi nút có thể có cha và/hoặc con
Hiểu sự khác biệt giữa nút DOM và phần tử thật dễ dàng nếu bạn hiểu nút là gì
Các nút có các loại, loại phần tử là một trong số chúng. Phần tử được đại diện bởi một thẻ trong tài liệu HTML
Đố. Loại nút nào không bao giờ có nút cha?
Thích bài viết?
đề xuất cải tiến
Bài đăng chất lượng vào hộp thư đến của bạn
Tôi thường xuyên xuất bản bài viết có chứa
- Các khái niệm JavaScript quan trọng được giải thích bằng các từ đơn giản
- Tổng quan về các tính năng JavaScript mới
- Cách sử dụng TypeScript và cách gõ
- Thiết kế phần mềm và thực hành mã hóa tốt
Đăng ký nhận bản tin của tôi để nhận chúng ngay trong hộp thư đến của bạn
Đặt muaTham gia cùng 6719 người đăng ký khác
Giới thiệu về Dmitri Pavlutin
Nhà văn và huấn luyện viên công nghệ. Thói quen hàng ngày của tôi bao gồm [nhưng không giới hạn] uống cà phê, viết mã, viết, huấn luyện, vượt qua sự nhàm chán 😉