Skip to content

Instantly share code, notes, and snippets.

@peinguin
Created May 21, 2015 11:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peinguin/33d7d2e84f62be741f85 to your computer and use it in GitHub Desktop.
Save peinguin/33d7d2e84f62be741f85 to your computer and use it in GitHub Desktop.
Select element
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;
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment