[Javascript] 자식 노드(node), 요소(element) 존재 여부 확인하기

 

특정 element에

자식 노드(node)가 존재하는지,

자식 요소(element)가 존재하는지 확인하는 방법입니다.

• 자식 노드(node) 존재 여부 확인
• 자식 요소(element) 존재 여부 확인

 

시작하기 전에!

node와 element의 차이가 궁금하다면?

[Javascript] node와 element의 차이

자식 node, 자식 element를 탐색하는 방법이 궁금하다면?

[Javascript] 부모, 자식, 형제 노드(node)와 요소(element) 찾기

 

 

 

자식 노드(node) 존재 여부 확인

• firstChild
• hasChildNodes()
• childNodes.length

 

  firstChild  

<div id='no_child'>No Child</div>
<ul id='has_child'>
  <li>바나나</li>
  <li>사과</li>
</ul>
<div> ======== 결과 ======== </div>

const no_child = document.getElementById('no_child');
const has_child = document.getElementById('has_child');

// firstChild 값 찍기
document.write(no_child.firstChild); // [object Text]
document.write('<br>');
document.write(has_child.firstChild); // [object Text]
document.write('<br>');

// 자식 노드가 존재하는지 체크하기
if(no_child.firstChild) {
  document.write('no_child는 자식이 있습니다. <br>'); // printed
}else {
  document.write('no_child는 자식이 없습니다. <br>');
}

if(has_child.firstChild) {
  document.write('has_child는 자식이 있습니다. <br>'); // printed
}else {
  document.write('has_child는 자식이 없습니다. <br>');
}

 

no_child.firstChild;

has_child.firstChild;

DOM에서 첫 번째 자식 노드가 있으면 자식 노드를 리턴하고,

만약 자식 노드가 없으면 null을 리턴합니다.

노드는 <div>, <p>, <li> 등의 태그(element) 뿐만 아니라

공백, 줄바꿈 등의 텍스트도 노드로 보기 때문에

firstChild 속성으로 자식 노드의 여부를 체크하면

자식 노드가 있는 것으로 체크됩니다.

'no_child' 노드의 자식 노드는 'No Child'라는 텍스트입니다.

'has_child' 노드의 자식 노드는 줄바꿈과 <li>태그 영역들입니다.

이 예제에서 HTML의 줄바꿈, 텍스트를 제거하면서 값이 어떻게 바뀌는지 테스트해 보세요.

 

 

  hasChildNodes()  

<div id='no_child'>No Child</div>
<ul id='has_child'>
  <li>바나나</li>
  <li>사과</li>
</ul>
<div> ======== 결과 ======== </div>

const no_child = document.getElementById('no_child');
const has_child = document.getElementById('has_child');

// hasChildNodes() 값 찍기
document.write(no_child.hasChildNodes()); // true
document.write('<br>');
document.write(has_child.hasChildNodes()); // true
document.write('<br>');

// 자식 노드가 존재하는지 체크하기
if(no_child.hasChildNodes()) {
  document.write('no_child는 자식이 있습니다. <br>'); // printed
}else {
  document.write('no_child는 자식이 없습니다. <br>');
}

if(has_child.hasChildNodes()) {
  document.write('has_child는 자식이 있습니다. <br>'); // printed
}else {
  document.write('has_child는 자식이 없습니다. <br>');
}

 

no_child.hasChildNodes();

has_child.hasChildNodes();

hasChildNodes() 함수는 해당 노드에 자식 노드가 있는지 체크하여

boolean 값을 반환합니다.

element가 이닌 node를 체크하기 때문에

모두 true라는 결과를 리턴하였습니다.

 

 

  childNodes.length  

<div id='no_child'>No Child</div>
<ul id='has_child'>
  <li>바나나</li>
  <li>사과</li>
</ul>
<div> ======== 결과 ======== </div>

const no_child = document.getElementById('no_child');
const has_child = document.getElementById('has_child');

// childNodes.length 값 찍기
document.write(no_child.childNodes.length); // 1
document.write('<br>');
document.write(has_child.childNodes.length); // 5
document.write('<br>');

// 자식 노드가 존재하는지 체크하기
if(no_child.childNodes.length > 0) {
  document.write('no_child는 자식이 있습니다. <br>'); // printed
}else {
  document.write('no_child는 자식이 없습니다. <br>');
}

if(has_child.childNodes.length > 0) {
  document.write('has_child는 자식이 있습니다. <br>'); // printed
}else {
  document.write('has_child는 자식이 없습니다. <br>');
}

 

no_child.childNodes.length;

has_child.childNodes.length;

childNodes는 해당 요소의 자식 목록을 NodeList 형태로 리턴합니다.

리턴된 NodeList의 length 속성을 사용하여

자식 노드의 갯수를 체크할 수 있습니다.

 

 

 

자식 요소(element) 존재 여부 확인

• firstElementChild
• childElementCount
• children.length

 

  firstElementChild  

<div id='no_child'>No Child</div>
<ul id='has_child'>
  <li>바나나</li>
  <li>사과</li>
</ul>
<div> ======== 결과 ======== </div>

const no_child = document.getElementById('no_child');
const has_child = document.getElementById('has_child');

// firstElementChild 값 찍기
document.write(no_child.firstElementChild); // null
document.write('<br>');
document.write(has_child.firstElementChild); // [object HTMLLIElement]
document.write('<br>');

// 자식 노드가 존재하는지 체크하기
if(no_child.firstElementChild) {
  document.write('no_child는 자식이 있습니다. <br>');
}else {
  document.write('no_child는 자식이 없습니다. <br>'); // printed
}

if(has_child.firstElementChild) {
  document.write('has_child는 자식이 있습니다. <br>'); // printed
}else {
  document.write('has_child는 자식이 없습니다. <br>');
}

 

no_child.firstElementChild;

has_child.firstElementChild;

firstElementChild 속성은 element의 첫 번째 자식 요소(element)를 리턴합니다.

만약, 자식 element가 없으면 null을 리턴합니다.

firstChild 속성과 달리, element만 체크하기 때문에

중간에 있는 줄바꿈, 주석, 텍스트 등은 체크되지 않습니다.

보통 dom을 조작할 때는 element만을 조작하고 싶은 경우가 많기 때문에

node의 자식보다는 element의 자식을 체크하는 경우가 많습니다.

 

 

  childElementCount  

<div id='no_child'>No Child</div>
<ul id='has_child'>
  <li>바나나</li>
  <li>사과</li>
</ul>
<div> ======== 결과 ======== </div>

const no_child = document.getElementById('no_child');
const has_child = document.getElementById('has_child');

// childElementCount 값 찍기
document.write(no_child.childElementCount); // 0
document.write('<br>');
document.write(has_child.childElementCount); // 2
document.write('<br>');

// 자식 노드가 존재하는지 체크하기
if(no_child.childElementCount > 0) {
  document.write('no_child는 자식이 있습니다. <br>');
}else {
  document.write('no_child는 자식이 없습니다. <br>'); // printed
}

if(has_child.childElementCount > 0) {
  document.write('has_child는 자식이 있습니다. <br>'); // printed
}else {
  document.write('has_child는 자식이 없습니다. <br>');
}

 

no_child.childElementCount;

has_child.childElementCount;

childElementCount는 자식 요소(element)의 개수를 리턴합니다.

 

 

  children.length  

<div id='no_child'>No Child</div>
<ul id='has_child'>
  <li>바나나</li>
  <li>사과</li>
</ul>
<div> ======== 결과 ======== </div>

const no_child = document.getElementById('no_child');
const has_child = document.getElementById('has_child');

// children.length 값 찍기
document.write(no_child.children.length); // 0
document.write('<br>');
document.write(has_child.children.length); // 2
document.write('<br>');

// 자식 노드가 존재하는지 체크하기
if(no_child.children.length > 0) {
  document.write('no_child는 자식이 있습니다. <br>');
}else {
  document.write('no_child는 자식이 없습니다. <br>'); // printed
}

if(has_child.children.length > 0) {
  document.write('has_child는 자식이 있습니다. <br>'); // printed
}else {
  document.write('has_child는 자식이 없습니다. <br>');
}

 

no_child.children.length;

has_child.children.length;

children은 모든 자식 element 목록을 HTMLCollection 형태로 리턴합니다.

리턴 받은 HTMLCollection의 length 속성을 이용하여

자식 요소(element)의 개수를 체크할 수 있습니다.

 

---

 

자식 노드(node)의 존재 여부, 자식 요소(element)의 존재 여부를 체크하는 방법을 알아보았습니다.