Mutation Observer

MutationObserver.js

// <ul class="frontend">
//     <li>HTML5</li>
//     <li>CSS3</li>
//     <li>Bootstrap</li>
//     <li>JavaScript</li>
//     <li>jQuery</li>
//     <li>react.js</li>
// </ul>

let myList = document.querySelector('.frontend')
const observer = new MutationObserver(mutations => {
    mutations.forEach(record => {
        // console.log(record)
        if(record.type === 'attributes'){
            console.log('changes on attributes', record.attributeName)
        }

        if(record.addedNodes.length > 0){
            console.log(`Nodes Added : ${record.addedNodes.length}`)
        }

        if(record.removedNodes.length > 0){
            console.log(`Nodes removed : ${record.removedNodes.length}`)
        }


    })
});

observer.observe(myList, {
    attributes: true,
    childList: true
})

setTimeout(() => {

    myList.setAttribute('id', 'dev')

    myList.removeChild(myList.firstElementChild)

    const newLi = document.createElement('li')
    newLi.textContent = 'Vue.js'
    myList.appendChild(newLi)

    myList.firstElementChild.textContent = "HTML6"

}, 2000)