Intro to the DOM, as told from a student
Today I want to talk about the DOM, otherwise known as the Document Object Model
So what is the DOM?
You can say the DOM is made up of html tags and you can also say it’s created from Javascript. But at its bare bones, the DOM is the living, breathing document that is created in your browser. After all the coding you may or may not have done in Html, CSS, and Javascript, the DOM is what appears on your screen after everything’s been compiled and processed.
I’m a visual learner, so one of the first ways I’d explain what the DOM is that it’s a tree. Some of you may have come across trees when you had to find the greatest common factor. For example, 12 is composed of 3 and 4, and 4 branches from 2 multiplied by 2 (see Figure 1)
Similarly, the DOM is formatted in a similar fashion called a tree. This tree is made up of all the tags you can find in your Html file as well as the elements or nodes that are manipulated in Javascript.
So I’m sure nodes isn’t widely known especially if you did not come from a coding background. A node represents each point in the tree. Or in the case of our html page, this means that each <img> tag or <div> or even the <!DOCTYPE> element you see at the top of the page is a node.
This is why sometimes when we are using appendChild to manipulate the DOM in javascript we might find an error looking like this which tells us, and I’m paraphrasing, “You aren’t putting a node inside of this function.”
Most of the time, nodes originate from our Html file. However another powerful way of creating nodes is by using Javascript.
We can access every node that appears in the browser by using one of the query selector functions such as document.querySelector or document.getElementById.
In fact we can completely create the html component of a webpage by using only Javascript. Having the properties and functions including append(), appendChild(), children, nextElementSibling in our arsenal allows us to traverse to any point or node in the tree and use “CRUD” which means we can create, read, update, and delete nodes at every point in the DOM.
