無法理解實時 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>