Не могу понять, как работает HTMLCollection

Question

У меня есть <ul class="container" id="container"></ul>, где я условно добавляю элементы li. Я создаю селектор с - cards: Array.from(document.getElementsByTagName('li')). Поэтому, когда программа запускается, селектор пуст, потому что там нет элементов li. Тогда проблема заключается в использовании селектора карт в других частях моего кода. Если я импортирую его из файла селекторов, он просто не будет работать. Но если я создаю тот же селектор в функции, которая нуждается в картах, это работает. Как я понимаю, getElementsByTagName должен выполнять обновления автоматически.

Метод getElementsByTagName интерфейса Document возвращает HTMLCollection элементов с данным именем тега. Поиск по всему документу, включая узел root. Возвращенная коллекция HTMLCollection является действующей, что означает, что она автоматически обновляется, чтобы оставаться в синхронизации c с деревом DOM без необходимости повторного вызова document.getElementsByTagName ().

Вопрос, почему импортированный селектор не будет работать, когда тот же селектор, объявленный в функции, которая его использует, работает? Мне кажется, что я что-то упускаю.

Пример кода: base. js

    export const elements = {
    cards: Array.from(document.getElementsByTagName('li')),
...
}

deckview. js

import { elements } from './base'
export const toggleClassOnClick = () => {
    // this works
    let cards = Array.from(document.getElementsByTagName('li'))
    // this won't work 
    // let cards = elements.cards
    cards.forEach(card => {
        card.addEventListener('click', function() {
            card.classList.value === 'card'
                ? card.classList.add('is-flipped')
                : card.classList.remove('is-flipped')

            // disabling ability to press on the opened card
            if (card.classList.value === 'card is-flipped') {
                card.style.pointerEvents = 'none'
            }
        })
    })
}

Answer 1

document.getElementsByTagName('li') вернет живую коллекцию, но Array.from возьмет из нее данные и создаст обычный массив. Массив - это просто массив, он не живой.

const lis = document.getElementsByTagName('li');
const array = Array.from(lis);
console.log("Before: ", lis.length, array.length);
const li = document.createElement("li");
li.textContent = "Goodbye";
document.querySelector("ul").appendChild(li);
console.log("After: ", lis.length, array.length);

<ul><li>Hello</li></ul>