어제 오늘 내일

[Javascript] node type 체크하기 본문

IT/Javascript

[Javascript] node type 체크하기

hi.anna 2020. 8. 11. 01:09

 

 

DOM 노드의 타입을 체크하기 위해서는

nodeType 프로퍼티를 사용합니다.

 

 

nodeType 프로퍼티

var type = node.nodeType;

nodeType은 node의 type을 상수로 리턴합니다.

 

리턴 상수 타입 예제
1 element <p />, <div />
3 text Hello
4 CDATASection <!CDATA[[...]] >
7 ProcessingInstruction <?xml-stylesheet... ?>
8 Comment <!-- comment -->
9 Document document
10 DocumentType <!DOCTYPE html>
11 DocumentFragment  

 

 

예제

<div id="sample">
  안녕하세요?
</div>

<div id="result"></div>
let elem = document.getElementById('sample');

const docuType = document.nodeType;
const divType = elem.nodeType;
const textType = elem.firstChild.nodeType;


// 출력
document.getElementById('result').innerText += docuType; // 9
document.getElementById('result').innerText += divType; // 1
document.getElementById('result').innerText += textType; // 3

 

 

 HTML 

nodeType을 테스트 할 sample div와

결과를 출력할 result div가 있습니다.

 

 JS 

const docuType = document.nodeType;

document의 타입은 9(Document) 입니다.

 

let elem = document.getElementById('sample');
const divType = elem.nodeType;

div sample은 element 객체이므로 1(element)을 리턴하였습니다.

 

let elem = document.getElementById('sample');
const textType = elem.firstChild.nodeType;

div sample의 첫번째 자식 노드는 '안녕하세요?' 라는 텍스트 노드입니다.

따라서, 3(Text)을 리턴하였습니다.

 

 

반응형

'IT > Javascript' 카테고리의 다른 글

[Javascript] 배열 값 중복 체크하는 3가지 방법  (1) 2020.08.14
[Javascript] input 박스에 숫자만 입력되도록 설정하는 4가지 방법  (3) 2020.08.12
[Javascript] input 입력값 가져와서 출력하기  (10) 2020.08.10
[Javascript] 세는 나이, 만나이 계산하기  (8) 2020.08.09
[Javascript] 배열 정렬하기 (오름차순, 내림차순, 문자열, 객체)  (3) 2020.08.08
공유하기 링크
'IT/Javascript' Related Articles more
Comments