vldvel

MutationRecord = {
  addedNodes : [], // NodeList
  attributeName : null, // attribute name - string or null
  attributeNamespace : null, // attribute namespace
  nextSibling : null, // next sibling in DOM
  oldValue : null, // old value
  previousSibling : null, // previous sibling in DOM
  removedNodes : [], // NodeList of removed nodes
  target : Element, // target element
  type : "childList" // mutation type one of childList, attributes or characterData

vldvel

const target1 = document; // correct

const target2 = document.body; // correct

const target3 = document.getElementById('blockId'); // correct

const target4 = window; // wrong

vldvel

// create subscriber
function subscriber (mutations) {
  mutations.forEach((mutation) => {
    console.log(mutation);
  });
}

// create observer
const observer = new MutationObserver(subscriber);

vldvel

function subscriber(mutations) {
  
  console.log(mutations);// [...]
  console.log(mutations.constructor);// Array
  
  mutations.forEach((mutation) => {
    console.log(mutation); // {...}
    console.log(mutation.constructor); // MutationRecord
  });
  

vldvel

// by default all false
// you can pick as many as you want, but at least one of - attributes, characterData, or childList
const observerConfig = {
  
  attributes: true, // attribute changes will be observed | on add/remove/change attributes
  attributeOldValue: true, // will show oldValue of attribute | on add/remove/change attributes | default: null
  
  characterData: true, // data changes will be observed | on add/remove/change characterData
  characterDataOldValue: true, // will show OldValue of characterData | on add/remove/change characterData | default: null
  

vldvel

// target element that we will observe
const target = document.body;

// config object
const config = {
  attributes: true,
  attributeOldValue: true,
  characterData: true,
  characterDataOldValue: true,
  childList: true,

vldvel

const offsetX = 10; // horizontal distance - any number
const offsetY = 10; // vertical distance - any number
const blurRadius = 20; // shadow blur - positive number - default = 0
const spreadRadius = 40; // shadow size - any number - deafult = 0
const color = 'rgba(255, 255, 199, 0.7)'; // color - rgb/rgba/hsl/hsla

// basic options
element0.style.boxShadow = `${offsetX}px ${offsetY}px ${color}`;

// full options

vldvel

function createNotification () {
  // first let's check browser support
  if (!('Notification' in window)) {
    throw new Error('Browser doesn\'t support notifications');
  }
  // now let's look whether permission is already granted or not
  switch (Notification.permission) {
    case 'granted': {
      return innerCreateNotification;
    }

vldvel

const notification = new Notification('Hello world!');

setTimeout(() => {
  notification.close();
}, 600);

vldvel

Notification.requestPermission();