DOM ( document object model )

노드 객체들로 구성된 트리 자료구조를 의미한다.

document인 html문서를 object형태 즉, javascript의 object로 모델링한 것을 의미한다.
DOM이 존재함으로서 javascript를 이용해서 html과 css를 조작하는 것이 가능하다.

또한 쉽게 노드를 탐색하기 위해서 DOM은 트리 자료구조 형태를 취한다.

1. 노드 ( Node )

하나의 HTML태그가 객체형식으로 모델링된 것을 의미한다.
노드 객체는 상속구조를 구성되며, 총 12가지의 타입이 존재한다.

예를 들면 <input />인 경우
1. Object: 객체의 상속
2. EventTarget: 이벤트 발생 객체
3. Node: 트리 자료구조의 노드 객체
4. Element: 브라우저가 렌더링하는 웹 문서의 요소를 표현하는 객체
5. HTMLElement: 웹 문서중에 HTML을 표현하는 객체
6. HTMLInputElement: HTML요소중에 input을 표현하는 객체
순서로 상속을 받는다.

• 프로토타입 체인에 의해 상속되는 메서드들
  Object.prototype.toString()
EventTarget.prototype.addEventlistener()
Node.prototype.parentNode()
HTMLElement.prototype.style
HTMLInputElement.prototype.value

2. 요소노드 선택 메서드

• Document.prototype.getElementById: 단 하나의 요소노드 반환

• Document.prototype/Element.prototype.getElementsByTagName: HTMLCollection객체 반환

• Document.prototype/Element.prototype.getElementsByClassName: HTMLCollection객체 반환

• Document.prototype/Element.prototype.querySelector: 단 하나의 요소노드 반환

• Document.prototype/Element.prototype.querySelectorAll: NodeList객체 반환

• Element.prototype.matches: 특정 요소노드 선택가능한지 확인 ( T/F 반환 )

2.1 HTMLCollection ( live )

이터러블이면서, 유사배열객체이며, 실시간으로 반영되는 객체이다.

아래 예시를 보면 최초에는 .box인 요소 객체가 3개지만, 이후에 하나의 객체의 클래스명을 변경하면 실시간으로 HTMLCollection에 적용되어 2개로 줄어든다. 이것을 실시간으로 반영된다고 말한다.

• 실시간 반영 객체 예시

// html
<ul>
  <li class="box">a</li>
  <li class="box">b</li>
  <li class="box">c</li>
</ul>

// javascript
const $elements = document.getElementsByClassName("box");
console.log($elements.length);	// 3 ... 클래스가 box인 태그 3개
$elements[0].className = "temp"
console.log($elements.length);	// 2 ... 클래스가 box인 태그 2개

2.2 NodeList ( non-live )

이터러블이면서, 유사배열객체이며, 실시간으로 반영되지 않는 객체이다.
하지만 childNodes가 반환하는 NodeList객체는 live 객체이다

3. 노드탐색

parent, sibling, children

마무리

일단 이후 내용 생략하고 나중에 추가적으로 정리할 예정