Hướng dẫn what is dom node tree html? - html cây nút dom là gì?

Question

Xương sống của tài liệu HTML là thẻ.

Nội dung chính Show

Một ví dụ về DOM
Tự động
Các loại nút khác
Xem nó cho chính mình
Tương tác với bảng điều khiển
Bản tóm tắt
Cây nút dom là gì?
HTML DOM có phải là cây không?
Làm thế nào để Dom Tree hoạt động?
Nút phần tử DOM là gì?

Theo mô hình đối tượng tài liệu (DOM), mọi thẻ HTML là một đối tượng. Các thẻ lồng nhau là trẻ em của người Viking của một trong số đó. Văn bản bên trong một thẻ cũng là một đối tượng.

Tất cả các đối tượng này có thể truy cập bằng JavaScript và chúng ta có thể sử dụng chúng để sửa đổi trang.

Ví dụ: document.body là đối tượng đại diện cho thẻ <body>.

Chạy mã này sẽ làm cho <body> màu đỏ trong 3 giây:

document.body.style.background = 'red'; // make the background red

setTimeout(() => document.body.style.background = '', 3000); // return back

Ở đây chúng tôi đã sử dụng style.background để thay đổi màu nền của document.body, nhưng có nhiều thuộc tính khác, chẳng hạn như:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

1 - Nội dung HTML của nút.

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

2 - Chiều rộng nút (tính bằng pixel)

…và như thế.

Chẳng mấy chốc, chúng tôi sẽ tìm hiểu thêm các cách để thao túng DOM, nhưng trước tiên chúng ta cần biết về cấu trúc của nó.

Một ví dụ về DOM

Hãy bắt đầu với các tài liệu đơn giản sau:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

DOM đại diện cho HTML như một cấu trúc cây của các thẻ. Ở đây, nó trông như thế nào:

Trên hình trên, bạn có thể nhấp vào các nút phần tử và con cái của họ sẽ mở/sụp đổ.

Mỗi nút cây là một đối tượng.

Thẻ là các nút phần tử (hoặc chỉ các phần tử) và tạo thành cấu trúc cây:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

3 nằm ở gốc, sau đó

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

4 và <body> là con cái của nó, v.v.

Văn bản bên trong các phần tử tạo thành các nút văn bản, được dán nhãn là

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

6. Một nút văn bản chỉ chứa một chuỗi. Nó có thể không có con và luôn là một chiếc lá của cây.

Chẳng hạn, thẻ

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

7 có văn bản

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

8.

Xin lưu ý các ký tự đặc biệt trong các nút văn bản:

Một dòng mới:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

9 (trong JavaScript được gọi là

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

0)

Một không gian:

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

1

Không gian và dòng mới là các ký tự hoàn toàn hợp lệ, như chữ cái và chữ số. Chúng tạo thành các nút văn bản và trở thành một phần của DOM. Vì vậy, ví dụ, trong ví dụ trên thẻ

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

4 chứa một số không gian trước

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

7 và văn bản đó trở thành nút

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

6 (nó chỉ chứa một dòng mới và một số không gian).

Chỉ có hai loại trừ cấp cao nhất:

Không gian và dòng mới trước khi

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

4 bị bỏ qua vì lý do lịch sử.

Nếu chúng ta đặt một cái gì đó sau

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

6, thì điều đó sẽ tự động di chuyển bên trong

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

7, ở cuối, vì thông số kỹ thuật HTML yêu cầu tất cả nội dung phải ở bên trong <body>. Vì vậy, có thể có bất kỳ không gian nào sau

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

6.

Trong các trường hợp khác, mọi thứ đều đơn giản - nếu có không gian (giống như bất kỳ ký tự nào) trong tài liệu, thì chúng trở thành nút văn bản trong DOM và nếu chúng ta xóa chúng, thì sẽ giành được bất kỳ.

Dưới đây không có nút văn bản chỉ có không gian:

<!DOCTYPE HTML>
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>

Không gian ở chuỗi bắt đầu/kết thúc và các nút văn bản chỉ không gian thường được ẩn trong các công cụ

Các công cụ trình duyệt (sẽ sớm được đề cập) hoạt động với DOM thường không hiển thị khoảng trống ở đầu/cuối của văn bản và các nút văn bản trống (ngắt dòng) giữa các thẻ.

Công cụ phát triển lưu không gian màn hình theo cách này.

Trên các hình ảnh DOM hơn nữa, đôi khi chúng tôi sẽ bỏ qua chúng khi chúng không liên quan. Không gian như vậy thường không ảnh hưởng đến cách hiển thị tài liệu.

Tự động

Nếu trình duyệt gặp HTML bị dị tật, nó sẽ tự động sửa nó khi tạo DOM.

Chẳng hạn, thẻ trên cùng luôn là

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

3. Ngay cả khi nó không tồn tại trong tài liệu, nó sẽ tồn tại trong DOM, bởi vì trình duyệt sẽ tạo ra nó. Điều tương tự cũng xảy ra với <body>.

Ví dụ, nếu tệp HTML là từ duy nhất

<p>Hello
<li>Mom
<li>and
<li>Dad

2, trình duyệt sẽ kết thúc nó thành

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

3 và <body> và thêm

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

4 cần thiết và DOM sẽ là:

Trong khi tạo DOM, các trình duyệt tự động xử lý các lỗi trong tài liệu, các thẻ đóng, v.v.

Một tài liệu có thẻ không được giải thích:

<p>Hello
<li>Mom
<li>and
<li>Dad

Càng sẽ trở thành một DOM bình thường khi trình duyệt đọc các thẻ và khôi phục các phần còn thiếu:

Bảng luôn có

<p>Hello
<li>Mom
<li>and
<li>Dad

6

Một trường hợp đặc biệt thú vị của người Viking là bảng. Theo thông số kỹ thuật của DOM, họ phải có thẻ

<p>Hello
<li>Mom
<li>and
<li>Dad

6, nhưng văn bản HTML có thể bỏ qua nó. Sau đó, trình duyệt tạo

<p>Hello
<li>Mom
<li>and
<li>Dad

6 trong DOM tự động.

Đối với HTML:

<table id="table"><tr><td>1</td></tr></table>

Cấu trúc dom sẽ là:

Bạn thấy?

<p>Hello
<li>Mom
<li>and
<li>Dad

6 xuất hiện từ hư không. Chúng ta nên ghi nhớ điều này trong khi làm việc với các bảng để tránh bất ngờ.

Các loại nút khác

Có một số loại nút khác ngoài các phần tử và nút văn bản.

Ví dụ, nhận xét:

<!DOCTYPE HTML>
<html>
<body>
  The truth about elk.
  <ol>
    <li>An elk is a smart</li>
    <!-- comment -->
    <li>...and cunning animal!</li>
  </ol>
</body>
</html>

Chúng ta có thể thấy ở đây một loại nút cây mới - nút Nhận xét, được dán nhãn là

<table id="table"><tr><td>1</td></tr></table>

0, giữa hai nút văn bản.

Chúng ta có thể nghĩ - tại sao một bình luận được thêm vào DOM? Nó không ảnh hưởng đến đại diện trực quan theo bất kỳ cách nào. Nhưng có một quy tắc - nếu một cái gì đó ở HTML, thì nó cũng phải ở trong cây Dom.

Mọi thứ trong HTML, thậm chí là bình luận, trở thành một phần của DOM.

Ngay cả chỉ thị

<table id="table"><tr><td>1</td></tr></table>

1 ở đầu HTML cũng là một nút dom. Nó trong cây Dom ngay trước

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>

3. Rất ít người biết về điều đó. Chúng tôi sẽ không chạm vào nút đó, chúng tôi thậm chí không thể vẽ nó trên sơ đồ, nhưng nó ở đó.

Đối tượng

<table id="table"><tr><td>1</td></tr></table>

3 đại diện cho toàn bộ tài liệu, chính thức, cũng là một nút dom.

Có 12 loại nút. Trong thực tế, chúng tôi thường làm việc với 4 người trong số họ:

```
<table id="table"><tr><td>1</td></tr></table>
```
3 - Điểm nhập cảnh của người Viking vào DOM.
Các nút phần tử-Thẻ HTML, các khối xây dựng cây.
Các nút văn bản - chứa văn bản.
Nhận xét - Đôi khi chúng ta có thể đặt thông tin ở đó, nó đã thắng được hiển thị, nhưng JS có thể đọc nó từ DOM.

Xem nó cho chính mình

Để xem cấu trúc DOM trong thời gian thực, hãy thử Trình xem Dom Live. Chỉ cần nhập vào tài liệu, và nó sẽ hiển thị dưới dạng DOM ngay lập tức.

Một cách khác để khám phá DOM là sử dụng các công cụ nhà phát triển trình duyệt. Trên thực tế, đó là những gì chúng ta sử dụng khi phát triển.

Để làm như vậy, hãy mở trang web Elk.html, bật các công cụ nhà phát triển trình duyệt và chuyển sang tab các phần tử.

Nó sẽ giống như thế này:

Bạn có thể thấy DOM, nhấp vào các phần tử, xem chi tiết của họ, v.v.

Xin lưu ý rằng cấu trúc DOM trong các công cụ nhà phát triển được đơn giản hóa. Các nút văn bản được hiển thị chỉ là văn bản. Và không có các nút văn bản trống trống (chỉ không gian). Điều đó tốt, bởi vì hầu hết thời gian chúng tôi quan tâm đến các nút phần tử.

Nhấp vào nút ở góc cạnh trái cho phép chúng tôi chọn một nút từ trang web bằng cách sử dụng chuột (hoặc các thiết bị con trỏ khác) và kiểm tra trên mạng (cuộn đến nó trong tab các phần tử). Điều này hoạt động rất tốt khi chúng tôi có một trang HTML khổng lồ (và tương ứng với DOM lớn) và muốn thấy vị trí của một yếu tố cụ thể trong đó. button in the left-upper corner allows us to choose a node from the webpage using a mouse (or other pointer devices) and “inspect” it (scroll to it in the Elements tab). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particular element in it.

Một cách khác để làm điều đó sẽ chỉ là nhấp chuột phải trên trang web và chọn kiểm tra trên mạng trong menu ngữ cảnh.

Ở phần bên phải của các công cụ có các subtab sau:

Kiểu-chúng ta có thể thấy CSS được áp dụng cho quy tắc phần tử hiện tại theo quy tắc, bao gồm các quy tắc tích hợp (màu xám). Hầu hết mọi thứ đều có thể được chỉnh sửa tại chỗ, bao gồm các kích thước/lề/đệm của hộp bên dưới. – we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited in-place, including the dimensions/margins/paddings of the box below.
Được tính toán - Để xem CSS được áp dụng cho phần tử theo thuộc tính: Đối với mỗi thuộc tính, chúng ta có thể thấy một quy tắc cung cấp cho nó (bao gồm cả di truyền CSS và như vậy). – to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such).
Người nghe sự kiện - Để xem người nghe sự kiện gắn liền với các yếu tố DOM (chúng tôi sẽ đề cập đến chúng trong phần tiếp theo của hướng dẫn). – to see event listeners attached to DOM elements (we’ll cover them in the next part of the tutorial).
…và như thế.

Cách tốt nhất để nghiên cứu chúng là nhấp xung quanh. Hầu hết các giá trị đều có thể chỉnh sửa tại chỗ.

Tương tác với bảng điều khiển

Khi chúng tôi làm việc DOM, chúng tôi cũng có thể muốn áp dụng JavaScript cho nó. Giống như: Nhận một nút và chạy một số mã để sửa đổi nó, để xem kết quả. Dưới đây là một vài mẹo để di chuyển giữa tab yếu tố và bảng điều khiển.

Để bắt đầu:

Chọn
```
<table id="table"><tr><td>1</td></tr></table>
```
5 đầu tiên trong tab các phần tử.
Nhấn ESC - Nó sẽ mở bảng điều khiển ngay bên dưới tab các phần tử.

Bây giờ phần tử được chọn cuối cùng có sẵn là

<table id="table"><tr><td>1</td></tr></table>

6, đã chọn trước đó là

<table id="table"><tr><td>1</td></tr></table>

7, v.v.

Chúng ta có thể chạy các lệnh trên chúng. Chẳng hạn,

<table id="table"><tr><td>1</td></tr></table>

8 làm cho mục danh sách đã chọn màu đỏ, như thế này:

Đó là cách mà để có được một nút từ các yếu tố trong bảng điều khiển.

Có một con đường trở lại. Nếu có một biến tham chiếu một nút DOM, thì chúng ta có thể sử dụng lệnh

<table id="table"><tr><td>1</td></tr></table>

9 trong bảng điều khiển để xem nó trong ngăn phần tử.

Hoặc chúng ta chỉ có thể xuất nút DOM trong bảng điều khiển và khám phá tại chỗ, như document.body bên dưới:

Tất nhiên, đó là mục đích gỡ lỗi. Từ chương tiếp theo về chúng tôi sẽ truy cập và sửa đổi DOM bằng JavaScript.

Các công cụ phát triển trình duyệt là một trợ giúp tuyệt vời trong phát triển: chúng ta có thể khám phá DOM, thử mọi thứ và xem những gì xảy ra sai.

Bản tóm tắt

Một tài liệu HTML/XML được biểu diễn bên trong trình duyệt dưới dạng cây Dom.

Thẻ trở thành các nút phần tử và tạo thành cấu trúc.
Văn bản trở thành nút văn bản.
Voi vv, mọi thứ trong HTML đều có vị trí của nó trong DOM, thậm chí là bình luận.

Chúng tôi có thể sử dụng các công cụ phát triển để kiểm tra DOM và sửa đổi nó theo cách thủ công.

Ở đây chúng tôi đề cập đến những điều cơ bản, những hành động được sử dụng và quan trọng nhất để bắt đầu. Có một tài liệu sâu rộng về các công cụ của nhà phát triển Chrome tại https://developers.google.com/web/tools/chrome-devtools. Cách tốt nhất để tìm hiểu các công cụ là bấm vào đây và ở đó, đọc các menu: Hầu hết các tùy chọn đều rõ ràng. Sau đó, khi bạn biết họ nói chung, hãy đọc các tài liệu và nhận phần còn lại.

Các nút DOM có các thuộc tính và phương thức cho phép chúng ta di chuyển giữa chúng, sửa đổi chúng, di chuyển xung quanh trang và hơn thế nữa. Chúng tôi sẽ nhận được cho họ trong các chương tiếp theo.

Cây nút dom là gì?

DOM thường được gọi là cây Dom và bao gồm một cây các đối tượng được gọi là các nút. Trong phần giới thiệu về DOM, chúng tôi đã xem mô hình đối tượng tài liệu (DOM) là gì, cách truy cập đối tượng tài liệu và sửa đổi các thuộc tính của nó với bảng điều khiển và sự khác biệt giữa mã nguồn HTML và DOM.consists of a tree of objects called nodes. In the Introduction to the DOM, we went over what the Document Object Model (DOM) is, how to access the document object and modify its properties with the console, and the difference between HTML source code and the DOM.

HTML DOM có phải là cây không?

Cây HTML DOM của các đối tượng JavaScript có thể thay đổi tất cả các kiểu CSS trong trang.JavaScript có thể loại bỏ các phần tử và thuộc tính HTML hiện có.JavaScript có thể thêm các thành phần và thuộc tính HTML mới.JavaScript có thể phản ứng với tất cả các sự kiện HTML hiện có trong trang. JavaScript can change all the CSS styles in the page. JavaScript can remove existing HTML elements and attributes. JavaScript can add new HTML elements and attributes. JavaScript can react to all existing HTML events in the page.

Làm thế nào để Dom Tree hoạt động?

DOM là một biểu diễn giống như cây của trang web được tải vào trình duyệt.Nó đại diện cho trang web bằng loạt đối tượng A‌‌.Đối tượng chính là đối tượng tài liệu, lần lượt chứa các đối tượng khác cũng chứa các đối tượng của riêng họ, v.v.It represents the web page using a‌‌ series of objects. The main object is the document object, which in turn houses other objects which also house their own objects, and so on.

Nút phần tử DOM là gì?

Đăng ngày 5 tháng 1 năm 2021. DomNodeElement.10 bình luận.Mô hình đối tượng tài liệu (DOM) là một giao diện coi tài liệu HTML hoặc XML là 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 dáng.an interface that treats HTML or XML document as a tree structure, where each node is an object of the document. DOM also provides a set of methods to query the tree, alter the structure, style.