I've been diving into the world of MutationObserve, and I've grasped most of it. However, one thing that's puzzling me is why the parameter requires an array.
According to the documentation:
An array of MutationRecord objects, detailing each change that took place;
I'm looking for an example where mutationRecordList.length > 1
<h2 id="testNode" onclick="addTimeNode(this)">Click me!</h2>
<script>
function addTimeNode(node) {
const nodeP = document.createElement("p")
const today = new Date()
nodeP.innerText = [today.getHours(), today.getMinutes(), today.getSeconds()].join(":")
node.append(nodeP)
}
(
() => {
window.onload = () => {
const observer = new MutationObserver((mutationRecordList, observer)=>{
if (mutationRecordList.length > 1){
console.log("Thanks. This is what I want!") // 👈
}
console.log(observer.name)
for(const mutation of mutationRecordList) {
const target = mutation.target
switch(mutation.type) {
case "childList":
console.log('A child node has been added or removed.')
break
}
if (target.childNodes.length > 2) {
observer.disconnect()
console.log('disconnect observer')
}
}
})
observer.name = "test observer"
observer.observe(document.getElementById('testNode'), {
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe#parameters
childList: true,
})
}
}
)()
</script>