Two way data binding DOM and vanilla Javascript in under 100 lines

bindForm.js

function dd(context = {}) {

  const values = {};
  const boundElms = {};

  const elms = Array.from(document.querySelectorAll('[data-bind]'));

  elms.forEach(el => {
    const prop = el.getAttribute('data-bind');
    if (!boundElms[prop]) boundElms[prop] = [];
    boundElms[prop].push(el);
    if ('value' in el) {
      el.addEventListener('input', () => {
        values[prop] = getDOMValue(el);
        updateDOM(prop);
      });
    }
  });

  Object.keys(boundElms).forEach(prop => {
    values[prop] = context[prop]; //initial value
    Object.defineProperty(context, prop, {
      get() {
        return values[prop];
      },
      set(newValue) {
        values[prop] = newValue;
        updateDOM(prop, newValue);
      },
      enumerable: true,
      configurable: true,
    });
    updateDOM(prop, values[prop]); //first update
  });

  function updateDOM(prop) {
    const value = values[prop];
    boundElms[prop].forEach(el => {
      if(el.type==='checkbox'){
        el.checked = value;
      }
      else if('value' in el){
        el.value = value;
      }
      else{
        el.textContent = value;
      }
    });
  }

  function getDOMValue(el){
    let value;
    if(el.type==='checkbox'){
        value = el.checked;
      }
      else if('value' in el){
        value = el.value;
      }
      else{
        value = el.textContent;
      }
      return value;
  }

  return context;
}