DOM: 브라우저 객체 모델

DOM이란

• 마크업으로 표현되어 있는 HTML Document에 대한 API
• 브라우저에 HTML Document가 로드되면, 이는 계층 구조를 가진 노드로 변환된다.

노드

• Document의 자식은 Node의 인터페이스이다.
• nodetype 프로퍼티를 통해 Node 객체의 타입을 확인할 수 있다.
• 노드 조작을 하기 전에 노드의 타입을 확인하는 것이 좋다
  • 각각의 노드 타입별로 지원하지 않는 인터페이스의 동작이 다르고
  • 브라우저 별로 마크업을 DOM 객체로 표현하는 방식이 다르다. (childNodes로 안쳐줘서 갯수가 다를 수 있음)
• 노드의 관계는 가족 관계로 표현되며, 이 프로퍼티를 통해 부모, 형제, 자식 노드에 접근할 수 있다.
  • 이 때 반환되는 값은 NodeList 타입의 노드 콜렉션이다.
  • NodeList는 배열처럼 인덱스로 접근할 수 있고, length 프로퍼티가 있지마 배열이 아니다.
  • 배열의 메서드를 쓰고자 할 때는 빌려써야 한다. (단, IE8 이하는 COM 객체이기 때문에 이마저도 안 됨.)
  • NodeList는 살아있는 객체이다.
• 노드의 자식을 조작하는 함수가 있으며, 이를 사용하기 위해 부모 노드를 알고 있어야 한다.
  • {parentNode}.appendChild({newNode}): {newNode}
  • {parentNode}.insertBefore({newNode}, {someNode}): {newNode}
  • {parentNode}.replaceChild({newNode}, {someNode}): {newNode}
  • {parentNode}.removeChild({newNode}): {newNode}

Document 노드

• HTML Document를 가리키는 노드, 브라우저에서 document로 접근 가능
• 문서의 정보를 저장
  • document.documentElement: 노드 하나만 올 수 있다.
    • HTML 파일에서는 <HTML/> 태그
  • document.body: <BODY/> 태그를 가리킴
  • document.doctype: <!DOCTYPE> 태그를 가리킴
  • document.title: <title>태그 안의 값, 변경하면 바로 반영된다.
  • document.URL:
  • document.domain: URL에 포함된 값으로만 변경 가능하고, 도메인이 더 넓어질 수는 있지만 더 좁아질 수는 없다.
  • document.referrer
• 쿼리 API 메서드
  • document.getElementById: $('#id')와 같음, 가장 첫번째 엘리먼트 반환
  • document.getElementsByTagName: `$(‘tag’)와 같음, 엘리먼트 리스트 반환(NodeList 타입)

Element 노드 (Node.ELEMENT_NODE)

• 프로퍼티
  • element.tagName: 태그명
  • element.id
  • element.className: class가 아니다!
  • element.title: 엘리먼트에 대한 부연설명, 툴팁 등에서 표시
  • element.lang
• 어트리뷰트 조작
  • element.getAttribute(key): element.attributes[key]와 동일
  • element.setAttribute(key, value)
  • element.removeAttribute(key)
  • 주의: 커스텀 어트리뷰트를 설정할 때는 setAttribute를 꼭 이용해야 attributes 객체에 반영된다.

• 엘리먼트 조작

• document.createElement: dom에 넣기 전까지 화면에 반영되지 않음 (고아)

Text 노드 (Node.TEXT_NODE)

• document.createTextNode(text)
• 텍스트 노드의 nodeValue로 넣은 텍스트 값은 XML 인코딩됨

  //outputs as “Some <strong>other</strong> message”
   div.firstChild.nodeValue = “Some <strong>other</strong> message”;
  

• element.normalize() 함수를 이용해서 빈 텍스트 노드를 없애거나, 형제 텍스트 노드를 합칠 수 있음

DocumentFragment 노드

• 다큐먼트이지만, 화면에 보이지 않음
• 다큐먼트에 엘리먼트 다발 매번 삽입하는 것보다, DocumentFragment를 만들엇 임시로 노드를 보관하는 용도로 쓸 수 있음

DOM API를 활용 시 주의사항

통해 Node를 동적으로 생성하기

• 스크립트로 createElement()로 노드를 생성하고, document에 삽입한 것은 HTML 마크업으로 표현한 것과 동일하다.
• 다만, 스크립트로 생성하는 것이기 때문에 페이지 로드 이후에 생성되고, 로드가 완료된 시점을 알기 어렵다.
• <script>, <style> 태그는 IE에서 특별하게 취급되므로 다른 엘리먼트처럼 자식으로 텍스트 노드를 추가하여 내용을 추가할 수 없다.
  • fallback을 만들어 script.text, style.styleSheet.cssText를 사용해야 함

살아있는 객체 NodeList

• NodeList는 해당 프로퍼티에 접근할 때, 매번 쿼리를 수행한다.
• 이는 성능이슈를 만들 수 있기 때문에 자주 사용하는 값이 있으면 캐시를 하는 편이 좋다.
  • 예: NodeList 순환 시, length