[JS] DOM 문서 객체 모델

이채현

💡 Javascript DOM

DOM (문서 객체 모델…Document Object Model)

• HTML ⇒ 문서
• 문서를 조작하는 언어 ⇒ JavaScript
• Document Object Model ← JavaScript가 DOM을 통해 HTML을 조작
• DOM 내부에는 Node: HTML 요소 하나하나 전부를 지칭
  • Node는 Tree형태로 부모노드가 자식노드를, 자식노드가 그 자식노드를…
  • 각 Node에는 수 많은 Properties, Methods…가 존재

결론

• HTML문서를 JavaScript로 모델링 한 것이 DOM
• 인터페이스를 하나하나 자르면 단위가 Node이며, Node는 Tree구조로 이루어져있다.

Eg) ’li’ 태그를 뽑아보면 정보가아래처럼 수 많이 담겨있다.

accessKey: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColSpan: null
...

Dom 선택

자바스크립트에서 HTML 특정 Element들을 가져오는 법 (고전적)

• Document.getElementById() 문서에 특정 id만 가져오고 싶을 때

• Element.getElementsByClassName()

  클래스 이름으로… 모든 자식의 엘리먼트를 가져온다. → HTML Collection 형태로 가져온다.

• Document.getElementsByTagName()

  태그 이름으로 가져온다.

자바스크립트에서 HTML 특정 Element들을 가져오는 법 (비교적 최신)

• Document.querySelector()

  id(.), class(#), tag name 모두에 사용가능, 첫번째로 보이는 것을 가져온다.

• document.querySelectorAll()

  해당하는 것을 모두 가져온다. (문자열 O) ⇒ NodeList로 가져오기 때문에 Array로 변환해서 사용한다.

• 그 외 다양한 조합으로 사용가능하다.

  eg) div.note → div태그 내에 note id를 가져온다.

Dom 조작

조작하기 위한 method들도 매우 많기 때문에 MDN문서를 보면서…

• textContent()… 텍스트 삽입
• removeChild()… child 제거
• createElement()…element 삽입
• appendChild()

---

• innerHTML을 통해서 문자열로 컨트롤 가능하다.