1const observer = new MutationObserver(list => {
2 console.log('mutation list', list);
3});
4observer.observe(document.body, {
5 attributes: true,
6 childList: true,
7 subtree: true
8});
9// perform any DOM change action in your page. e.g. show/hide/remove
1var targetNode = document.getElementById('myID');
2var config = { attributes: true };
3var observer = new MutationObserver(function (mutations) {
4 for (let mutation of mutations) {
5 if (targetNode.style.visibility == 'visible') {
6 document.getElementById('myID1').style.display = 'block';
7 document.getElementById('myID2').style.display = 'block';
8 }
9 else {
10 document.getElementById('myID1').style.display = 'none';
11 document.getElementById('myID2').style.display = 'none';
12 }
13 }
14});
15
16observer.observe(targetNode, config);
1let mList = document.getElementById('myList'),
2 options = {
3 childList: true,
4 attributes: true,
5 subtree: true
6 },
7 observer = new MutationObserver(mCallback);
8
9 function mCallback(mutations) {
10 for (let mutation of mutations) {
11 // If you remove a child from the container you are watching
12 if (mutation.type === 'childList') {
13 console.log('Mutation Detected: A child node has been added or removed.');
14 }
15 // If you use setAttribute to add a class or ID to an element
16 if (mutation.type === 'attributes') {
17 console.log('Mutation Detected: An attribute has been added or removed.');
18 }
19
20 if (mutation.type === 'subtree') {
21 console.log('Mutation Detected: A subtree has been added or removed.');
22 }
23 }
24 }
25
26observer.observe(mList, options);