So, What’s the DOM?
I can give you the, sort of, difficult to understand, “official” definition of the DOM here. It most likely won’t get you any closer to coming to grips with what’s happening, but for the sake of inclusion, here goes:
“The Document Object Model is a platform – and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web.” (source)
If you really look at and think about the definition above, you can take away a few points. Without more background and explanation though, it’s lacking.
In order to best explain what the DOM is, I think it would be wise to break apart the phrase, Document – Object – Model. Let’s first look at the document.
What is the Document?
I have to say, Simon Allardice really did a great job explaining things in his video on the DOM. Since I haven’t been able to find anything in writing that compares, I’m going to attempt to paraphrase what he said here. At the bottom of this post though, I’ll link to a few references where you can read about the DOM further.
What is the Object?
Simon Allardice explained objects in the document as “things.” He said that headlines on a webpage are objects, as well are paragraphs, pictures, etc… If you’re looking at the source HTML code of a web page, tags and elements are objects. The text part of the page elements are also objects. I’ll give you some example code below and then go over what would be considered objects in that code.
<!DOCTYPE html> <html> <head> <title>This is my title</head> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <ul> <li>Text</li> <li>Text</li> <li>Text</li> </ul> </body> </html>
If you look at the above code, each line can be considered an object. The thing is, if you look inside the H1 element, the text withing the element is also considered an object. The same thing goes for the paragraph element. Each list item is considered an object as well as the unordered list itself, so that’s an object within an object.
All we have left now is the model part of the DOM. The idea behind this is fairly straightforward because we’ve probably seen models throughout our entire lives. All a model is, is an easy to understand interpretation of something more complex. Take a schematic or a family tree for instance – those are models. Let’s answer the final question.
What is the Model?
If we think of our HTML code as a tree structure, we can begin to understand what the model of the DOM looks like. We can think of our code more graphically to assist us. Take a look at this image from the W3C.
That image represents the following code of an HTML table:
<TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE>
I tried my best to describe what the DOM is, but I think I’ll always feel my description didn’t go nearly far enough. If I had to describe the DOM to someone the simplest way I could, I’d say that “the DOM can be described as how all the pieces of what creates a web page can be identified, react and relate to one another.” That, my friends, is the best I could do.
As promised, I’m going to list a few sites below that can help you further with this topic. The DOM can get much more technical than the ideas I just expressed, so it’s really a good idea to get as familiar with what’s going on from as many sources as possible.