The Document Object Model (DOM) is a representation of the structure and content of a web page. This representation is as nodes or objects allowing programs to interact with the page and change the document structure, style and even content.
A web page can be can be either displayed in a browser window or as source code (HTML code). As mentioned before it’s represented as nodes or objects (object-oriented representation) and has capabilities that allows not only to interact with it but manipulate it with scripting language programs such as Javascript.
In order to work with the DOM we must to keep in mind that the DOM is built with multiple APIs (Application Programming Interface) that work together in order to add new functionalities and capabilities as needed to the DOM (like the SVG API for representing SVG documents). But…
How does that work with Javascript?
Well, let’s say that Javascript is something like the missing sock of the DOM, so, let me explain it. The DOM is not a programming language itself and is not part of the Javascript language either, but in a certain way they need each other.
Javascript by itself wouldn’t have any notion or knowledge about an HTML document, SVG document or any other API formed by the DOM. Basically, the DOM and Javascript can be used in different contexts and implementations, for example Node.js runs Javascript programs in a server and provides a whole different set of APIs and DOM is NOT part of it. On the other hand, the DOM can be built for any language (like Python).
Once said all that we can say that we use Javascript to access all the content and elements in the DOM and manipulate it. And now…
How can I access the DOM with Javascript?
Even if I’m getting out of the topic a little bit, might be a good introduction. So, basically there are multiple ways to do it but would like to talk about the most common one and that is thru the source code, which basically is to have a file with the .html extension.
You can open that file in any editor (Notepad on Windows, TextEdit on Mac or VisualStudioCode on both OS) and inline in a <script> element nearly the end of the <body> and begin using the API for the document or window objects to manipulate the document.
Conclusion
The DOM is a nodes or objects representation of a web page that can be manipulated (most commonly) with Javascript thru the DOM API.
Please let me know in the comments if you find it useful and remember that improvements, comments, suggestions and feedback are always welcome 🙂
Web developer with over ~6 years of experience. I am a highly motivated and results-oriented developer with a passion for creating scalable and user-friendly web applications. I am recently exploring the world of blogging, hoping to share some of my experience in this exciting and ever-evolving journey of development.