1. Node trong JavaScript là gì?

Trong DOM, một đối tượng trong tổ hợp tạo nên tài liệu HTML/XML được gọi là một Node(nút). Tùy thuộc vào kiểu đối tượng mà chúng ta sẽ có các kiểu Node khác nhau, ví dụ như Node phần tử(element node), Node văn bản(text node) hoặc Node thuộc tính(attribute node) chẳng hạn.

Nói một cách khác thì Node chính là đơn vị nhỏ nhất để cấu tạo nên DOM. Bằng cách sử dụng Js, chúng ta có thể thao tác với các Node trong DOM để sửa tài liệu HTML/XML và qua đó trực tiếp thay đổi nội dung hiển thị trên web. Ví dụ, chúng ta có thể dễ dàng thêm các đối tượng như dòng văn bản, hộp, nút v.v. vào web, thêm các xử lý khi click vào nút, cũng như là tinh chỉnh thiết kế đồ họa của các đối tượng thông qua việc sửa đổi CSS.

Đối với HTML DOM, mọi thành phần đều được xem là một node (nút), được biểu diễn trên 1 cây cấu trúc dạng cây gọi là DOM Tree. Các phần tử khác nhau sẽ được phân loại node khác nhau nhưng quan trọng nhất là 3 loại: node gốc (document node), node phần tử (element node), node văn bản (text node).

Node gốc: chính là tài liệu HTML, thường được biểu diễn bởi thẻ <html> .
Node phần tử: biểu diễn cho 1 phần tử HTML.
Node văn bản: mỗi đoạn kí tự trong tài liệu HTML, bên trong 1 thẻ HTML đều là 1 node văn bản. Đó có thể là tên trang web trong thẻ <title> , tên đề mục trong thẻ <h1> , hay một đoạn văn trong thẻ <p> .
Ngoài ra còn có node thuộc tính (attribute node) và node chú thích (comment node).

<html><!--document node-->
  <head>//element node - head-->
    <title><!--element node - title -->
      HTML căn bản - Mọi điều cần biết về HTML Dom  <!--text node -->
    </title>
  </head>
  <Body><!--element node - body -->
    <!--HTML căn bản--> <!--comment node -->
    <h1><!--element node - h1 -->
      Mọi điều cần biết về HTML Dom<!--text node-->
    </h1>
    <p><!--element node - p -->
      Học Dom tại <!--text node -->
      <a href="https://laptrinhtudau.com/"></a><!--element node link -->
    </p>
    <p><!--element node - p -->
      Web = Dom + Js<!--text node-->
    </p>
  </Body>
</html>

2. Quan hệ giữa các Node trong DOM

Trong một Document Node , các Node có thứ bậc nhỏ hơn sẽ tồn tại 2 loại quan hệ là quan hệ anh em và quan hệ cha con. Quan hệ giữa các Node trong DOM:

Node gốc (document) luôn là node đầu tiên.
Tất cả các node không phải là node gốc đều chỉ có 1 node cha (parent).
Một node có thể có một hoặc nhiều con, nhưng cũng có thể không có con nào.
Những node có cùng node cha được gọi là các node anh em (siblings).
Trong các node anh em, node đầu tiên được gọi là con cả (firstChild) và node cuối cùng là con út (lastChild).

Giống như trên thì body node là node cha của h1 node và p node. Ngược lại thì h1 node và p node chính là node con của body node. Và chúng là node anh em của nhau. Việc xác định quan hệ giữa các node trong DOM rất quan trọng trong việc xác định vị trí của các node khi cần thao tác với chúng trong DOM.

3. Thao tác với Dom

Mọi nội dung đều có thể được cập nhật động thông qua các thuộc tính và phương thức của DOM. Từ thay đổi định dạng chữ, nội dung chữ đến thay đổi cấu trúc các node và cả thêm node mới. Bạn cần hiểu rõ cách thao tác DOM và ý nghĩa của từng thuộc tính, phương thức. Do đó, để sáng tạo nội dung tốt, bạn cần hiểu rõ cách thao tác DOM và ý nghĩa của từng thuộc tính, phương thức.

3.1. Thuộc tính thường gặp

Các thuộc tính thường gặp như:

id : Định danh – là duy nhất cho mỗi phần tử nên thường được dùng để truy xuất DOM trực tiếp và nhanh chóng.
className : Tên lớp – Cũng dùng để truy xuất trực tiếp như id, nhưng 1 className có thể dùng cho nhiều phần tử.
tagName : Tên thẻ HTML.
innerHTML : Trả về mã HTML bên trong phần tử hiện tại. Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các node phần tử và node văn bản.
outerHTML : Trả về mã HTML của phần tử hiện tại. Nói cách khác, outerHTML = tagName + innerHTML.
textContent : Trả về 1 chuỗi kí tự chứa nội dung của tất cả node văn bản bên trong phần tử hiện tại.
attributes : Tập các thuộc tính như id , name , class , href , title …
style : Tập các định dạng của phần tử hiện tại
value : Lấy giá trị của thành phần được chọn thành một biến.

3.2. Phương thức thường gặp

Các phương thức thường gặp như:

getElementById(id) : Tham chiếu đến 1 node duy nhất có thuộc tính id giống với id cần tìm.
getElementsByTagName(tagname) : Tham chiếu đến tất cả các node có thuộc tính tagName giống với tên thẻ cần tìm, hay hiểu đơn giản hơn là tìm tất cả các phần tử DOM mang thẻ HTML cùng loại. Nếu muốn truy xuất đến toàn bộ thẻ trong tài liệu HTML thì hãy sử dụng document.getElementsByTagName(‘*’).
getElementsByName(name) : Tham chiếu đến tất cả các node có thuộc tính name cần tìm.
getAttribute(attributeName) : Lấy giá trị của thuộc tính.
setAttribute(attributeName, value) : Sửa giá trị của thuộc tính.
appendChild(node) : Thêm 1 node con vào node hiện tại.
removeChild(node) : Xóa 1 node con khỏi node hiện tại.

3.3. Thuộc tính quan hệ

Các phần tử DOM đều là các node trên cây cấu trúc DOM. Chúng sở hữu thêm các thuộc tính quan hệ để biểu diễn sự phụ thuộc giữa các node với nhau. Nhờ các thuộc tính quan hệ này, chúng ta có thể truy xuất DOM gián tiếp dựa trên quan hệ và vị trí của các phần tử:

parentNode : node cha
childNodes : Các node con
firstChild : node con đầu tiên
lastChild : node con cuối cùng
nextSibling : node anh em liền kề sau
previousSibling : node anh em liền kề trước

4. Truy xuất Dom

Chúng ta có thể truy xuất mọi phần tử html bằng cách sử dụng các phương thức:

document.getElementById()
document.getElementsByTagName()
document.getElementsByClass()

Đây hay còn gọi là những cách truy xuất trực tiếp

Ví dụ:

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Chú ý

Khi truy xuất bằng document.getElementById() giá trị trả về chính là phần tử có id đó.

Khi truy xuất bằng document.getElementsByTagName() hoặc document.getElementsByClass() giá trị trả về sẽ là một mảng. Vậy nên ta cần truy xuất phần tử của mảng để xác định được phần tử mong muốn.

Ngoài ra cũng còn một số cách truy xuất gián tiếp như:

Node.parentNode : tham chiếu đến nút cha của nút hiện tại, và nút cha này là duy nhất cho mỗi nút. Do đó, nếu bạn cần tìm nguồn gốc sâu xa của 1 nút, bạn phải nối thuộc tình nhiều lần, ví dụ Node.parentNode.parentNode.
Node.childNodes : tham chiếu đến các nút con trực tiếp của nút hiện tại, và kết quả là 1 mảng các đối tượng. Lưu ý rằng, các nút con không bị phân biệt bởi loại nút, nên kết quả mảng trả về có thể bao gồm nhiều loại nút khác nhau.
Node.firstChild : tham chiếu đến nút con đầu tiên của nút hiện tại, và tương đương với việc gọi Node.childNodes[0].
Node.lastChild : tham chiếu đến nút con cuối cùng của nút hiện tại, và tương đương với việc gọi Node.childNodes[Element.childNodes.length-1].
Node.nextSibling : tham chiếu đến nút anh em nằm liền kề sau với nút hiện tại.
Node.previousSibling : tham chiếu đến nút anh em nằm liền kề trước với nút hiện tại.

Làm việc với Dom trong JavaScript