Skip to content

Instantly share code, notes, and snippets.

@bbuck
Last active November 28, 2018 10:15
Show Gist options
  • Save bbuck/7340804 to your computer and use it in GitHub Desktop.
Save bbuck/7340804 to your computer and use it in GitHub Desktop.
Evaluate DOM Structure quickly by injecting this JS class into a page and create a new instance on the parent element. Feel free to extend / etc.
body#gsr.hp.vasq
div#viewport.ctr-p
div#pocs
div#pocs0
span
span
a
div#pocs1
span
div#pocs2
div#cst
div
a
textarea#csi
script
div#mngb
div#gb.gb_ub.gb_zb.gb_Ua
div.gb_cb.gb_yb
div.gb_ba.gb_yb.gb_g.gb_xb.gb_zb
div.gb_sb.gb_g.gb_yb
div.gb_f.gb_g.gb_h.gb_yb
a.gb_c.gb_g
div.gb_f.gb_g
a.gb_c
div.gb_f.gb_g
a.gb_c
div.gb_rb.gb_yb.gb_g
div#gbsfw.gb_o
iframe#gbsf
div#gbwa.gb_m.gb_ya.gb_g
div.gb_wa
a.gb_n.gb_d
div.gb_I
div.gb_H
div.gb_o.gb_y
ul.gb_q.gb_t
li.gb_a
a#gb119.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb1.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb36.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb8.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb78.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb5.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb23.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb25.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb24.gb_b
span.gb_d
span.gb_e
a.gb_r.gb_kb
ul.gb_q.gb_jb
li.gb_a
a#gb51.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb10.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb172.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb212.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb6.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb30.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb27.gb_b
span.gb_d
span.gb_e
li.gb_a
a#gb31.gb_b
span.gb_d
span.gb_e
a.gb_s.evenMoreLink
div.gb_va.gb_ya.gb_g.gb_qa.gb_oa
div.gb_wa
a.gb_n
div.gb_xa.gb_d
div.gb_pa
div.gb_ra.gb_sa
div.gb_I
div.gb_H
div.gb_o
div.gb_7a.gb_ya.gb_g
div.gb_wa
a.gb_n.gb_d
div.gb_8a.gb_d
div.gb_ab.gb_d
div.gb_9a
div.gb_I
div.gb_H
div.gb_o
div.gb_9.gb_ya.gb_yb.gb_g
div.gb_wa.gb_aa.gb_yb.gb_g
a.gb_n.gb_K.gb_g.gb_E
div.gb_I
div.gb_H
div.gb_o
div.gb_N
a.gb_O.gb_kb
img.gb_Q
span.gb_R
div.gb_P
div.gb_S
div.gb_T
div.gb_M
a
a
a.gb_fb.gbp1.gb_A
div.gb_Z
a.gb_0.gb_1
img.gb_3
div.gb_4
div.gb_5
div.gb_6
a.gb_0
img.gb_3
div.gb_4
div.gb_5
div.gb_6
a.gb_0
img.gb_3
div.gb_4
div.gb_5
div.gb_6
a.gb_7.gb_db
span.gb_8.gb_d
div.gb_U
div
a.gb_A
div
a#gb_71.gb_gb.gb_nb.gb_A
div#gbq1.gb_da.gb_g.gbqfh
div.gb_ea
a.gb_hb.gb_ga
span.gb_d
div.gb_g.gb_Ta
div#gbq
div#gbq2.gbt.gbqfh
div#gbqfw
form#gbqf.gb_mb
fieldset.gbxx
legend.gbxx
div#gbqffd
input
input
fieldset#gbqff.gbqff.gb_g
legend.gbxx
div#gbfwa.gbqfwa
div#gbqfqw.gbqfqw
div#gbqfqwb.gbqfqwc
table#gs_id0.gstl_0.lst-t
tbody
tr
td#gs_ttc0
td#gs_tti0.gsib_a
div#gs_lc0
input#gbqfq.gbqfif
div#gs_sc0.gbqfif
input#gs_taif0.gbqfif
input#gs_htif0.gbqfif
td.gsib_b
div#gs_st0.gsst_b
a.gsst_a
span#gsri_ok0.gsri_a.gsst_e
div#gbqfbw.gb_g.gb_lb
button#gbqfb.gbqfb
span.gbqfi.gb_d
div#gbqfbwa.jsb
button#gbqfba.gbqfba
span#gbqfsa
button#gbqfbb.gbqfba
span#gbqfsb
div.gbqfba.gbqfba-hvr
div
div
span
div
span
div
span
div
span
div
span
div
span
div
span
div
span
input
input
input
div#gbw
div#gba
div#iflved
textarea#wgjc
textarea#wgjs
textarea#wgju
textarea#hcache
div#main.content
span#body.ctr-p
center
div#lga
img#hplogo
div
div#prm-pt
br
script
div#footer.ctr-p
span
div#footcnt
style
style
style
div#fbar.fhp.fbard
div.fbar
span#fsr
a.fblf
span
span
style
a#fsettl.fbl
span#fsett
a
span#advsl
a
a
a
a#fblqf
span#fsl
a.fblf
a.fbl
a.fbl
script
script#ecs
div#xjsd
script
script
div#xjsi
script
style#_css0
script
script
table.gstl_0.gssb_c
tbody
tr
td.gssb_f
td.gssb_e
style
// Created by Brandon Buck
// Placed into Public Domain
class Structure {
constructor(from, options = {}) {
this.options = Object.assign({}, Structure.defaultOptions, options);
this.fromEl = from;
this.structure = [];
this.process(this.fromEl);
}
process(fromEl, level = 1) {
let el;
const styles = [];
if (fromEl.nodeName) {
el = fromEl;
} else if (typeof fromEl === 'string') {
el = document.querySelector(fromEl);
}
if (this.options.styles.length > 0) {
this.options.styles.forEach((style) => {
const value = el.style[style];
if (typeof value === 'string' && value.length > 0) {
styles.push(style + '=' + value);
}
});
}
let styleStr = styles.join(', ');
if (styleStr.length > 0) {
styleStr = '{ ' + styleStr + ' }';
}
this.structure.push(this.spaces(level) + this.getNodeName(el) + styleStr);
Array.from(el.children).forEach((child) => this.process(child, level + 1));
}
getNodeName(el) {
const name = [];
const id = el.id;
name.push(el.nodeName.toLowerCase());
if (id.length > 0) {
name.push('#' + id);
}
Array.from(el.classList).forEach(className => name.push('.' + className));
return name.join('');
}
spaces(level) {
return Array(level).join(this.options.spaces);
}
toString() {
return this.structure.join('\n');
}
}
Structure.defaultOptions = {
spaces: ' ',
styles: [],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment