Skip to content

Instantly share code, notes, and snippets.

@genya0407

genya0407/00_printDOMTree.js

Last active May 10, 2019 03:20
Show Gist options
  • Save genya0407/9ece88ca5780a1f885e8a4adec49bdb6 to your computer and use it in GitHub Desktop.
Save genya0407/9ece88ca5780a1f885e8a4adec49bdb6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
00_printDOMTree.js
function printDOMTree(curr = document.children[0], indent=0) {
str = `${' '.repeat(indent)}<${curr.tagName}>\n`;
Array.from(curr.children).forEach(child => {
str += printDOMTree(child, indent + 1)
});
str += `${' '.repeat(indent)}</${curr.tagName}>\n`;
return str
}
Raw
01_output of www.google.com
<HTML>
<HEAD>
<META>
</META>
<META>
</META>
<META>
</META>
<META>
</META>
<META>
</META>
<META>
</META>
<TITLE>
</TITLE>
<SCRIPT>
</SCRIPT>
<SCRIPT>
</SCRIPT>
<STYLE>
</STYLE>
<SCRIPT>
</SCRIPT>
<STYLE>
</STYLE>
</HEAD>
<BODY>
<STYLE>
</STYLE>
<STYLE>
</STYLE>
<STYLE>
</STYLE>
<DIV>
<DIV>
</DIV>
<DIV>
<STYLE>
</STYLE>
</DIV>
<STYLE>
</STYLE>
<DIV>
<SCRIPT>
</SCRIPT>
<STYLE>
</STYLE>
<DIV>
<DIV>
<DIV>
<DIV>
<DIV>
<DIV>
<A>
</A>
</DIV>
<DIV>
<A>
</A>
</DIV>
</DIV>
<DIV>
<DIV>
<DIV>
<A>
</A>
<DIV>
</DIV>
<DIV>
</DIV>
</DIV>
<DIV>
<UL>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
</UL>
<DIV>
<DIV>
</DIV>
<DIV>
<DIV>
</DIV>
<A>
</A>
</DIV>
</DIV>
<A>
</A>
<SPAN>
</SPAN>
<UL>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
<LI>
<A>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</A>
</LI>
</UL>
<SPAN>
</SPAN>
<UL>
</UL>
<A>
</A>
</DIV>
</DIV>
<DIV>
<DIV>
<A>
<SPAN>
</SPAN>
</A>
<DIV>
</DIV>
<DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV>
<DIV>
</DIV>
</DIV>
<FORM>
<DIV>
<INPUT>
</INPUT>
<INPUT>
</INPUT>
</DIV>
<DIV>
<DIV>
<STYLE>
</STYLE>
<DIV>
<DIV>
<DIV>
<STYLE>
</STYLE>
<DIV>
</DIV>
<INPUT>
</INPUT>
</DIV>
<DIV>
<STYLE>
</STYLE>
<STYLE>
</STYLE>
<DIV>
<SPAN>
</SPAN>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV>
<STYLE>
</STYLE>
<DIV>
</DIV>
<DIV>
<UL>
</UL>
<STYLE>
</STYLE>
<LI>
<DIV>
<DIV>
<DIV>
<SPAN>
</SPAN>
</DIV>
</DIV>
<DIV>
<DIV>
</DIV>
</DIV>
</DIV>
</LI>
<DIV>
<STYLE>
</STYLE>
<CENTER>
<INPUT>
</INPUT>
<INPUT>
</INPUT>
</CENTER>
</DIV>
</DIV>
<STYLE>
</STYLE>
<DIV>
<STYLE>
</STYLE>
<DIV>
</DIV>
<DIV>
</DIV>
<A>
</A>
</DIV>
</DIV>
<DIV>
<CENTER>
<INPUT>
</INPUT>
<INPUT>
</INPUT>
</CENTER>
</DIV>
</DIV>
</DIV>
</FORM>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIALOG>
<DIV>
<BUTTON>
</BUTTON>
<DIV>
<DIV>
<DIV>
<SPAN>
</SPAN>
<SPAN>
<DIV>
<SPAN>
</SPAN>
<DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</DIV>
</DIV>
</SPAN>
</DIV>
<DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</DIV>
<DIV>
</DIV>
</DIV>
<DIV>
<DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</DIALOG>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
<SPAN>
<CENTER>
<DIV>
<IMG>
</IMG>
</DIV>
<DIV>
</DIV>
<DIV>
<DIV>
<STYLE>
</STYLE>
<DIV>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
<A>
</A>
</DIV>
</DIV>
<SCRIPT>
</SCRIPT>
<DIV>
</DIV>
</DIV>
</CENTER>
</SPAN>
<DIV>
<DIV>
<DIV>
<STYLE>
</STYLE>
<STYLE>
</STYLE>
<DIV>
<DIV>
<DIV>
<STYLE>
</STYLE>
<DIV>
<SPAN>
</SPAN>
</DIV>
</DIV>
<SPAN>
<A>
</A>
<A>
</A>
<SPAN>
<A>
</A>
<SPAN>
<A>
</A>
<A>
</A>
<A>
</A>
<A>
</A>
<A>
</A>
<A>
</A>
</SPAN>
</SPAN>
</SPAN>
<SPAN>
<A>
</A>
<A>
</A>
<A>
</A>
</SPAN>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV>
<DIV>
<SCRIPT>
</SCRIPT>
</DIV>
</DIV>
<DIV>
</DIV>
</DIV>
<SCRIPT>
</SCRIPT>
<DIV>
<DIV>
<DIV>
<DIV>
<B>
</B>
</DIV>
<A>
</A>
</DIV>
<DIV>
<A>
<DIV>
<DIV>
</DIV>
<SPAN>
</SPAN>
</DIV>
</A>
<DIV>
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
<A>
</A>
</DIV>
<A>
</A>
</DIV>
</DIV>
<DIV>
<DIV>
<A>
<IMG>
</IMG>
<DIV>
<DIV>
</DIV>
<DIV>
</DIV>
</DIV>
</A>
<A>
<IMG>
</IMG>
<DIV>
<DIV>
</DIV>
<DIV>
</DIV>
</DIV>
</A>
</DIV>
<A>
<SPAN>
</SPAN>
<DIV>
</DIV>
</A>
</DIV>
<DIV>
<DIV>
</DIV>
</DIV>
<DIV>
<DIV>
<A>
</A>
</DIV>
<DIV>
<A>
</A>
</DIV>
</DIV>
</DIV>
</DIV>
<STYLE>
</STYLE>
<SCRIPT>
</SCRIPT>
</DIV>
<TEXTAREA>
</TEXTAREA>
<SCRIPT>
</SCRIPT>
<SCRIPT>
</SCRIPT>
<SCRIPT>
</SCRIPT>
</BODY>
</HTML>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment