HTML có giống với DOM không?

Question

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

Nội dung chính Show

1. Nút DOM
1. 2 loại nút
2. Phần tử DOM
3. Thuộc tính DOM. nút và phần tử
4. Tóm lược
Bài đăng chất lượng vào hộp thư đến của bạn
DOM có phải là một phần của HTML không?
Tại sao HTML được gọi là DOM?
DOM có liên quan như thế nào trong HTML?
HTML có thể thao túng DOM không?

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>
<html>
  <head>
    <title>My Pagetitle>
  head>
  <body>
    
    <h2>My Pageh2>
    <p id="content">Thank you for visiting my web page!p>
  body>
html>

Tài liệu chứa hệ thống phân cấp các nút sau

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

0 là một nút trong cây tài liệu. Nó có 2 con. Các nút

javascript
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

2

javascript
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ận

javascript
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ăn

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

6. Cha mẹ của nút

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

2 là nút

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

0

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

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

6 có 1 con. nút văn bản

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

10

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?

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

11 có thể có một trong các giá trị sau đại diện cho loại 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

14

javascript



const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

15

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

16

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

17

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

18

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

19

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

10

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

11

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

12

Các hằng số chỉ ra loại nút một cách có ý nghĩa. ví dụ:

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

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.

Ví dụ: hãy chọn nút đoạn văn và xem thuộc tính

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

16 của nó

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

Đúng như dự đoán,

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

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ử

Đoạn văn cũng chứa một nút văn bản

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

1

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 —

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

19

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

1

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ử (

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

13). Cùng với các loại như tài liệu, bình luận, văn bản, v.v.

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.

javascript



const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

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ẻ

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ẻ

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

7

javascript
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

78

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

6

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

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

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

9

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)

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

1

Vì cả

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

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?

Xem xét phần tử đoạn văn sau có chứa một số văn bản

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

4

Mở bản trình diễn, sau đó xem các thuộc tính

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

66 và

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

67 của nút đoạn văn

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

7

Bộ sưu tập

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

68 chứa 2 nút. phần tử in đậm

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

69, cũng như nút văn bản

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

90

Tuy nhiên, bộ sưu tập

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

91 chỉ chứa 1 mục. yếu tố in đậm

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

69

Bởi vì

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

91 chỉ chứa các phần tử, nên 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)

Có cả

javascript
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true

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ử

4. Tóm lược

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 mua

Tham gia cùng 6845 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 😉

DOM có phải là một phần của HTML không?

HTML DOM là mô hình đối tượng tiêu chuẩn và giao diện lập trình cho HTML . Nó định nghĩa. Các phần tử HTML như các đối tượng. Các thuộc tính của tất cả các phần tử HTML.

Tại sao HTML được gọi là DOM?

HTML DOM (Mô hình đối tượng tài liệu) . When a web page is loaded, the browser creates a Document Object Model of the page.

DOM có liên quan như thế nào trong HTML?

Mô hình đối tượng tài liệu (DOM) là biểu diễn dữ liệu của các đối tượng bao gồm cấu trúc và nội dung của tài liệu trên web . Hướng dẫn này sẽ giới thiệu về DOM, xem cách DOM thể hiện tài liệu HTML trong bộ nhớ và cách sử dụng API để tạo nội dung và ứng dụng web.

HTML có thể thao túng DOM không?

Với HTML DOM, bạn có thể điều hướng cây nút và truy cập các nút trong cây bằng cách sử dụng các mối quan hệ nút mà chúng ta đã nói trước đó (cha mẹ, . Các nút mới có thể được tạo và tất cả các nút có thể được sửa đổi hoặc xóa.

programming html

HTML có giống với DOM không?

1. Nút DOM

1. 2 loại nút

2. Phần tử DOM

3. Thuộc tính DOM. nút và phần tử

4. Tóm lược

Thích bài viết?

Bài đăng chất lượng vào hộp thư đến của bạn

Giới thiệu về Dmitri Pavlutin

DOM có phải là một phần của HTML không?

Tại sao HTML được gọi là DOM?

DOM có liên quan như thế nào trong HTML?

HTML có thể thao túng DOM không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội