DOM은 HTML document와 scripting languages를 연결해주는 tree-like structure이다.
We define a node as an intersecting point in a tree that contains data.
In the DOM tree, the top-most node is called the root node, and it represents the HTML document. The descendants of the root node are the HTML tags in the document, starting with the
html tag followed by the
body tags and so on.
Observe the difference in the rectangular boxes and the curved boxes. These denote a difference in the types of nodes in the DOM structure.
As mentioned, a node is the equivalent of each family member in a family tree. A node is an intersecting point in a tree that also contains data.
In the diagram to the right, the DOM nodes of type element are highlighted red. These correspond to elements in the HTML document. Move on to the next exercise when you’re ready!
Much like an element in an HTML page, the DOM allows us to access a node’s attributes, such as its class, id, and inline style.
In the diagram to the right, we have highlighted the paragraph element with an id of “bio” in the HTML document. If we were accessing that element node in our script, the DOM would allow us to tweak each of those attributes, or simply access them to check their value in the code.