# Document Object Model

> html이 메모장에서는 그냥 string이지만, browser에서는 해석해서 `구조화`(DOMtree) 를 해서 DOM이 된다.

Console에서 type of document 할 시, 결과로 object가 return 되는 것을 볼 수 있다.

DOM 조작: parsing된 html, 즉 DOM{\~\~\~} DOM안의 내용을 조작하는 것을 의미함

It means 문자열탐색 -> Tree 탐색 (Tree의 하나하나는 Node가 된다) / 서버없이 정적인 상태에서도 Programmable한 문서가 될 수 있다. / MTV 과정 생략하고 browser를 코딩할 수 있음

1. 선택 1. document.querySelector()

   Node를 찾자! / Element에서 copy -> selector 로 ''으로 묶어 인자를 넣어주자: 주어를 잡음

   * .innerHTML
   * .classlist: parsing해줌 / .classlist.add: 동적으로 class를 추가할 수 있음
2. 수정
   * document.querySelector(셀렉터).innerText = "!!!"
3. 생성
   * point: 문서에서 대상을 잡고, 수정하고, 생성하는데 str하드타이핑 방식이 아닌, **객체** 를 잡아서 조작하자
4. 이벤트리스터

   요소.addEventListener('이벤트', 이벤트 발생시 실행할 함수)

   ```jsx
   myButton.addEventListener('click', confirmMessage)
   ```

   addEventListener의 인자인 실행함수는, 등록해놓은 함수를 실행하는 느낌으로 가야함, 실행함수의 인자는 이벤트객체임


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pyohamen.gitbook.io/til/javascript/dom.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.