이채현
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’ 태그를 뽑아보면 정보가아래처럼 수 많이 담겨있다.
1 | accessKey: "" |
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을 통해서 문자열로 컨트롤 가능하다.