What is the DOM (Document Object Model)

Posted on by

Today we are gonna talk about the DOM with JavaScript, what it is, how it behaves and more.

Why do you want to learn the DOM with JavaScript?

JavaScript is the language of the browser, you don’t need to compile code or anything like that.

JavaScript can change a lot of things like HTML elements, attributes, it can add and remove HTML elements and attributes and it can also create new HTML events. JavaScript can change all the CSS styles, in other words, this is a great tool on how to get, change, add, delete and interact with HTML elements.

In the DOM, documents have a logical structure which is very much like a tree as shown in the following picture.

DOM & JavaScript

The DOM is not a programming language but it is fundamental, without the DOM JavaScripts wouldn’t be able to communicate with the HTML documents.

Every element in a document like the head, body, tables, text, headers and more are part of the Document Object Model.

The DOM was designed to be independent of any programming language, making the structural representation of the document available from a single API.

The DOM isn’t your source HTML document

Even if the DOM is created from the HTML document, when you modify the DOM, you don’t actually change the HTML source document.

What the DOM is not

  • The DOM is not a set of data structures, it is an object model that specifies interfaces.
  • The DOM is not a way of persisting objects to HTML or XML
  • The DOM does not define what information in a document is relevant or how information in a document is structured.
  • The DOM is not a competitor to the Component Object Model (COM). The DOM is a set of interfaces and objects designed for managing HTML and XML documents.

If you want to learn more about the DOM I would suggest doing further research, but to make your job easier I’ll leave you the best resources in my opinion.

w3schools: https://www.w3schools.com/js/js_htmldom.asp

MDN web docs: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

And if you are more about the video gang, here is a crash course from Tranversy Media:

JavaScript DOM Crash Course – Part 1

JavaScript DOM Crash Course – Part 2

JavaScript DOM Crash Course – Part 3

JavaScript DOM Crash Course – Part 4

Stay tuned cause I’ll be creating more blogs that are gonna help you in your programming journey.