Điều hướng HTML DOM trong JavaScript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Điều hướng HTML DOM trong JavaScript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Với HTML DOM, bạn có thể điều hướng cây node thông qua các mối quan hệ node.

Các DOM Node

Theo chuẩn HTML DOM của W3C, mọi thứ trong một tài liệu HTML là một node:

  • Toàn bộ tài liệu là một node tài liệu
  • Mỗi phần tử HTML là một node phần tử
  • Văn bản bên trong phần tử HTML là các node văn bản
  • Mỗi thuộc tính HTML là một node thuộc tính (không dùng nữa)
  • Tất cả nhận xét là các node nhận xét

Với HTML DOM, tất cả node trong cây node có thể được truy cập bằng JavaScript. Các node mới có thể được tạo ra, và tất cả các node có thể được sửa đổi hoặc xóa.

Các mối liên hệ node

Các node trong cây nút có quan hệ phân cấp với nhau. Các điều khoản parent, child, và sibling được sử dụng để mô tả các mối quan hệ.

  • Trong một cây node, node trên cùng được gọi là node gốc (hoặc node gốc)
  • Mỗi node có chính xác một parent, ngoại trừ root (không có parent)
  • Một node có thể có một số child
  • Sibling là các node có cùng parent
<html>

  <head>
      <title>DOM Tutorial</title>
  </head>

  <body>
      <h1>DOM Lesson one</h1>
      <p>Hello world!</p>
  </body>

</html>

Từ HTML ở trên bạn có thể hiểu:

  • <html> là nút gốc
  • <html> không có parent
  • <html> là parent của <head> và <body>
  • <head> là child đầu tiên của <html>
  • <body> là child cuối cùng của <html>

Và:

  • <head> có một child: <title>
  • <title> có một child (node văn bản): “DOM Tutorial”
  • <body> có hai child: <h1> và <p>
  • <h1> có một child: “DOM Bài học một”
  • <p> có một child: “Hello world!”
  • <h1> và <p> là sibling của nhau

Điều hướng giữa các node

Bạn có thể sử dụng các thuộc tính sau để di chuyển giữa các node với JavaScript:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

Child node và các giá trị node

Lỗi chung trong quá trình xử lý DOM là mong đợi một node phần tử chứa văn bản.

<title id="demo">DOM Tutorial</title>

Node phần tử <title> (trong ví dụ ở trên) không chứa văn bản. Nó chứa một nút văn bản với giá trị DOM Tutorial”. Giá trị của node văn bản có thể được truy cập bởi thuộc tính innerHTML của node:

var myTitle = document.getElementById("demo").innerHTML;

Truy cập thuộc tính innerHTML cũng giống như truy cập nodeValue của child đầu tiên:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

Tiếp cận child đầu tiên cũng có thể được thực hiện như sau:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

Tất cả (3) ví dụ sau lấy ra văn bản của một phần tử <h1> và sao chép nó vào phần tử <p>:

<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>

</body>
</html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

</body>
</html>
<html>
<body>

<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

</body>
</html>

InnerHTML

Trong hướng dẫn này chúng ta sử dụng thuộc tính innerHTML để lấy nội dung của một phần tử HTML. Tuy nhiên, học các phương pháp khác ở trên sẽ hữu ích cho việc hiểu cấu trúc cây và điều hướng của DOM.

DOM Root node

Có hai đặc tính đặc biệt cho phép truy cập vào đầy đủ tài liệu:

  • document.body – Phần thân của tài liệu
  • document.documentElement – Tài liệu đầy đủ
<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>
<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

</body>
</html>

Thuộc tính nodeName

Thuộc tính nodeName xác định tên của một node.

  • nodeName chỉ đọc
  • nodeName của một node phần tử giống như tên của thẻ
  • nodeName của một node thuộc tính là tên thuộc tính
  • nodeName của một node văn bản luôn là #text
  • nodeName của nút tài liệu luôn là #document
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Lưu ý: nodeName luôn chứa tên thẻ chữ hoa của một phần tử HTML.

Thuộc tính nodeValue

Thuộc tính nodeValue xác định giá trị của một node.

  • nodeValue cho các node phần tử không xác định
  • nodeValue cho các node văn bản là văn bản chính nó
  • nodeValue cho các node thuộc tính là giá trị thuộc tính

Thuộc tính nodeType

Thuộc tính nodeType chỉ được đọc. Nó trả về kiểu của một node.

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Các thuộc tính nodeType quan trọng nhất là:

Node Kiểu Ví dụ
ELEMENT_NODE 1 <h1 class=”heading”>W3Schools</h1>
ATTRIBUTE_NODE 2  class = “heading” (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!– This is a comment –>
DOCUMENT_NODE 9 <html>
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Kiểu 2 không được dùng nữa trong DOM HTML (nhưng hoạt động). Nó vẫn có thể hoạt động trong DOM XML.