Scrape(General|Single): Investigate Element Layers - Snippet Editor - Jeremyb.me

Portfolio Blog Snippets

Save Snippet View Snippet

(() =>{
var getAttributes = (el) => {
	if(typeof el == "object"){
		var atts = [];
		for (var att of el.attributes){
			atts.push(JSON.parse(JSON.stringify({[att.name]:att.value})))
		}
		return atts;
	}else{ return []};
};

[...document.querySelectorAll("*")].forEach(el => {
	
		if(el.style.display !== "none"){
			el.style.removeProperty('background');
			el.style.background = `rgba(255, 89, 0,0.2)`;
    	el.style.opacity = 0.98;
      el.style.outline = "2px solid red";
			el.style.outlineOffset = "-2px";
			if(el.nodeName == "IMG"){
				el.style.opacity = 0.2;
			}
		}
})

var colorMap = {
	mouseover:{
		background:`rgba(100, 255, 100,0.2)`,
		opacity:0.9,
		outline:`2px solid green`
	},
	mouseout:{
		background:`rgba(255, 89, 0,0.1)`,
		opacity:0.98,
		outline:`1px solid red`
	}
}
function processEvent(e){
  e.preventDefault();
	var target = e.target;
	//var target = e.target.parentElement;
	var type = e.type;
	var className = target.className ? "."+target.className : false;
	try{
	var selector = `${className || target.nodeName}`;
	var similarElements = document.querySelectorAll(selector);
	if(similarElements){
		for (var sel of similarElements){
			  sel.style.background = colorMap[type].background;
  			
  			sel.style.outline = colorMap[type].outline;
        sel.style.opacity = type != "mouseover" ?
					0.2 : colorMap[e.type].opacity;
		}
	}
	}catch(err){
		console.log({err,e})
	}
}

window.onmouseover = processEvent;
window.onmouseout = processEvent;
window.onclick = (e) => {
	e.preventDefault();
	var target = e.target;
	//var target = e.target.parentElement;
	var className = target.className ? "."+(target.className.split(" ").join(", .")) : false;
	try{
		var selector = `${className || target.nodeName}`;
		var collection = [...document.querySelectorAll(selector)].map((sel,index) => {
    var parent = sel.parentElement ? sel.parentElement : false;
		return {
			index,
			nodeName:sel.nodeName,
			siblingsCount:parent ? parent.childElementCount : "",
			parentNodeName: parent ? parent.nodeName : "",
			parentid:parent ? parent.id ? parent.id : "" : "",
			parentClassName:parent ? parent.className ? parent.className : "" : "",
			childCount:sel.childElementCount,
			value: sel.value ? sel.value : "",
			text:sel.innerText ? sel.innerText.replace(/[\s\n\r\t]+/gim," ").trim() : "",
			...getAttributes(sel).reduce((obj,d) => {
				return {...obj, ...d}
			},{})
		}
	}).map(d => {
		delete d.style
		return d;
	})
	console.log({collection})
	}catch(err){console.log({err})}

}

})()