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:

html<div id="elem"><!--com-->text<span>tag</span></div>

Lấy liên kết đến div này vào biến:

javascriptlet 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:

javascriptconsole.log(elem.firstChild);        // bình luận
console.log(elem.firstElementChild); // thẻ span