Thread:Silver Mage/@comment-27105226-20160614233832

I needed to look at a massive site's HTML Layout last night and decided to write a quick Javascript tool for pulling the Tree structure. It basically opens a popup window which displays elements, classes, and ids. No formatting or less-useful information, so results are easy to copy, paste, and manipulate. Full Source Code

Random Wikipedia Page's Output
HTML Tree Layout: .mediawiki.ltr.sitedir-ltr.ns-0.ns-subject.page-Descent_Cliff.rootpage-Descent_Cliff.skin-vector.action-view : .noprint #mw-page-base : .noprint #mw-head-base : .mw-body #content : : #top : : #siteNotice : : : #centralNotice : : .mw-indicators : : .firstHeading #firstHeading : : .mw-body-content #bodyContent : : : #siteSub : : : #contentSub : : : .mw-jump #jump-to-nav : : : : : : : : : : : .mw-content-ltr #mw-content-text : : : : .metadata.plainlinks.ambox.ambox-style.ambox-Orphan : : : : :  : : : : : :   : : : : : : : .mbox-image : : : : : : : :  : : : : : : : : : .image : : : : : : : : : :  : : : : : : : .mbox-text : : : : : : : : .mbox-text-span : : : : : : : : : : : : : : : : : : : : : : : : : : : : : .external.text : : : : : : : : : : : : : : : : : : .plainlinks : : : : : : : : : : .external.text : : : : : : : : : .external.text : : : : : : : : :  : : : : : : : : : : : : : :  : : : : : : : : : : .plainlinks.nourlexpansion : : : : : :  : : : : : : :   : : : : : : : :   : : : : : : : : : .wmamapbutton.noprint : : : : : : : .external.text : : : : : : : : .geo-default : : : : : : : : : .geo-dms : : : : : : : : : : .latitude : : : : : : : : : : .longitude : : : : : : : : .geo-multi-punct : : : : : : : : .geo-nondefault : : : : : : : : : .geo-dec : : : : : : : : :  : : : : : : : : : : .geo : : : : :  : : : : : :  #coordinates : : : : : : : : : : : : : : .plainlinks.nourlexpansion : : : : : : : :  : : : : : : : : : .wmamapbutton.noprint : : : : : : : : : .external.text : : : : : : : : : : .geo-default : : : : : : : : : : : .geo-dms : : : : : : : : : : : : .latitude : : : : : : : : : : : : .longitude : : : : : : : : : : .geo-multi-punct : : : : : : : : : : .geo-nondefault : : : : : : : : : : : .geo-dec : : : : : : : : : : :  : : : : : : : : : : : : .geo : : : : : : : : : :<a> : : : : :<a> .mw-redirect : : : : :<a> : : : : :<a> .mw-redirect : : : : :<a> : : : : : .reference #cite_ref-gnis_1-0 : : : : : :<a> : : : :  : : : : : .mw-headline #References : : : : : .mw-editsection : : : : : : .mw-editsection-bracket : : : : : :<a> : : : : : : .mw-editsection-bracket : : : : .reflist : : : : :<ol> .references : : : : : :<li> #cite_note-gnis-1 : : : : : : : .mw-cite-backlink : : : : : : : :<b> : : : : : : : : :<a> : : : : : : : : : : .cite-accessibility-label : : : : : : : .reference-text : : : : : : : : .citation.web : : : : : : : : :<a> .external.text : : : : : : : : :<i> : : : : : : : : : :<a> : : : : : : : : :<a> : : : : : : : : : .reference-accessdate : : : : : : : : : : .nowrap : : : : : : : : .Z3988 : : : : : : : : :  : : : :   : : : : :   : : : : :<a> : : : : :<a> : : : : :<a> .external.text : : : : :<a> : : : :  : : : : :   : : : : .metadata.plainlinks.stub : : : : :  : : : : : :   : : : : : : :   : : : : : : : :<a> .image : : : : : : : : :  : : : : : : :   : : : : : : : :<i> : : : : : : : : :<a> : : : : : : : : :<a> : : : : : : : : :<a> .external.text : : : : : : : : .plainlinks.hlist.navbar.mini : : : : : : : : :<ul> : : : : : : : : : :<li> .nv-view : : : : : : : : : : :<a> : : : : : : : : : : : :  : : : : : : : : : :<li> .nv-talk : : : : : : : : : : :<a> : : : : : : : : : : : :  : : : : : : : : : :<li> .nv-edit : : : : : : : : : : :<a> .external.text : : : : : : : : : : : :  : : : .printfooter : : : :<a> : : : .catlinks #catlinks : : : : .mw-normal-catlinks #mw-normal-catlinks : : : : :<a> : : : : :<ul> : : : : : :<li> : : : : : : :<a> : : : : : :<li> : : : : : : :<a> : : : : .mw-hidden-catlinks.mw-hidden-cats-user-shown #mw-hidden-catlinks : : : : :<ul> : : : : : :<li> : : : : : : :<a> : : : : : :<li> : : : : : : :<a> : : : : : :<li> : : : : : : :<a> : : : : : :<li> : : : : : : :<a> : : : : : :<li> : : : : : : :<a> : : : .visualClear : #mw-navigation : :  : :  #mw-head : : : #p-personal : : : : #p-personal-label : : : :<ul> : : : : :<li> #pt-userpage : : : : : :<a> : : : : :<li> #pt-notifications-alert : : : : : :<a> .mw-echo-notifications-badge.mw-echo-notification-badge-nojs.oo-ui-image-invert.oo-ui-iconElement.oo-ui-iconElement-icon.oo-ui-icon-bell : : : : :<li> #pt-notifications-message : : : : : :<a> .mw-echo-notifications-badge.mw-echo-notification-badge-nojs.oo-ui-image-invert.oo-ui-iconElement.oo-ui-iconElement-icon.oo-ui-icon-speechBubbles : : : : :<li> #pt-mytalk : : : : : :<a> .new : : : : :<li> #pt-sandbox : : : : : :<a> .new : : : : :<li> #pt-preferences : : : : : :<a> : : : : :<li> #pt-betafeatures : : : : : :<a> : : : : :<li> #pt-watchlist : : : : : :<a> : : : : :<li> #pt-mycontris : : : : : :<a> : : : : :<li> #pt-logout : : : : : :<a> : : : #left-navigation : : : : .vectorTabs #p-namespaces : : : : : #p-namespaces-label : : : : :<ul> : : : : : :<li> .selected #ca-nstab-main : : : : : : :  : : : : : : : :<a> : : : : : :<li> #ca-talk : : : : : : :  : : : : : : : :<a> : : : : .vectorMenu.emptyPortlet #p-variants : : : : : #p-variants-label : : : : : :  : : : : : :<a> : : : : : .menu : : : : : :<ul> : : : #right-navigation : : : : .vectorTabs #p-views : : : : : #p-views-label : : : : :<ul> : : : : : :<li> .selected #ca-view : : : : : : :  : : : : : : : :<a> : : : : : :<li> #ca-edit : : : : : : :  : : : : : : : :<a> : : : : : :<li> .collapsible #ca-history : : : : : : :  : : : : : : : :<a> : : : : : :<li> .icon.mw-watchlink #ca-watch : : : : : : :  : : : : : : : :<a> : : : : .vectorMenu.emptyPortlet #p-cactions : : : : : #p-cactions-label : : : : : :  : : : : : :<a> : : : : : .menu : : : : : :<ul> : : : : #p-search : : : : :  : : : : : :   : : : : :  #searchform : : : : : : #simpleSearch : : : : : : : #searchInput : : : : : : :  : : : : : : : .searchButton #searchButton : : #mw-panel : : : #p-logo : : : :<a> .mw-wiki-logo : : : .portal #p-navigation : : : : #p-navigation-label : : : : .body : : : : :<ul> : : : : : :<li> #n-mainpage-description : : : : : : :<a> : : : : : :<li> #n-contents : : : : : : :<a> : : : : : :<li> #n-featuredcontent : : : : : : :<a> : : : : : :<li> #n-currentevents : : : : : : :<a> : : : : : :<li> #n-randompage : : : : : : :<a> : : : : : :<li> #n-sitesupport : : : : : : :<a> : : : : : :<li> #n-shoplink : : : : : : :<a> : : : .portal #p-interaction : : : : #p-interaction-label : : : : .body : : : : :<ul> : : : : : :<li> #n-help : : : : : : :<a> : : : : : :<li> #n-aboutsite : : : : : : :<a> : : : : : :<li> #n-portal : : : : : : :<a> : : : : : :<li> #n-recentchanges : : : : : : :<a> : : : : : :<li> #n-contactpage : : : : : : :<a> : : : .portal #p-tb : : : : #p-tb-label : : : : .body : : : : :<ul> : : : : : :<li> #t-whatlinkshere : : : : : : :<a> : : : : : :<li> #t-recentchangeslinked : : : : : : :<a> : : : : : :<li> #t-upload : : : : : : :<a> : : : : : :<li> #t-specialpages : : : : : : :<a> : : : : : :<li> #t-permalink : : : : : : :<a> : : : : : :<li> #t-info : : : : : : :<a> : : : : : :<li> #t-wikibase : : : : : : :<a> : : : : : :<li> #t-cite : : : : : : :<a> : : : .portal #p-coll-print_export : : : : #p-coll-print_export-label : : : : .body : : : : :<ul> : : : : : :<li> #coll-create_a_book : : : : : : :<a> : : : : : :<li> #coll-download-as-rdf2latex : : : : : : :<a> : : : : : :<li> #t-print : : : : : : :<a> : : : .portal #p-lang : : : : .uls-settings-trigger : : : : #p-lang-label : : : : .body : : : : :<ul> : : : : : :<li> .interlanguage-link.interwiki-no : : : : : : :<a> : : : : : :<li> .interlanguage-link.interwiki-nn : : : : : : :<a> : : : : : :<li> .interlanguage-link.interwiki-zh : : : : : : :<a> : : : : : .after-portlet.after-portlet-lang : : : : : : .wb-langlinks-edit.wb-langlinks-link : : : : : : :<a> .wbc-editpage : #footer : :<ul> #footer-info : : :<li> #footer-info-lastmod : : :<li> #footer-info-copyright : : : :<a> : : : :<a> : : : :<a> : : : :<a> : : : :<a> : :<ul> #footer-places : : :<li> #footer-places-privacy : : : :<a> .extiw : : :<li> #footer-places-about : : : :<a> : : :<li> #footer-places-disclaimer : : : :<a> : : :<li> #footer-places-contact : : : :<a> : : :<li> #footer-places-developers : : : :<a> : : :<li> #footer-places-cookiestatement : : : :<a> : : :<li> #footer-places-mobileview : : : :<a> .noprint.stopMobileRedirectToggle : :<ul> .noprint #footer-icons : : :<li> #footer-copyrightico : : : :<a> : : : : :  : : :<li>  #footer-poweredbyico : : : :<a> : : : : :  : :   :   :   :<a> : .suggestions : : .suggestions-results : : .suggestions-special End of HTML Tree <ac_metadata title="Thought you might find this useful. HTML Tree Viewer for quick CSS mapping:"> </ac_metadata>