A brief introduction to the DOM with a quick example on manipulating it, and a link to digging in deeper.
A web page is just a file, or a representation of a file. Usually an HTML file. The DOM, or document object model, is the API through which that file's HTML code can be accessed and manipulated.
const allLinks = document.getElementsByTagName("a");
It is through the DOM that the contents of the HTML page can be manipulated. For example, I could take the
allLinks object from above and make them all red.
for (let link of allLinks) link.style.color = "red";
Run those two lines in the browser after the page has been loaded and it will turn the links on the page red!
That's a very brief introduction to the DOM, but that's all it is at a very high level — a programmatic representation of the HTML code that is the basis for what you see on screen when viewing a web page.
If you'd like to learn more MDN has an excellent introductory page on the DOM that goes into a lot of detail.
A brief description of HTML, before suggesting a couple free courses.
If the web is organized by pages, shouldn't we build it that way? Introducing component-driven design and development, explained through the lens of the evolution of the web.