[DOM_Element] JS - hasChildNodes() 메서드 - 자식노드유무 체크 (= hasChildNodes메서드 = 해즈차일드노우즈 메서드 = 해즈차일드노드즈 메서드)

목차

1. hasChildNodes() 예제 - 자식노드 유무 체크
2. hasChildNodes() 정의
3. hasChildNodes() 구문
4. hasChildNodes() 예제 - 자식노드 있으면 첫 번째 자식노드 삭제

hasChildNodes() 예제 - 자식노드 유무 체크

 

<ul id="code">

  <li>HTML</li>

  <li>CSS</li>

</ul>

<button onclick="hz()">클릭</button>

<p id="demo"></p>

<script>

function hz() {

  var list = document.getElementById("code").hasChildNodes();

  document.getElementById("demo").innerHTML = list;

}

</script>

 

결과보기 

hasChildNodes() 정의

지정 노드에 자식노드 있으면 true 반환. 그렇지 않으면 false 반환.

 

---

 

1.

주요 브라우저 모두 지원.

2.
DOM 버전: Core Level 1 Node Object

 

---

 

[주의] 아래 경우도 true (자식노드 존재 O)로 판단

 

1.

ul 요소 안에 빈 공백 있는 경우
(예)

<ul id="myList"> </ul>

 

2.

ul 요소 안에 줄바꿈이 있는 경우

(예) 

<ul id="myList">

</ul>

hasChildNodes() 구문

 

node.hasChildNodes()

 

---

[매개변수]

 

없음.

 

---

[반환값]

 

• (자식노드 O  ||  공백 O  ||  줄바꿈 O) 경우, true 반환.
• (자식노드 X  &&  공백 X  &&  줄바꿈 X) 경우, false 반환.

hasChildNodes() 예제 - 자식노드 있으면 첫 번째 자식노드 삭제

 

<ul id="code"><li>HTML</li><li>CSS</li></ul>

<button onclick="hz()">클릭</button>

<script>

function hz() {

  var list = document.getElementById("code");

  

  if (list.hasChildNodes()) {

    list.removeChild(list.childNodes[0]);

  }

}

</script>

 

결과보기