JavaScript how do i iterate over every current and future element in a HTMLcollection?

Question

An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.

im trying to write a simple script, for a website that often adds elements, that recolors those elements based on criteria.

now, i dont want to have a loop continusly running and checking for new elements, for performance reasons.

how would i use a live HTMLcollectio nand execute a function on every element in it, even the new ones added?

if i can accomplish this, it should result in a script that never finishes, and recolors all new elements.

any help appreciated!

Answer 1

I would use a MutationObserver to accomplish this task. It will watch a node for changes, and if needed it will watch the subtree for changes as well (which I don't think is needed here). As nodes get added, we can send the node to a function to apply some feature on it. In the example below we just randomly select a color and set the background.

let targetNode = document.getElementById('watch')

// Apply feature on the node
function colorNode(node) {
  let r = Math.floor(Math.random() * 255)
  let g = Math.floor(Math.random() * 255)
  let b = Math.floor(Math.random() * 255)
  node.style.background = `rgb(${r},${g},${b})`
}

// Watch the node for changes (you can watch the subTree if needed)
let observerOptions = {
  childList: true
}

// Create the callback for when the mutation gets triggered
let observer = new MutationObserver(mutationList => {
  // Loop over the mutations
  mutationList.forEach(mutation => {
    // For added nodes apply the color function
    mutation.addedNodes.forEach(node => {
      colorNode(node)
    })
  })
})

// Start watching the target with the configuration
observer.observe(targetNode, observerOptions)

/////////////////
/// Testing
/////////////////
// Apply the inital color
Array.from(targetNode.children).forEach(child => colorNode(child))

// Create nodes on an interval for testing
setInterval(() => {
  let newNode = document.createElement('div')
  // Some random text
  newNode.textContent = (Math.random() * 1000).toString(32)
  targetNode.appendChild(newNode)
}, 2000)

<div id="watch">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>