> For the complete documentation index, see [llms.txt](https://pyohamen.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pyohamen.gitbook.io/til/javascript/dom.md).

# 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의 인자인 실행함수는, 등록해놓은 함수를 실행하는 느낌으로 가야함, 실행함수의 인자는 이벤트객체임