mutation observer js
const observer = new MutationObserver(list => {
console.log('mutation list', list);
});
observer.observe(document.body, {
attributes: true,
childList: true,
subtree: true
});
// perform any DOM change action in your page. e.g. show/hide/removemutationobserver js
var targetNode = document.getElementById('myID');
var config = { attributes: true };
var observer = new MutationObserver(function (mutations) {
for (let mutation of mutations) {
if (targetNode.style.visibility == 'visible') {
document.getElementById('myID1').style.display = 'block';
document.getElementById('myID2').style.display = 'block';
}
else {
document.getElementById('myID1').style.display = 'none';
document.getElementById('myID2').style.display = 'none';
}
}
});
observer.observe(targetNode, config);How to write a mutation observer js
let mList = document.getElementById('myList'),
options = {
childList: true,
attributes: true,
subtree: true
},
observer = new MutationObserver(mCallback);
function mCallback(mutations) {
for (let mutation of mutations) {
// If you remove a child from the container you are watching
if (mutation.type === 'childList') {
console.log('Mutation Detected: A child node has been added or removed.');
}
// If you use setAttribute to add a class or ID to an element
if (mutation.type === 'attributes') {
console.log('Mutation Detected: An attribute has been added or removed.');
}
if (mutation.type === 'subtree') {
console.log('Mutation Detected: A subtree has been added or removed.');
}
}
}
observer.observe(mList, options);Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
