Cây DOM (Document Object Model)

Các phần tử trong trang HTML được tổ chức theo dạng cây gọi là cây DOM. Mối quan hệ giữa các phần tử cũng được thể hiện qua cây DOM. Xét ví dụ đoạn mã HTML sau:


<div>

  <ul>

     <li><b>Đề mục thứ nhất</b></li>

     <li><span>Đề mục thứ hai</span></li>

   </ul>

</div>

Đoạn mã HTML trên có thể tổ chức theo dạng cây như sau:

Mối quan hệ giữa các phần tử có thể mô tả như sau:

div là cha (parent) của ul và là tổ tiên (ancestor) của tất cả các phần tử trong nó.
ul là cha (parent) của hai phần tử li, và là con (child) của div.
li bên trái là cha (parent) của span, là con (child) của ul, và là cháu hay hậu duệ (descendant) của div.
li bên phải là cha (parent) của b, là con (child) của ul, và là cháu hay hậu duệ (descendant) của div.
span là con (child) của li trái, là hậu duệ (descendant) của ul và div.
b là con (child) của li phải, là hậu duệ (descendant) của ul và div.
hai li là anh em (siblings).