title: How do HTMLCollections work? Can I create my own HTMLCollection?
body: <p>I'm working on javascript serialization library that will allow me to serialize parts of DOM. In DOM operations, we often use HTMLCollections. Now HTMLCollection isn't just an ordinary array:</p>
  
  <pre><code>var collection = document.getElementsByTagName("p");
  console.log(collection.length);
  document.body.appendChild(document.createElement("p"));
  console.log(collection.length);
  </code></pre>
  
  <p>This outputs:</p>
  
  <p><img src="https://i.stack.imgur.com/NPF4t.png" alt="image description"></p>
  
  <p>Obviously not an ordinary array. Obviously, it's a matching rule on dom element that updates the list every time element child node list changes. On that, I have two questions:</p>
  
  <ol>
  <li>Can I reliably serialize <code>HTMLCollection</code> not as a list of elements, but as a <strong>matching rule it represents</strong>?</li>
  <li>Can I create <code>HTMLCollection</code> that <strong>is instance</strong> of <code>HTMLCollection</code> and follows my <strong>own matching rule</strong>, without having to re-implement the algorithm that decides when to re-update the list?</li>
  </ol>