JavaScript, как мне перебрать каждый текущий и будущий элемент в HTMLcollection?

Question

Коллекция HTMLC в HTML DOM активна;он автоматически обновляется при изменении базового документа.

Я пытаюсь написать простой скрипт для сайта, который часто добавляет элементы, которые перекрашивают эти элементы на основе критериев.

теперь я не хочу, чтобы цикл постоянно работал и проверял наличие новых элементов по соображениям производительности.

как бы я использовал живую HTML-коллекцию и выполнял функцию для каждого элемента в ней, даже для добавления новых?

Если я смогу это сделать, то должен получиться скрипт, который никогда не завершится и перекрасит все новые элементы.

любая помощь приветствуется!

Answer 1

Я бы использовал MutationObserver для выполнения этой задачи.Он будет следить за изменениями в узле, а при необходимости он будет также следить за изменениями в поддереве (что, я думаю, здесь не нужно).Когда узлы добавляются, мы можем отправить узел в функцию, чтобы применить к ней некоторую функцию.В приведенном ниже примере мы просто случайным образом выбираем цвет и устанавливаем фон.

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>