title: Can't understand how live HTMLCollection works
body: <p>I have  <code>&lt;ul class="container" id="container"&gt;&lt;/ul&gt;</code> where I conditionally add li elements. I create selector with - <code>cards: Array.from(document.getElementsByTagName('li'))</code>. So when a program starts selector is empty, because there are no li elements. The problem then is using the cards selector in other parts of my code. If I import it from my selectors file it just won't work. But if I create same selector in a function that needs cards, it works. As I understand getElementsByTagName should make updates automatically.</p>
  
  <blockquote>
    <p>The getElementsByTagName method of Document interface returns an HTMLCollection of elements with the given tag name. The complete document is searched, including the root node. The returned HTMLCollection is live, meaning that it updates itself automatically to stay in sync with the DOM tree without having to call document.getElementsByTagName() again.</p>
  </blockquote>
  
  <p>Question why imported selector won't work when the same selector declared in function that uses it works? It seems to me that I'm missing something.</p>
  
  <p>Code example: base.js</p>
  
  <pre><code>    export const elements = {
      cards: Array.from(document.getElementsByTagName('li')),
  ...
  }
  </code></pre>
  
  <p>deckview.js</p>
  
  <pre><code>import { elements } from './base'
  export const toggleClassOnClick = () =&gt; {
      // this works
      let cards = Array.from(document.getElementsByTagName('li'))
      // this won't work 
      // let cards = elements.cards
      cards.forEach(card =&gt; {
          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'
              }
          })
      })
  }
  </code></pre>