Làm việc với các mối quan hệ Node với Mã số với JavaScript - cây núm vú

Cây HTML DOM giống với cây gia đình trong mối quan hệ phân cấp giữa các nút. Trên thực tế, các thuật ngữ kỹ thuật được sử dụng bởi các lập trình viên JavaScript để mô tả các mối quan hệ giữa các nút trong cây lấy tên của họ từ các mối quan hệ gia đình.

Mỗi node, ngoại trừ nút gốc, có một parent.
Mỗi nút có thể có bất kỳ số trẻ nào.
Các nút có cùng cha mẹ là anh chị em ruột.

Vì các tài liệu HTML thường có nhiều phần tử cùng loại, DOM cho phép bạn truy cập vào các phần tử riêng biệt trong một danh sách nút sử dụng một số chỉ mục. Ví dụ, bạn có thể tham khảo phần tử

đầu tiên trong một tài liệu như p [0] và nút thứ hai

như p [1].

Mặc dù một danh sách nút có thể trông giống như một mảng, nhưng nó không phải. Bạn có thể lặp lại các nội dung của một danh sách nút, nhưng bạn không thể sử dụng các phương thức mảng trên danh sách nút.

Trong đoạn mã này, ba phần tử

là tất cả các phần tử của phần tử. Bởi vì họ có cùng cha mẹ, họ là anh chị em.

Gia đình HTML Đầu tiên

Thứ hai

Trong ví dụ trên, các chú thích HTML cũng là các con của phần tử phần. Nhận xét cuối cùng trước thẻ đóng phần được gọi là

đứa con cuối cùng của phần này.

Bằng cách hiểu mối quan hệ giữa các nút tài liệu, bạn có thể sử dụng cây DOM để tìm bất kỳ phần tử nào bên trong một tài liệu.

Đây là một tài liệu HTML có chứa một kịch bản mà xuất ra tất cả các nút con của phần tử phần.

Gia đình HTML

Đầu tiên

Thứ hai

Các nút trong phần tử phần
var myNodelist =

tài liệu. thân hình. childNodes [1]. childNodes; for (i = 0; i 
");} 
Đây là kết quả đầu ra của mã này trong trình duyệt. Lưu ý rằng nút con đầu tiên của phần tử phần là một nút văn bản. Nếu bạn quan sát chặt chẽ đánh dấu HTML, bạn sẽ thấy rằng có một khoảng cách giữa thẻ mở phần và nhận xét.Ngay cả một cái gì đó đơn giản như không gian đơn này tạo ra một nút toàn bộ trong cây DOM. Thực tế này cần được xem xét khi bạn đang điều hướng DOM bằng các mối quan hệ giữa các nút. 
Xem đầu ra của mã của bạn.

HTML DOM cũng cung cấp một vài từ khóa để điều hướng các nút bằng các vị trí tương đối so với anh chị em hoặc cha mẹ. Các thuộc tính tương ứng là

firstChild: Tham chiếu con đầu tiên của nút

lastChild: Tham chiếu con cuối cùng của nút

nextSibling: Tham khảo nút tiếp theo với cùng một nút cha
previousSibling: node với cùng một nút cha mẹ
Ví dụ này cho thấy cách bạn có thể sử dụng các thuộc tính tương đối này để đi qua DOM.
Iguanas Are No Fun function boldFirstAndLastNav () {tài liệu. thân hình. childNodes [1]. firstChild. Phong cách. fontWeight = "đậm"; tài liệu. thân hình. childNodes [1]. con cuối cùng. Phong cách. fontWeight = "bold";} Trang chủ |

href = "tại sao. html "> Tại sao Ếch không vui? | Những gì có thể được thực hiện? | Liên lạc với chúng tôi

Iguanas không vui khi ở xung quanh. Sử dụng liên kết ở trên để tìm hiểu thêm. 
boldFirstAndLastNav ();
Lưu ý rằng tất cả các khoảng cách phải được gỡ bỏ giữa các phần tử bên trong phần tử để cho thuộc tính firstChild và lastChild truy cập các phần tử chính xác mà bạn muốn chọn và kiểu.
Đây là tài liệu trông giống như khi xem trước trong trình duyệt. Lưu ý rằng chỉ những liên kết đầu tiên và cuối cùng trong điều hướng được in đậm.

Xem trước mã của bạn trong trình duyệt.

Đây là ví dụ sử dụng DOM để thực hiện thay đổi đối với các phần tử hiện có trong tài liệu. Phương pháp chọn các phần tử này gần như không bao giờ được sử dụng. Nó quá dễ mắc lỗi và quá khó để diễn giải và sử dụng.