DOM(Document Object Model)

DOM(Document Object Model)

브라우저에서 HTML코드를 DOM(Document Object Model)이라는 객체 형태의 모델로 저장

• HTML element를 Tree 형태로 저장, DOM 트리 라고도 부른다.
• document가 DOM 전체에서 최상위 노드, 루트 노드
• 변경 등 조작이 용이하도록 돕기 위해 javascript를 통해서 document와 같은 돔 노드에 접근이 가능하다
  • document는 js의 object와 같다

브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수들의 묶음)를 제공

• 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색 알고리즘을 구현하기 어렵기 때문
• 브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공
  • 탐색 기능 외에도 DOM을 추가하고 삭제하고, 그리고 DOM을 탐색할 수 있는(위아래로 이동) 메서드들이 존재

참고자료) https://en.wikipedia.org/wiki/Document_Object_Model

getElementById()

• ID 정보를 통해서 엘리먼트를 탐색
• ID 값은 문서 전체에서 유일해야 하며 "국지적"인 버전을 쓸 이유가 없기 때문에 document 객체의 메서드로만 활용이 가능하다.
• 유사하게 getElementsByClassName() 등이 있다.
  • Elements이므로 요소들의 배열을 반환한다.

querySelector()

• DOM을 찾는데 특히 유용한 querySelector 메서드
• getElementById()와 달리 document 외에도 엘리먼트 객체의 메서드로 이용이 가능하다
• CSS 스타일을 결정할 때 사용하던, Selector 문법을 활용해 DOM에 접근
• 여러 개 엘리먼트가 있다면, 그 중 첫번째가 반환된다

<-> 비슷하지만 다른 querySelectorAll
- 조건에 해당하는 모든 엘리먼트들이 노드 리스트(배열과는 다름)로 반환된다

css selector

• selector문법은 querySelector와 querySelectorAll메서드에서 사용
• css 스타일을 부여했을 때 익혔던 selector문법과 동일하다고 생각하고 사용

참고)

MDN Web doc, getElementById() https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById
부스트코스 풀스택 강의 https://www.boostcourse.org/web316/lecture/16699?isDesc=fals