GALAXY TECH
Chuyên gia Công nghệ
Thứ ba, 07/11/2017 | 00:00 GMT+7

Hiểu về cây và node DOM

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 node . Trong phần Giới thiệu về DOM , ta đã xem qua Mô hình đối tượng tài liệu (DOM) là gì, cách truy cập đối tượng document và sửa đổi các thuộc tính của nó với control panel và sự khác biệt giữa mã nguồn HTML và DOM.

Trong hướng dẫn này, ta sẽ xem xét thuật ngữ HTML, điều cần thiết để làm việc với JavaScript và DOM, đồng thời ta sẽ tìm hiểu về cây DOM, các node là gì và cách xác định các loại nút phổ biến nhất. Cuối cùng, ta sẽ vượt ra ngoài console và tạo một chương trình JavaScript để sửa đổi tương tác DOM.

Thuật ngữ HTML

Hiểu thuật ngữ HTML và JavaScript là điều cần thiết để hiểu cách làm việc với DOM. Ta hãy xem xét ngắn gọn một số thuật ngữ HTML.

Để bắt đầu, ta hãy xem xét phần tử HTML này.

<a href="index.html">Home</a>

Ở đây ta có một phần tử neo, là một liên kết đến index.html .

  • a là thẻ
  • href là thuộc tính
  • index.html là giá trị thuộc tính
  • Home là văn bản .

Mọi thứ giữa thẻ mở và thẻ đóng được kết hợp tạo thành toàn bộ phần tử HTML.

Ta sẽ làm việc với index.html từ hướng dẫn trước :

index.html
<!DOCTYPE html> <html lang="en">    <head>     <title>Learning the DOM</title>   </head>    <body>     <h1>Document Object Model</h1>   </body>  </html>

Cách đơn giản nhất để truy cập một phần tử bằng JavaScript là theo thuộc tính id . Hãy thêm liên kết mà ta có ở trên vào index.html của ta với id là nav .

index.html
... <body>   <h1>Document Object Model</h1>   <a id="nav" href="index.html">Home</a> </body> ...

Tải hoặc reload trang trong cửa sổ trình duyệt của bạn và xem DOM đảm bảo rằng mã đã được cập nhật.

Ta sẽ sử dụng phương thức getElementById() để truy cập toàn bộ phần tử. Trong console , hãy nhập như sau:

  • document.getElementById('nav'); 
Output
<a id="nav" href="index.html">Home</a>

Ta đã truy xuất toàn bộ phần tử bằng getElementById() . Bây giờ, thay vì gõ đối tượng và phương thức đó mỗi khi ta muốn truy cập liên kết nav , ta có thể đặt phần tử vào một biến để làm việc với nó dễ dàng hơn.

  • let navLink = document.getElementById('nav');

Biến navLink chứa phần tử neo của ta . Từ đây, ta có thể dễ dàng sửa đổi các thuộc tính và giá trị. Ví dụ: ta có thể thay đổi vị trí của liên kết bằng cách thay đổi thuộc tính href :

  • navLink.href = 'https://www.wikipedia.org';

Ta cũng có thể thay đổi nội dung văn bản bằng cách gán lại thuộc tính textContent :

  • navLink.textContent = 'Navigate to Wikipedia';

Bây giờ khi ta xem phần tử của bạn , trong console hoặc bằng cách kiểm tra thẻ Elements , ta có thể xem phần tử đã được cập nhật như thế nào.

  • navLink; 
Output
<a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>

Điều này cũng được phản ánh trên giao diện user của trang web.

Liên kết được cập nhật qua DOM

Làm mới trang sẽ hoàn nguyên mọi thứ trở lại giá trị ban đầu.

Đến đây, bạn nên hiểu cách sử dụng phương thức document để truy cập một phần tử, cách gán phần tử cho một biến và cách sửa đổi các thuộc tính và giá trị trong phần tử.

Cây DOM và các node

Tất cả các mục trong DOM được định nghĩa là các node . Có nhiều loại nút, nhưng có ba loại chính mà ta làm việc thường xuyên nhất:

  • Các nút phần tử
  • Các nút văn bản
  • Các nút comment

Khi một phần tử HTML là một mục trong DOM, nó được gọi là một nút phần tử . Bất kỳ văn bản đơn lẻ nào bên ngoài một phần tử đều là một nút văn bản và một chú thích HTML là một nút chú thích . Ngoài ba loại nút này, document thân document là một nút tài liệu , là nút root của tất cả các node khác.

DOM bao gồm một cấu trúc cây gồm các node lồng nhau, thường được gọi là cây DOM . Bạn có thể quen thuộc với gia phả tổ tiên, bao gồm cha mẹ, con cái và anh chị em. Các node trong DOM cũng được gọi là cha mẹ, con cái và anh chị em, tùy thuộc vào mối quan hệ của chúng với các node khác.

Để chứng minh, hãy tạo file nodes.html . Ta sẽ thêm các node văn bản, comment và phần tử.

node.html
<!DOCTYPE html> <html>    <head>     <title>Learning About Nodes</title>   </head>    <body>     <h1>An element node</h1>     <!-- a comment node -->     A text node.   </body>  </html>

Nút phần tử html là nút cha. head và body là anh chị em ruột, con của html . body chứa ba nút con, tất cả đều là anh em ruột - loại nút không thay đổi mức mà nó được lồng vào nhau.

Lưu ý: Khi làm việc với DOM do HTML tạo, việc thụt lề của mã nguồn HTML sẽ tạo ra nhiều nút văn bản trống, sẽ không hiển thị từ tab Phần tử DevTools. Đọc về Khoảng trắng trong DOM

Nhận dạng loại nút

Mỗi nút trong tài liệu đều có một kiểu nút , được truy cập thông qua nodeType tính nodeType . Mạng nhà phát triển Mozilla có danh sách cập nhật tất cả các hằng số loại nút . Dưới đây là biểu đồ về các loại nút phổ biến nhất mà ta đang làm việc trong hướng dẫn này.

Loại nút Giá trị Thí dụ
ELEMENT_NODE 1 Phần tử <body>
TEXT_NODE 3 Văn bản không phải là một phần của phần tử
COMMENT_NODE số 8 <!-- an HTML comment -->

Trong tab Phần tử của Công cụ dành cho nhà phát triển, bạn có thể nhận thấy rằng khi nào bạn nhấp vào và đánh dấu bất kỳ dòng nào trong DOM, giá trị của == $0 sẽ xuất hiện bên cạnh nó. Đây là một cách rất tiện dụng để truy cập phần tử hiện đang hoạt động trong Công cụ dành cho nhà phát triển bằng lệnh $0 .

Trong giao diện điều khiển của nodes.html, nhấp chuột vào phần tử đầu tiên trong body , mà là một h1 phần tử.

Loại nút DOM

Trong console , lấy loại nút của nút hiện được chọn với nodeType tính nodeType .

  • $0.nodeType; 
Output
1

Với phần tử h1 được chọn, bạn sẽ thấy 1 là kết quả , mà ta có thể thấy tương quan với ELEMENT_NODE . Làm tương tự cho văn bản và comment , chúng sẽ xuất ra 3 và 8 tương ứng.

Khi bạn biết cách truy cập một phần tử, bạn có thể thấy loại nút mà không cần đánh dấu phần tử đó trong DOM.

  • document.body.nodeType; 
Output
1

Ngoài nodeType , bạn cũng có thể sử dụng thuộc tính nodeValue để lấy giá trị của một nút văn bản hoặc comment và nodeName để lấy tên thẻ của một phần tử.

Sửa đổi DOM với Sự kiện

Lúc này, ta chỉ thấy cách sửa đổi DOM trong console , điều mà ta thấy là tạm thời; mỗi khi trang được làm mới, các thay đổi sẽ bị mất. Trong phần Giới thiệu về hướng dẫn DOM , ta đã sử dụng console để cập nhật màu nền của phần thân. Ta có thể kết hợp những gì ta đã học trong suốt hướng dẫn này để tạo một nút tương tác thực hiện điều này khi được nhấp vào.

Hãy quay lại index.html của ta và thêm một phần tử button có id . Ta cũng sẽ thêm một liên kết đến một file mới trong folder js mới js/scripts.js .

index.html
<!DOCTYPE html> <html lang="en">    <head>     <title>Learning the DOM</title>   </head>    <body>     <h1>Document Object Model</h1>      <button id="changeBackground">Change Background Color</button>      <script src="scripts.js"></script>   </body>  </html>

Một sự kiện trong JavaScript là một hành động mà user đã thực hiện. Khi user di chuột qua một phần tử hoặc nhấp vào một phần tử hoặc nhấn một phím cụ thể trên bàn phím, đây là tất cả các loại sự kiện. Trong trường hợp cụ thể này, ta muốn nút của bạn lắng nghe và sẵn sàng thực hiện một hành động khi user nhấp vào nó. Ta có thể làm điều này bằng cách thêm một trình nghe sự kiện vào nút của ta .

Tạo scripts.js và lưu nó trong folder js mới. Trong file , trước tiên ta sẽ tìm phần tử button và gán nó cho một biến.

js / scripts.js
let button = document.getElementById('changeBackground');

Sử dụng phương thức addEventListener() , ta sẽ yêu cầu nút lắng nghe một lần nhấp và thực hiện một chức năng sau khi nhấp.

js / scripts.js
... button.addEventListener('click', () => {   // action will go here });

Cuối cùng, bên trong hàm, ta sẽ viết mã tương tự từ hướng dẫn trước để thay đổi màu nền thành màu fuchsia .

js / scripts.js
... document.body.style.backgroundColor = 'fuchsia';

Đây là toàn bộ kịch bản của ta :

js / scripts.js
let button = document.getElementById('changeBackground');  button.addEventListener('click', () => {   document.body.style.backgroundColor = 'fuchsia'; });

Sau khi bạn lưu file này, hãy làm mới index.html trong trình duyệt. Nhấp vào nút và sự kiện sẽ bắt đầu.

Sửa đổi nền với sự kiện

Màu nền của trang đã thay đổi thành màu hoa vân anh do sự kiện JavaScript.

Kết luận

Trong hướng dẫn này, ta đã xem xét thuật ngữ cho phép ta hiểu và sửa đổi DOM. Ta đã tìm hiểu cách DOM được cấu trúc như một cây gồm các node thường là các phần tử HTML, văn bản hoặc comment và ta đã tạo một tập lệnh cho phép user sửa đổi trang web mà không cần phải nhập mã theo cách thủ công vào console dành cho nhà phát triển.

Tags:

Các tin liên quan