I'm no expert in either of this but from my experience and reading, DOM (Document Object Model) is the modular structure of the actual HTML page wherein every entity (inputs, paragraphs, etc.) is represented in form of objects and each of these objects may or may not belong to a group (inputs to a form, paragraphs to a div, etc.). The actual page that is displayed to user in fact consists of the DOM, however, the relationship between these objects is hidden from the user because in first place, there is no use of it, and secondly, it isn't wise or secure to show it to user. However, you can find the relationship between dom elements by 'Inspecting elements' in a web browser.
Javascript does affect the DOM. If you're making any changes in DOM via JS, it may or may not be visible to user, depending upon what element you're affecting through JS (Hidden or displayed element).
So concluding, HTML code is description of the DOM elements in an organised way where you can access and manipulate these elements using JS. Which means, JS and HTML are bound to each other through common elements known as 'DOM elements'. Where HTML is used to (only) create these elements, JS is used for (creating and) manipulating these DOM elements. But creating DOM elements using JS at a wide level is not suggested because of it's limits and the fact that JS is made for dynamic manipulation of DOM elements and not for creation of static elements.