Select element

elementSelector.js

 document.addEventListener('click', function (e) {
  var selectors = [];
  for (var i in e.path) {
    var el = e.path[i];
    var attributes = '';
    if (el.attributes) {
      var attributes = Array.prototype.map.call(
	el.attributes, 
	function(attr) {
	  if (attr.nodeName.match(/^data-/)) {
	    return '';
	  }
	  return ['[',attr.nodeName, '="', attr.nodeValue.split('"').join('\\"'), '"]'].join('');
	})
	.join('');
    }
    if (el.nodeName && el.nodeName.length > 0 && el.nodeName !== '#document') {
      selectors.push([el.nodeName, attributes].join(''));
    }
  }
  hightlight(selectors.reverse());
});

var hightlight = function(path) {
  var prev = null
    , red = 100
  ;
  path.forEach(function(curr, index) {
    var els = null
      , el = null
      , selector = path.slice(0, path.length + 1 - parseInt(index)).join(' ')
    ;
    try {
      els = document.querySelectorAll(selector);
    }
    catch (e) {
      console.log(e.message);
    }
    if (!els || els.length === 0) {
      return false;
    }
    if (prev) {
      el = Array.prototype.filter.call(els, function(e) {
	return !~Array.prototype.indexOf.call(e.children, prev);
      })
	.pop();
    }
    else{
      el = els[0];
    }
    if (el) {
      prev = el;
      el.style.backgroundColor = 'rgba(' + red + ', 100, 0, 0.3)';
      el.style.border = '2px solid rgba(' + red + ', 100, 100, 0.8)';
      red += 10;
      red %= 255;
    }
  });
}