无法理解实时 HTMLCollection 的工作原理

Question

我有<ul class="container" id="container"></ul>我有条件地添加 li 元素。 我使用cards: Array.from(document.getElementsByTagName('li'))创建选择器。 所以当程序启动时选择器是空的，因为没有 li 元素。 然后问题是在我的代码的其他部分使用卡片选择器。 如果我从我的选择器文件中导入它，它将无法正常工作。 但是，如果我在需要卡片的 function 中创建相同的选择器，它就可以工作。 据我了解 getElementsByTagName 应该自动进行更新。

Document 接口的 getElementsByTagName 方法返回具有给定标签名称的元素的 HTMLCollection。 搜索完整的文档，包括根节点。 返回的 HTMLCollection 是实时的，这意味着它会自动更新以与 DOM 树保持同步，而无需再次调用 document.getElementsByTagName()。

问题为什么当使用它的 function 中声明的相同选择器起作用时，导入的选择器不起作用？ 在我看来，我错过了一些东西。

代码示例：base.js

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

甲板视图.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>