Tự học JQuery - Traversing - Bài 1 - 01 số khái niệm

Xem Mục lục lập trình JQuery

Query Traversing là gì?

Nghĩa là "duyệt qua", hoặc "tìm kiếm" (chọn lựa) các phần tử HTML dựa trên mối quan hệ giữa chúng với các phần tử khác.

Bắt đầu từ 01 phần tử đã chọn và duyệt đến khi tìm thấy phần tử bạn muốn.

Tấm hình dưới đây mô tả 01 cây các phần tử HTML.

Với jQuery duyệt cây, bạn có thể dễ dàng di chuyển lên (các nốt cha), xuống (các nốt cháu chẳt) và các nhánh bên cạnh (các nốt anh em) trong cây phần tử, bắt đầu từ phần tử được chọn lựa (hiện hành).

Sự dịch chuyển này gọi là duyệt cây trong cấu trúc DOM.

Giải thích:

• Phần tử <div> là cha của <ul>, và là tổ tiên của tất cả phần tử khác mà nó chứa bên trong.
• Phần tử <ul> là cha của cả 02 phần tử <li>, và là con của <div>
• Phầ tử <li> bên trái là cha của <span>,con của <ul> và là cháu chắt của <div>
• Phần tử <span> là con của phần tử <li> bên trái và là cháu chắt của thẻ <ul> và thẻ <div>
• Cả 02 thẻ <li> là phần tử anh em (vì chúng có cùng cha)
• Thẻ <li> bên phải là cha của thẻ <b>, con của <ul> và là cháu chắt của thẻ <div>
• Thẻ <b> con của thẻ <li> bên phải và là cháu chắt của <ul> và <div>

01 phần tử tổ tiên là 01 phần tử cha mẹ, ông bà, ông bà cố v.v.
01 phần tử cháu chắt là 01 phần tử con, cháu, chắt, v.v.
Phần tử anh em là các phần tử có cùng cha mẹ.

---

Duyệt cấu trúc DOM

jQuery cung cấp rất nhiều phương thức cho chúng ta duyệt cấu trúc DOM.

Trong đó chủ yếu là các hàm duyệt cấu trúc cây.

Chương tiếp theo sẽ cho chúng ta biết cách duyệt lên, xuống, và ngang trong cấu trúc cây DOM.

By #drM