DOM (1)

이 글은 자바스크립트의 DOM(Document Object Model)에 관한
기본 개념을 정리하기 위해 작성하였습니다.

---

< What is the DOM? >

DOM is a representation of a webpage created by and stored in user's browser.

To allow for web scripting languages to access, modify, and update the HTML File.
(Think of the DOM as the link between an HTML and scripting languages)

DOM is a language-agnostic structure implemented by browsers.

 

• The browser takes the site's HTML and transforms it into a DOM and then paints the DOM to the user's screen making the site visible to the user.

 

+. Note : There are other types of documents, such as XML and SVG, that are also modeled as DOM structures.

 

 

 

---

< The DOM as a Tree Structure >

DOM is tree-like structure.

 

• Node is an intersecting point in a tree that contains data.
• A parent node is the closest connected node to another node in the direction towards the root.
• A child node is the closest connected node to another node in the direction away from the root.
• Top-most node is called the root node, it represents the HTML document.

 

 

+. Note : There are nine different types of node objects in the DOM tree.

   In the diagram, the node objects with the sharp-edge rectangles are of the type Element,
   while the rounded edge rectangles are of type Text.

 

 

---

< Attributes of Element node >

DOM also allow us to access a node's attributes, such as its class, id, and inline style.