Regarding 2.: Most of these objects do not directly correspond to rendered elements. Basically every page has one (typically) content stream which will contain all rendered elements. The biggest rendered thing you see outside of that are annotations (link boxes, form fields, actual annotations, ...).
It's a bit different if you are looking at a tagged PDF, where the tagging structure is in there, but if you want to look at that in detail you are probably better served with e.g. ngPDF (https://ngpdf.com/) which will show the tagging structure including the mapping to rendered elements.
I haven't decided if I want to create an open-source version. In the first place, I made it private to worry less about my code quality and to finish the product faster before I lose interest in it.
It heavily relies on the core part of PDF.js: I've made a fork of the PDF.js project, removed everything not related to the core part, and added an export for low-level primitives [1].
Also, as inspiration, I used the pdf.js.utils [2] project, which almost does the same but in a different form.
I wouldn't worry about the quality of the code. You get better by seeing other people's work and seeing alternative solutions to the problems you had.
Also, as I mentioned in another comment, this could easily be built into a quick trouble-checking app for POD work. Posting it would also let people fork it to make more task-specific apps.
1. Is the source available anywhere? I'm curious to see how it works.
2. Is there a way to connect the structure displayed here, to the rendered version in the PDF? To visually display the subcomponents?