(JavaScript) DOM은 무엇인가? DOM - Node와 Element 이해하기

DOM이란?

• HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것
  -> HTML 문서에 작성된 내용을 트리구조(계층형으로 표현)로 나타냈을 때 각각의 태그, TEXT, COMMENT 등을 Node라고 한다.
  

<h1>Node 확인하기</h1>
    <ul id="test">
      <!-- Node 확인 테스트 주석입니다. -->

      <li id="li1">1번</li>
      <li class="cls">2번</li>
      <!-- 중간 주석 -->
      <li style="background-color: yellow">3번</li>
      <li>
        <a href="#">4번</a>
      </li>
    </ul>

Node 확인하기

document.getElementById('btn1').addEventListener('click', () => {
  // #test의 모든 자식 노드를 얻어오기
  // - 요소.childNodes : 요소의 자식 노드를 모두 반환(NodeList)
  const list = document.getElementById('test').childNodes;

  console.log(list);

결과

html의 코드를 list 변수에 담아 콘솔창에서 확인해보면 배열 형태로 나와있는 것을 확인할 수 있다.

Node 탐색 방법

1) 부모 노드 탐색 : parentNode

2) 첫 번째 자식 노드 탐색 : firstChild

3) 마지막 자식 노드 탐색 : lastChild

4) 원하는 위치(인덱스)에 존재하는 자식 노드 탐색
: childNodes[index]
5) 이전 형제 노드 탐색 : previousSibling
6) 다음 형제 노드 탐색 : nextSibling

1번

2번

3번

4번

확인하기