JavaScript HTML DOM định hướng

Bằng cách sử dụng HTML DOM, bạn có thể sử dụng mối quan hệ nút để duyệt cây nút

Nút DOM

Theo tiêu chuẩn HTML DOM của W3C, tất cả mọi thứ trong tài liệu HTML đều là nút:

  • Toàn bộ tài liệu là nút tài liệu
  • Mỗi phần tử HTML là nút phần tử
  • Text trong các phần tử HTML là nút văn bản
  • Mỗi thuộc tính HTML là nút thuộc tính
  • Tất cả các chú thích là nút chú thích
Cây HTML DOM

Với HTML DOM, tất cả các nút trong cây nút có thể được truy cập qua JavaScript

Có thể tạo mới nút, cũng như sửa đổi và xóa tất cả các nút

Mối quan hệ nút

Các nút trong cây nút có mối quan hệ cấp bậc nhất định

  • Termin (cha, con và anh em, parent, child và sibling) được sử dụng để mô tả các mối quan hệ này
  • Trong cây nút, nút đỉnh được gọi là gốc (nút gốc)
  • Mỗi nút đều có nút cha, trừ nút gốc (nút gốc không có nút cha)
  • Các nút có thể có một số lượng con nhất định
  • Twin (em hoặc anh em) là các nút có cùng cha.
<html>
   <head>
       <title>Giáo trình DOM</title>
   </head>
  <body>
       <h1>Lesson đầu tiên về DOM</h1>
       <p>Hello world!</p>
   </body>
</html>
Cây HTML DOM

Từ HTML trên, bạn có thể đọc được thông tin sau:

  • HTML là nút gốc
  • HTML không có cha
  • HTML là cha của Head và Body
  • Head là con đầu tiên của HTML
  • <body> là nút con cuối cùng của <html>

Cùng lúc:

  • <head> có một nút con: <title>
  • <title> có một nút con (nút văn bản): "DOM Hướng dẫn"
  • <body> có hai nút con: <h1> và <p>
  • <h1> có một nút con: "DOM Lession 1"
  • <p> có một nút con: "Hello world!"
  • <h1> và <p> là anh em

Di chuyển giữa các nút

Bằng cách sử dụng JavaScript, bạn có thể sử dụng các thuộc tính nút sau để di chuyển giữa các nút:

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

nút con và giá trị nút

Một lỗi phổ biến trong việc xử lý DOM là cho rằng phần tử chứa văn bản.

Ví dụ:

<title id="demo">DOM Hướng dẫn</title>

（trong ví dụ trên）nút phần tử <title> không chứavăn bản.

Nó chứa văn bản có giá trị "DOM Hướng dẫn" củaNút văn bản.

Giá trị của nút văn bản có thể được lấy thông qua giá trị của nút: innerHTML thông qua thuộc tính:

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

Truy cập vào thuộc tính innerHTML tương đương với truy cập vào nút con đầu tiên nodeValue:

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

Cũng có thể truy cập vào nút con đầu tiên như sau:

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

Dưới đây là ba ví dụ để lấy lại <h1> 元素的文本 và sao chép vào <p> Trong phần tử:

Mẫu 1

<html>
<body>
<h1 id="id01">Đầu tiên trang của tôi</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

Thử nghiệm ngay

Mẫu 2

<html>
<body>
<h1 id="id01">Đầu tiên trang của tôi</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

Thử nghiệm ngay

Mẫu 3

<html>
<body>
<h1 id="id01">Đầu tiên trang của tôi</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

Thử nghiệm ngay

InnerHTML

Trong hướng dẫn này, chúng ta sử dụng innerHTML Lấy lại nội dung của phần tử HTML.

Nhưng, học các phương pháp khác trên giúp hiểu cấu trúc cây và định hướng của DOM.

Nút gốc DOM

Có hai thuộc tính đặc biệt cho phép truy cập toàn bộ tài liệu:

  • document.body - Thân của tài liệu
  • document.documentElement - Toàn bộ tài liệu

thực例

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM rất hữu ích!</p>
<p> Ví dụ này minh họa thuộc tính <b>document.body</b> .</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

Thử nghiệm ngay

thực例

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM rất hữu ích!</p>
<p> Ví dụ này minh họa thuộc tính <b>document.documentElement</b> .</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

Thử nghiệm ngay

Thuộc tính nodeName

nodeName Thuộc tính xác định tên của phần tử.

  • Tên của thuộc tính là chỉ đọc
  • Tên của phần tử là tên thẻ
  • Tên của thuộc tính là tên của thuộc tính
  • Tên của phần tử văn bản luôn là #text
  • Tên của phần tử tài liệu luôn là #document

thực例

<h1 id="id01">Trang web đầu tiên của tôi</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

Thử nghiệm ngay

Chú ý:nodeName luôn chứa tên thẻ lớn của phần tử HTML.

Thuộc tính nodeValue

nodeValue Thuộc tính xác định giá trị của phần tử.

  • giá trị của thuộc tính nodeValue của phần tử là undefined
  • giá trị của thuộc tính nodeValue là văn bản
  • giá trị của thuộc tính nodeValue là giá trị của thuộc tính

Thuộc tính nodeType

Thuộc tính trả về loại của phần tử.Thuộc tính là chỉ đọc.

thực例

<h1 id="id01">Trang web đầu tiên của tôi</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

Thử nghiệm ngay

Tính chất nodeType quan trọng nhất là:

Nút Loại Ví dụ
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (đã bị hủy)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- Đây là ghi chú -->
DOCUMENT_NODE 9 Tài liệu HTML本身 (<html> của cha)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

Type 2 đã bị hủy trong HTML DOM. Chưa bị hủy trong XML DOM.