DOM model

*복습 자료라서 뻔한 내용은 생략

 

 

Summary.

 

1. The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. Usually it refers to JavaScript, even though modeling HTML, SVG, or XML documents as objects are not part of the core JavaScript language

    + As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript

    +  For example, the document object that represents the document itself, any table objects that implement the HTMLTableElement DOM interface for accessing HTML tables, and so forth, are all objects.

    + The DOM is not part of the JavaScript language, but is instead a Web API used to build websites

 

2. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

 

3. Nodes can also have event handlers attached to them. Once an event is triggered, the event handlers get executed.

 

4. 즉, Document, Page, Component, 등 을 프로그래밍 언어로 조작할 수 있게끔 DOM API가 언어별로 존재

 

5. Common DOM Document API 리스트

document.querySelector(selector)
document.querySelectorAll(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
GlobalEventHandlers/onload
window.scrollTo()

 

6. 생각해보면 결국 Web Page는 DOM 에 따른 객체 Tree에 지나지 않음. Event도 내부 프로그램에서 발생하고 주고받는 구조

    + click, drag-and-drop, 등, 다양한 이벤트 역시 그냥 프로그램

 

 

Additional.

1. DOM Types (https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#fundamental_data_types)

    + Document, Node, Element, NodeList, 등

 

2. (다음에) render가 실제로 일어나는 방법?

 

 

Reference.

• https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API
• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
• https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree
• https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
• https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction