• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012