DOM Tree và Nodes

Phần 1:Tìm hiểu về DOM - Giới thiệu
Phần 2: Tìm hiểu về DOM - DOM Tree và Nodes (hiện tại)

Khóa fullstack node.js 2018 tại Techmaster

Giới thiệu

DOM thường được gọi là DOM Tree và bao gồm một tree (cây) các đối tượng được gọi là nodes. Trong bài viết Giới thiệu về DOM chúng ta đã tìm hiểu DOM là gì, cách truy cập đối tượng document và sử đổi các thuộc tính của nó trên console của chrome dev tools và sự khác nhau giữa HTML source code và DOM.

Trong bài viết này, chúng tôi sẽ xem xét các thuật ngữ HTML đó là điều cần thiết để làm việc với JavaScript và DOM và chúng ta sẽ tìm hiểu về DOM Tree, các Node là gì, các loại Node cơ bản nhất. Cuối cùng chúng tôi sẽ tạo một chương trình JavaScript để tương tác, sửa đổi DOM.

HTML Terminology (các thuật ngữ HTML)

Hiểu các thuật ngữ HTML và JavaScript là điều cần thiết để hiểu cách làm việc với DOM. Dưới đây là một số thuật ngữ cơ bản.

Để bắt đầu, chúng ta hãy xem xét HTML element này:

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

Ở đây chúng ta có một anchor element, là một liên kết đến index.html

a là một tag (thẻ)
href là một attribute (thuộc tính)
index.html là attribute value (giá trị của thuộc tính)
Home là text (đoạn chữ)

Tất cả mọi thứ giữa opening tag (thẻ mở) và closing tag (thẻ đóng) được kết hợp sẽ tạo thành toàn bộ HTML element.

Chúng tôi sẽ làm việc với index.html từ bài trước:

<!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 phần tử là dùng JavaScript truy cập một phần tử có thuộc tính id. Hãy thêm một đoạn mã HTML với id là nav dưới đây:

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

Chạy hoặc chạy lại trang web trên cửa sổ trình duyệt và nhìn vào DOM để đảm bảo rằng đoạn mã đã được cập nhật.

Chúng ta sẽ sử dụng phương thức getElementById() để truy cập phần tử. Trong giao diện của console trên Chrome Dev Tools hãy nhập như sau:

> document.getElementById('nav');

Output
<a id="nav" href="index.html">Home</a>

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

> const navLink = document.getElementById('nav');

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

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

Chúng ta cũng có thể thay đổi nội dung văn bản bằng cách sử dụng thuộc tính textContent

> navLink.textContent = 'Navigate to Wikipedia';

Bây giờ khi chúng ta xem phần tử của chúng ta (phần tử có id là nav) hoặc có thể xem ở console hoặc xem ở tag Elements, chúng ta có thể thấy 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 thể hiện ở trên giao diện của trang web.

Làm mới trang web sẽ trả lại mọi thứ về giá trị ban đầu.

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

DOM Tree và Nodes

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

Element nodes
Text nodes
Comment nodes

Khi một phần tử HTML là một item trong DOM, nó được gọi là một element node. Bất kỳ văn bản đơn lẻ nào bên ngoài phần tử là text node và một HTML comment là comment node. Ngoài ba loại node này, bản thân document là một document node nó là gốc của tất cả các node khác.

DOM chứa một cấu trúc cây của các node lồng nhau, thường được gọi là DOM Tree. Giống như cây phả hệ trong gia đình bạn bao gồm cha mẹ, anh chị em... Các node trong DOM cũng được gọi là parent, children, sibling... 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 một file nodes.html Chúng thôi thêm vào các đoạn text, comment, và các element node

<!-- 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>

Phần tử html node là parent node. head và body là siblings, children của html. body chứa ba child node, tất cả đều là sibling - loại không thay đổi cấp độ và nó được lồng vào nhau.

Chú ý: Khi làm việc với một DOM được tạo ra bởi HTML source code, sự thụt đầu dòng của mã nguồn HTML sẽ tạo ra các node văn bản trống, sẽ không hiển thị được từ tab Elements trên Dev Tools.

Xác định loại Node

Mỗi node trong document được truy cập thông qua thuộc tính node type. Dưới đây là bảng các loại node phổ biến nhất mà chúng tôi làm việc trong bài viết này.

Trong tab Elements của Develop Tools, bạn có thể nhận thấy rằng bất cứ khi nào bạn nhấp vào 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à cách rất tiện lợi để truy cập phần tử hiện tại đang hoạt động trong Developer Tools bằng cách nhập $0.

Trong tab Elements của Dev Tools, click vào phần tử đầu tiên trong body ở đây là phần tử h1

Trong tab console lấy ra node type của phần tử hiện tại bằng cách sử dụng thuộc tính nodeType

> $0.nodeType;

Output
1

Với phần tử h1 được chọn, bạn sẽ thấy output là 1 chúng tương quan với ELEMENT_NODE mà ở bảng ở trên đã viết. Tương tự cho text và comment tương ứng với 3 và 8.

Khi bạn biết cách truy cập một element, cạn có thể thấy được Node Type của element đó.

> document.body.nodeType;

Output
1

Ngoài thuộc tính nodeType bạn có thể sử dụng thuộc tính nodeValue để lấy giá trị của một element hoặc sử dụng thuộc tính nodeName để lấy tag name của element đó.

Chỉnh sửa DOM với Events

Cho tới bây giờ, chúng tôi chỉ chỉnh sửa DOM bằng cách sử dụng console trên Dev Tools đây là cách tạm thời, khi refresh trang web tất cả mọi sửa đổi DOM sử dụng console sẽ biến mất. Trong bài viết Giới thiệu về DOM chúng tôi đã sử dụng console để update background color của body. Chúng tôi tạo một nút tương tác để thực hiện các thay đổi DOM

Hãy quay trở lại file index.html của chúng ta và thêm vào đó một button với một id. Chúng tôi cũng thêm một liên kết tới một file trong thư mục js đó là js/scripts.js.

index.html


<!DOCTYPE html><!DOCTYPE  
<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 event trong JavaScript là một hành động mà người dùng thực hiện. Khi người dùng hover chuột lên một phần tử hoặc click một element, hoặc gõ phím tất cả các thao tác đó là các event. Trong các trường hợp cụ thể, chúng tôi muốn phần tử button lắng nghe và sẵn sàng thực hiện một hành động khi người dùng nhấp vào nút đó. Chúng tôi có thể thực hiện việc này bằng cách thêm event listener vào button đó.

Tạo scripts.js và lưu nó vào một thư mục mới là js. Trong file đó, chúng ta sẽ lấy và gán cho phần tử button một biến.

js/scripts.js

let button = document.getElementById('changeBackground');

Sử dụn phương thức addEventListener(), chúng ta sẽ thông báo cho button lắng nghe sự kiện click và thêm vào đó một function.

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

Cuối cùng, bên trong function, chúng tôi viết một đoạn code giống như trong bài viết Giới thiệu về DOM để thay đổi background color thành fuchsia.

...
document.body.style.backgroundColor = 'fuchsia';

Đây là toàn bộ đoạn mã bên trong file scripts.js

js/scripts.js

let button = document.getElementById('changeBackground');

button.addEventListener('click', () => {
  document.body.style.backgroundColor = 'fuchsia';
});

Khi bạn lưu flie này và refresh index.html trên browser. Click vào button và background color của body sẽ thay đổi màu sắc.

Kết luận

Trong bài viết này, chúng tôi đã nêu ra một số thuật ngữ của HTML giúp chúng ta hiểu và chỉnh sửa DOM. Chúng tôi đã nêu ra cấu trúc của DOM như một DOM-tree với các node hay gặp đó là HTML-elements, text, comment và chúng tôi đã tạo ra một đoạn mã để chỉnh sửa website mà không cần phải nhập thủ công vào tab console trong Dev Tools

Bài viết được dịch từ digitalocean.com

Đăng ký thực tập Web front-end tại: http://bit.ly/2GTgkky

Tìm hiểu DOM - Document Object Model (p2 - DOM Tree và Nodes)

DOM Tree và Nodes

Giới thiệu

HTML Terminology (các thuật ngữ HTML)

DOM Tree và Nodes

Xác định loại Node

Chỉnh sửa DOM với Events

Kết luận

Bình luận