JavaScript 문서 객체 모델 DOM 탐색

    2018-04-27 15:04:03 작성

    DOM 노드

    HTML DOM은 모든것이 노드입니다.

    • 모든 HTML 요소는 ELEMENT_NODE(1) 입니다.
    • HTML 요소의 속성은 ATTRIBUTE_NODE(2) 입니다.(사용되지 않음)
    • HTML 요소의 내부에 텍스트는 TEXT_NODE(3) 입니다.
    • 모든 주석은 COMMENT_NODE(8) 입니다.

    위와 같은 코드는 다음과 같은 형식으로 노드로 구성됩니다.

    HTML DOM tree

    노드의 관계

    모든 노드는 서로 계증관계를 갖고 있습니다.

    • 노드 트리에서 최상위 노드를 root 라고 합니다.
    • root를 제외하고 모든 노드는 parentNode를 갖습니다.
    • 모든 노드는 많은 수의 자식노드(childNodes)를 가질 수 있습니다.
    • 같은 parentNode를 갖는 노드들은 형제(Sibling) 관계에 있습니다.
    노드 관계도

    • 노드간 이동

      속성 설명
      element.parentNode 요소의 상위 노드를 반환합니다.
      element.childNodes 하위요소의 NodeList 객체를 반환합니다.
      인덱스로 특정노드에 접근할 수 있습니다.
      element.firstChild 요소의 첫번째 하위노드를 반환합니다.
      element.lastChild 요소의 마지막 하위 노드를 반환합니다.
      element.nextSibling 동일한 노드 트리 수준에서 다음 노드를 반환합니다.
      element.previousSibling 동일한 노드트리 수준에서 이전 노드를 반환합니다.

    • 요소간 이동 ELEMENT_NODE만 포함(TEXT_NODE, COMMENT_NODE는 포함하지 않음)

      속성 설명
      element.parentElement 요소의 상위요소를 반환합니다.
      element.children 하위 요소의 HTML Collection객체를 반환합니다.
      인덱스로 특정요소에 접근할 수 있습니다.
      element.firstElementChild 요소의 첫번째 하위 요소를 반환합니다.
      element.lastElementChild 요소의 마지막 하위 요소를 반환합니다.
      element.nextElementSibling 동일한 노드 트리 수준에서 다음 요소를 반환합니다.
      element.previousElementSibling 동일한 노드트리 수준에서 이전 요소를 반환합니다.

    • 노드의 정보

      속성 설명
      element.childElementCount 하위 요소의 수를 반환합니다.
      element.nodeType 노드의 유형(상수)을 반환합니다.
      NODE TYPE 예
      ELEMENT_NODE 1 <div class="block">텍스트들...</div>
      ATTRIBUTE_NODE 2 class="block" (HTML에서는 사용하지 않음)
      TEXT_NODE 3 텍스트들...
      COMMENT_NODE 8 <!-- 주석입니다. -->
      DOCUMENT_NODE 9 document 객체 자신입니다.(<html>의 parentNode)
      DOCUMENT_TYPE_NODE 10 <!Doctype html>
      element.nodeValue 노드의 값을 설정하거나 반환합니다.
      element.nodeName 노드 이름을 반환합니다. 대문자 반환
      • 노드가 요소일경우 대문자 태그명을 반환
      • 노드가 요소가 아닐경우 각 유형의 이름을 반환
        예: 텍스트 노드는 #text 를 반환
      element.tagName 요소의 태그이름을 반환합니다. 대문자 태그명을 반환

      nodeValue와 innerHTML 속성

      DOM을 처리시 일반적인 오류는 요소에 텍스트가 포함된 것으로 생각하는 것입니다.

      <h1 id="header">Document Heading</h1>

      위 예에서 <h1>은 텍스트가 들어 있지 않습니다.
      <h1> 하위 노드로 TEXT_NODE가 들어있습니다.
      이 TEXT_NODE의 nodeValue값이 Document Heading 이고,
      이것은 h1요소의 innerHTML 속성으로 접근할 수 있습니다.

      위의 방법을 이해하는 것은 트리구조와 DOM 탐색을 이해하는데 유용합니다.

    • 노드 관련 메서드

      메서드 설명
      element.compareDocumentPosition() 문서에서 두 요소의 위치를 비교합니다.
      element.contains() 노드가 요소의 하위 항목인 경우 true를 반환합니다.
      element.hasChildNodes() 하위노드가 있으면 true를 반환합니다. TEXT_NODE, COMMENT_NODE를 포함합니다.
      element.isEqualNode() 두 노드가 동일한 요소인지 비교합니다.
      element.isSameNode() 두 노드가 동일한 노드인지 비교합니다.