Stringify DOM nodes using JSON (and revive again)

dom-to-json.js

// 25 July 2018
// forked from https://gist.github.com/sstur/7379870
// modified:
// + reduce key assignment logic
// + eliminate accidental globals
// + use attr.name, attr.value, instead of attr[0], attr[1]
// + add a couple tests at the end.

function toJSON(node) {
  node = node || this;
  
  var obj = {
    nodeType: node.nodeType,
    
    // modified - assign everything here
    tagName: (node.tagName || '').toLowerCase(),
    nodeName: node.nodeName,
    nodeValue: node.nodeValue
  };
  
  /*
  if (node.tagName) {
    obj.tagName = node.tagName.toLowerCase();
  }
  else if (node.nodeName) {
    obj.nodeName = node.nodeName;
  }
  
  if (node.nodeValue) {
    obj.nodeValue = node.nodeValue;
  }
  */
  
  var attrs = node.attributes;  
  if (attrs) {
    // modified
    //var length = attrs.length;
    //var arr = obj.attributes = [];//new Array(length);
    for (var attr, length = attrs.length, arr = obj.attributes = [], i = 0; i < length; i++) {
      attr = attrs[i];
      // modified - attribute as { name, value }
      //arr[attr.nodeName] = attr.nodeValue;
      arr[i] = { name: attr.nodeName, value: attr.nodeValue };      
    }
  }
  
  var childNodes = node.childNodes;
  if (childNodes) {
    // modified
    //length = childNodes.length;
    //arr = obj.childNodes = [];// new Array(length);
    for (var length = childNodes.length, arr = obj.childNodes = [], i = 0; i < length; i++) {
      arr[i] = toJSON(childNodes[i]);
    }
  }
  
  return obj;
}

function toDOM(obj) {
  if (typeof obj == 'string') {
    obj = JSON.parse(obj);
  }
  
  var node, nodeType = obj.nodeType;
  
  switch (nodeType) {
    case 1: //ELEMENT_NODE
      node = document.createElement(obj.tagName);
      // modified 
      //var attributes = obj.attributes || [];
      // modified
      for (var attr, attributes = obj.attributes || [], i = 0, len = attributes.length; i < len; i++) {
        // modified
        //var attr = attributes[i];
        attr = attributes[i];
        // modified
        //node.setAttribute(attr[0], attr[1]);
        node.setAttribute(attr.name, attr.value);
      }
      break;
    case 3: //TEXT_NODE
      node = document.createTextNode(obj.nodeValue);
      break;
    case 8: //COMMENT_NODE
      node = document.createComment(obj.nodeValue);
      break;
    case 9: //DOCUMENT_NODE
      node = document.implementation.createDocument();
      break;
    case 10: //DOCUMENT_TYPE_NODE
      node = document.implementation.createDocumentType(obj.nodeName);
      break;
    case 11: //DOCUMENT_FRAGMENT_NODE
      node = document.createDocumentFragment();
      break;
    default:
      return node;
  }
  
  if (nodeType == 1 || nodeType == 11) {
    // modified
    //var childNodes = obj.childNodes || [];
    // modified
    for (var childNodes = obj.childNodes || [], i = 0, len = childNodes.length; i < len; i++) {
      node.appendChild(toDOM(childNodes[i]));
    }
  }
  
  return node;
}


var test = document.createElement('div');
test.setAttribute('onchange', function(e) { console.log(e.target.tagName); });
test.innerHTML = `
<ul class="signal" data-lamp="stop">
  <li data-stop></li>
  <li data-slow></li>
  <li data-go></li>
</ul>
`;

var attr = test.firstElementChild.attributes[0];
for ( var n in attr) {
  console.log(n, attr[n])
}

console.log(toJSON(test));
console.warn(toDOM( toJSON(test) ));