Sự khác biệt giữa các loại giả mảng trong JavaScript

Sự khác biệt giữa hai loại giả mảng nằm ở hành vi khác nhau khi các phần tử DOM thay đổi. Giả sử, ví dụ, chúng ta nhận được một tập hợp các đoạn văn dưới dạng HTMLCollection và dưới dạng NodeList. Sau đó, chúng ta tạo và thêm một đoạn văn khác vào DOM của chúng ta. Trong trường hợp này, nó sẽ tự động xuất hiện trong HTMLCollection, nhưng tập hợp NodeList sẽ vẫn không thay đổi.

Hãy xem xét một ví dụ. Giả sử chúng ta có một thẻ div, và bên trong nó là các đoạn văn. Hãy lấy thẻ div của chúng ta và các đoạn văn giống nhau dưới dạng các tập hợp thuộc hai loại khác nhau:

let parent = document.querySelector('div');
let elems1 = document.getElementsByTagName('p'); // HTMLCollection
let elems2 = document.querySelectorAll('p');     // NodeList

Thêm một đoạn văn khác vào thẻ div của chúng ta:

let p = document.createElement('p');
parent.append(p);

Kết quả là một trong các tập hợp sẽ thay đổi, còn tập hợp thứ hai - thì không:

console.log(elems1); // 4 đoạn văn - có đoạn mới
console.log(elems2); // 3 đoạn văn ban đầu

Hãy kiểm tra xem thuộc tính children sẽ hoạt động như thế nào khi thêm một phần tử mới.

Hãy kiểm tra xem thuộc tính childNodes sẽ hoạt động như thế nào khi thêm một phần tử mới.