The meaning of DOM

What does DOM stand for?

Document Object Model, the tree-like object that is rendered from the HTML.

The ROOT is the <html></html> element. We see those tags at the start and end of an HTML file downloaded from the web server. From there our document grows with the theoretical trunk of the tree being the <body></body> element.

The metadata found in the <head></head> element is not part of the tree, but it describes the tree’s add-on components and some of its nature. It is in the DOM, but treated way differently.

Most of what we will be concerned with in learning HTML, CSS and JavaScript will relate to the BODY, which makes it the best candidate for tree trunk. Relate all elements in a document back to this parent, as they do not see anything above that. BODY is the penultimate parent of our entire document in terms of what the user sees and interacts with.

Everything we do will be confined to this environment. Study how the Document Tree is constructed, maybe not all at once, but bit by bit over time. Think of every element as being a node on the tree. If the parent is BODY then it is a node on the trunk, as in a branch out of the trunk of the tree.

Elements contained within an element are like branches from that branch. Any way we look at it, we come down to objects. If it is a branch, then it is an object, and if it has branches coming from it, they too are objects, and all contained as properties of the parent object.

Easy to see this gets way complicated real fast in the browser. No worry. Computers are fast and the thousands of lines of code that are running just to get a page loaded run in milliseconds or less.

Whatever it takes to get to the bottom of your question, do it. This is not a trivial question but an important one and one that we are happy to see asked. Take the time to really dig in to what the DOM is from the perspective of the developer. The environment is there, and certain promises are made that X will result in Y. The rest is on us to learn.

2 Likes

Having a solid understanding of this is also very helpful for data science/analysts when building web scrapers.

1 Like