Làm việc với các nút trong JavaScript
Như bạn đã biết, các thẻ có thể chứa các thẻ khác hoặc, nói theo thuật ngữ JavaScript, các phần tử DOM có thể chứa các phần tử DOM khác. Ngoài ra, tuy nhiên, trong chúng có thể có các bình luận và văn bản thông thường. Bình luận, văn bản và phần tử DOM được hợp nhất dưới một tên gọi - các nút.
Bạn đã quen thuộc với các thuộc tính firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Các thuộc tính này làm việc chính xác với các phần tử DOM,
bỏ qua các nút còn lại. Theo quy tắc, chính
điều này chúng ta cần.
Tuy nhiên, cũng tồn tại các thuộc tính firstChild,
lastChild, nextSibling, previousSibling.
Các thuộc tính này hoạt động theo cách tương tự,
tuy nhiên, tính đến tất cả các nút. Hãy xem
sự khác biệt giữa các thuộc tính này qua ví dụ.
Giả sử chúng ta có một div, chứa trong nó ba nút:
<div id="elem"><!--com-->text<span>tag</span></div>
Lấy liên kết đến div này vào biến:
let elem = document.querySelector('#elem');
Và bây giờ hãy xem, cái gì được chứa
trong các thuộc tính firstChild và firstElementChild:
console.log(elem.firstChild); // bình luận
console.log(elem.firstElementChild); // thẻ span
Viết mã, nó sẽ hiển thị sự khác biệt giữa
lastChild và lastElementChild.
Viết mã, nó sẽ hiển thị sự khác biệt giữa
nextSibling và nextElementSibling.
Viết mã, nó sẽ hiển thị sự khác biệt giữa
previousSibling và previousElementSibling.
