JavaScript如何迭代HTML集合中的每个当前和未来元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (116)

HTML DOM中的HTMLCollection是实时的; 更改基础文档时会自动更新,试图为一个经常添加元素的网站编写一个简单的脚本,根据标准重新定制这些元素。

现在,出于性能原因,我不想让循环连续运行并检查新元素。

我将如何使用实时HTMLcollectio并在其中的每个元素上执行一个函数,甚至添加新的元素?

如果我能做到这一点,它应该导致一个永远不会完成的脚本,并重新生成所有新元素。

提问于
用户回答回答于

会使用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>

扫码关注云+社区

领取腾讯云代金券