• 문서(Document)란 HTML,XML문서 같이 부분적 요소나 내용이 관련된 것들끼리 묶여서 존재하는 요소이다.
• 구조화 된 문서에 스크립트를 이용하여 접근할때도 구조적으로 접근하는 방식(Object Model)을 제공하는 것이 바로 DOM이다.

• DOM을 통해 HTML문서를 트리구조로 볼 수 있다. 원래 DOM은 DNM(Document Node Model)로 불렸지만 부르기 힘들어서 DOM으로 불렸다.
• Element(태그)뿐만 아니라 Attribute, text까지 노드로 표현되있다. DOM을 통해 스크립트가 문서 내의 모든 요소에 동적으로 접근할 수 있다.
• DOM구조에 순수 자바스크립트로 접근을 하거나 JQuery 등을 이용해서 접근을 할 수 있다. 순수 자바스크립트로 접근을 하면 코드가 길어진다.

JQuery의 DOM접근 & 순수 JS의 DOM접근

• 제이쿼리에서는 CSS의 선택자(Selector)방식을 통해 DOM을 접근.

• 제이쿼리에 비해 순수 JS로 DOM을 접근하는건 긴 메서드 이름을 가진다.

$(function(){
    var a = document.getElementsByTagName("h2");
    console.log(a);

    var b = document.querySelectorAll("h2");
    console.log(b);

    var c = $("h2");
    console.log(c);
});

• jquery선택자를 통해 반환된 객체는 제이쿼리 객체이고, getElementByTagName을 통해 반환된 객체는 HTML Collection, 쿼리선택자를 통해 반환된 객체는 NodeList이다.
• 내가 stackoverflow에서 document.getElementsByTagName(‘div’);를 했을때도 HTML Collection이 나왔다.

HTML Collection과 NodeList의 차이

• NodeList는 DOM-Level-3-core에 정의가 되어있고, HTML Collection은 DOM-Level-2-HTML에 정의가 되어있다.

interface HTMLCollection {
  readonly attribute unsigned long   length;
  Node               item(in unsigned long index);
  Node               namedItem(in DOMString name);
};

interface NodeList {
  Node               item(in unsigned long index);
  readonly attribute unsigned long   length;
};

제이쿼리 선택자의 내부적 처리

• 제이쿼리는 선택자를 통해 간단하게 DOM을 접근할 수 있다. 하지만 브라우저 내장 메소드에 비해 속도가 느리기때문에 브라우저 내장 메소드를 사용한다. 브라우저별로 지원하는게 다름으로 잘 확인해야한다.

느낀점

DOM, DOM그러는데 DOM이 Document Object Model이라는것만 알뿐 자세히는 몰랐다. 우리가 작성한 HTML을 DOM이라는 트리구조로 만들어서 각각의 요소별로 접근을 하고 데이터를 다룰 수 있는 디테일을 알게되었다. 아직까지는 DOM-Level을 모르기때문에 HTMLCollection과 NodeList에 대해 이해가 안되지만 차근차근 학습하자.