JS - DOM 자식 노드 다루기

다음 표를 이용하면 선택한 요소의 자식 요소나 형제 요소 모두를 배열로 저장하여 객체로 반환받을 수 있습니다.

속 성	설 명
parentNode	선택한 노드의 부모 노드를 반환
children	모든 자식 노드를 배열로 저장되어 객체로 반환 태그 이름만 저장됩니다.
childNodes	주석과 텍스트를 노드로 간주한다는 점을 제외하면 children 과 동일 아래 노드를 배열로 저장됩니다. 주석: #comment 텍스트(또는 줄바꿈): #text   태그로 감싸지 않은 텍스트 속성: 속성의 이름 요소: 대문자인 태그이름
childElementCount	선택한 노드의 자식 노드의 수를 반환 children.length 와 동일한 결과를 얻습니다.
firstChild	선택한 노드의 첫 번째 자식 노드를 객체로 반환 요소, 텍스트, 주석을 노드로 판단하며 아래 값을 반환 주석: #comment 텍스트(또는 줄바꿈): #text   태그로 감싸지 않은 텍스트 속성: 속성의 이름 요소: 대문자인 태그이름 childNodes[0] 과 동일한 결과를 얻습니다.
firstElementChild	태그 이름만 반환한다는 점을 제외하면 firstChild 와 동일
lastChild	선택한 노드의 마지막 자식 노드를 객체로 반환 요소, 텍스트, 주석을 노드로 판단하며 아래 값을 반환 주석: #comment 텍스트(또는 줄바꿈): #text   태그로 감싸지 않은 텍스트 속성: 속성의 이름 요소: 대문자인 태그이름
lastElementChild	태그 이름만 반환한다는 점을 제외하면 lastChild 와 동일
nextSibling	선택한 노드의 다음 형제 노드를 객체로 반환 요소, 텍스트, 주석을 노드로 판단하며 아래 값을 반환 주석: #comment 텍스트(또는 줄바꿈): #text   태그로 감싸지 않은 텍스트 속성: 속성의 이름 요소: 대문자인 태그이름
nextElementSibling	태그 이름만 반환한다는 점을 제외하면 nextSibling 과 동일
previousSibling	선택한 노드의 이전 형제 노드를 객체로 반환 요소, 텍스트, 주석을 노드로 판단하며 아래 값을 반환 주석: #comment 텍스트(또는 줄바꿈): #text   태그로 감싸지 않은 텍스트 속성: 속성의 이름 요소: 대문자인 태그이름
previousElementSibling	태그 이름만 반환한다는 점을 제외하면 previousSibling 와 동일

아래 예제들은 다음과 같은 HTML 이 있다는 가정에서의 결과입니다.

<!-- 형제요소1 -->
<div>내용1</div>
 
<!-- 형제요소2 -->
<ul id="list">
  <!-- children[0] -->
  <li>크롬</li>
  <!-- children[1] -->
  <li>사파리</li>
  <!-- children[2] -->
  <li>옛지</li>
  <!-- children[3] -->
  <li>파이어폭스</li>
  <!-- children[4] -->
  <li>익스플로어</li>
  <!-- children[5] -->
  <li>
    기타
    <ul>
      <!-- children[0].children[0] -->
      <li>habony</li>
      <!-- children[0].children[1] -->
      <li>js</li>
    </ul>
  </li>
</ul>

<!-- 형제요소3 -->
<p>내용2</p>

childElementCount, parentNode

childElementCount 는 자식 노드의 개수를 반환하고 parentNode 는 선택한 요소의 부모 노드를 반환합니다.

<script>
var list = document.getElementById("list");

// ul 의 자식 요소는 6개 입니다.
document.write( list.childElementCount + "<br/>" );
// 결과: 6

// 이렇게 해도 결과는 같습니다.
document.write( list.children.length + "<br/>" );
// 결과: 6


// ul 의 부모 노드를 확인합니다.
document.write( list.parentNode.nodeName + "<br/>");
// 결과: BODY
</script>

children 

다음은 children 에 대한 예제입니다.

<script>
var list = document.getElementById("list");

// ul 의 세 번째 자식 요소는...?
document.write( list.children[2].textContent + "<br/>");
// 결과: 옛지


// ul 의 마지막 자식 요소의 첫 번째 자손은...?
// children[5] : 6번째 자식요소에서
// children[0] : ul 의 하위 요소
// children[0] : 첫 번째 li
document.write(
  list.children[5].children[0].children[0].textContent + "<br/>"
);
// 결과: habony

// ul 의 마지막 자식 요소의 두 번째 자손은...?
// children[5] : 6번째 자식요소에서
// children[0] : ul 의 하위 요소
// children[1] : 두 번째 li
document.write( 
  list.children[5].children[0].children[1].textContent + "<br/>"
);
// 결과: js
</script>

firstElementChild, lastElementChild

firstElementChild 는 첫 번째 자식 노드를, lastElementChild 는 마지막 자식 노드를 찾습니다.

<script>
var list = document.getElementById("list");

// ul 의 첫 번째 자식 노드의 텍스트
document.write( list.firstElementChild.textContent + "<br/>");
// 결과: 크롬

// ul 의 마지막 자식 노드의 텍스트
// 자식 노드와 모든 하위 요소를 하나의 문자열로 반환
document.write( list.lastElementChild.textContent + "<br/>");
// 결과: 기타 habony js
</script>

nextElementSibling, previousElementSibling

nextElementSibling 는 다음 형제 요소를 반환하고, previousElementSibling 는 선택한 요소 앞의 형제 요소를 찾습니다.

<script>
var list = document.getElementById("list");

// ul 의 다음 형제 요소는 <p> 태그입니다.
document.write( list.nextElementSibling.textContent + "<br/>");
// 결과: 내용2

// ul 의 이전 형제 요소는 <div> 태그입니다.
document.write( list.previousElementSibling.textContent + "<br/>");
// 결과: 내용1
</script>

childNodes 

다음은 childNodes 에 대한 예제입니다. 줄바꿈과 텍스트, 주석을 노드로 판단하는데, 주석은 #comment, 텍스트나 줄바꿈은 #text 로 반환합니다.

ul 요소의 자식 요소에 대한 반환 값입니다.

<script>
var list = document.getElementById("list");

for(var prob in list.childNodes) {
  document.write( list.childNodes[prob].nodeName + "<br/>");
}
/*
결과:
#text
#comment
#text
LI
#text
#comment
#text
LI
#text
#comment
#text
LI
#text
#comment
#text
LI
#text
#comment
#text
LI
#text
#comment
#text
LI
#text
*/
</script>