What this does is allow you to dump some portions of the Document Object (DO) associated with the FORM supplied by this HTML. I would suggest that it is best that you are in the "experienced" class, else this ain't gonna mean very much to you, at all!
Your browser does not directly process the HTML you supply to render the page on your screen. Your HTML is processed into a Document Object (DO) file by your browser, and it is that DO file that is used to display your page on your screen. The sole purpose of JavaScript (JS) is to interact with that DO file, and read/alter what is specified by your HTML.
What we have in this example is a FORM with several information elements (13 total with the "submit" buttons) within it (a dropdown, a text entry field and three checkbox fields). This page allows you to dump the contents (properties) of several objects - the FORM object, and the objects associated with each of the data elements within this FORM. The dump is rather lengthy on modern browsers, but I point out the things you should look for to understand what I have done in some of my examples.
Select different options from the fields supplied, and see how they are made available within the DO. To help you in your JS programming you may expand this dump procedure. Just be aware that different browsers have different contents for the DO.