Create a file named domwalk.js to contain your JavaScript co

Create a file named domwalk.js to contain your JavaScript code. Although you will use index.html as the target of your JavaScript code during development, it is important to write your domwalk.js file in a manner that will allow it to work when added to any HTML document. The add-on will insert a toggle button at the bottom of the page that will allow the user to display/hide a textual representation of the page’s DOM tree structure.Your domwalk.js add-on must satisfy the following requirements:It must be entirely self-contained. Applying it to an HTML document must be possible through the simple insertion of a single script element. There should be no restriction on where that script element is inserted; it should work properly regardless of where in the head or body it is placed. No further modification of the HTML or CSS should be required.It must recursively traverse the entire DOM tree (starting with the document node). For each node, it must generate a single line (with no blank lines in between) that satisfies the following requirements:Each line must be indented two spaces for every level of nesting within the HTML. For example, the line for the document node should not be indented at all. The lines for the doctype and html element should be indented two spaces each. The lines for the head and body elements should be indented four spaces each. The lines for the title and meta elements should be indented six spaces each. And so on.Start with the name of the nodeType property of that node. Use the following mapping of nodeType values to type names:1 = element2 = attribute3 = text4 = cdata5 = entity_reference6 = entity7 = processing_instruction8 = comment9 = document10 = doctype11 = fragment12 = notationNote that some of these nodeTypes will not apply to the provided HTML document, but your code should be prepared to handle them anyways.If the node is an element node, the type name should be followed on the line by a space and the tag name of the HTML element the node represents (in lowercase) and a space-delimited list of any attributes applied to that element. Each attribute should be presented in the form name=value.If the node is a text node, display a line for it only if it contains something other than whitespace characters. For text nodes, the node type should be followed on the line by a space and the text the node contains. Any sequence of whitespace characters that occurs in the text the node contains should be replaced with a single space character. If the node contains more than 60 characters of text (after collapsing the whitespace), truncate the text to 57 characters in length and append three periods before adding it to the line.The resulting list of lines, in order, must appear at the end of the displayed document when requested by the user. The element added to contain the tree must have a monospace font, a background color of #333333, and a color of #aaaaaa. Each line representing an element node should be displayed in bold text and the color #ffc41f. And each line representing a text node should be displayed in normal text and the color #4affce.The list of lines representing the DOM tree in text form should not appear initially on page load. Instead, your code should add a button to the bottom of the body on initial page load. This button should initially be labeled Display tree. When the user clicks the Display tree button, the tree should be displayed below it and the label on the button should change to Hide tree. If the user clicks the Hide tree button, the tree should be removed from the page and the button label should switch back to Display tree. This button should work as a toggle to display and/or hide the tree as often as the user wishes.Make sure your html documents can insert the script element at a different place, one of which should be in the body and two of which should be in the header.