웹브라우저 JavaScript

노드 종류 API

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. 

  • Node.nodeType
    node의 타입을 의미한다. 
  • Node.nodeName
    node의 이름 (태그명을 의미한다.)

Node Type

노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다.

for(var name in Node){
   console.log(name, Node[name]);
}

결과

ELEMENT_NODE 1 
ATTRIBUTE_NODE 2 
TEXT_NODE 3 
CDATA_SECTION_NODE 4 
ENTITY_REFERENCE_NODE 5 
ENTITY_NODE 6 
PROCESSING_INSTRUCTION_NODE 7 
COMMENT_NODE 8 
DOCUMENT_NODE 9 
DOCUMENT_TYPE_NODE 10 
DOCUMENT_FRAGMENT_NODE 11 
NOTATION_NODE 12 
DOCUMENT_POSITION_DISCONNECTED 1 
DOCUMENT_POSITION_PRECEDING 2 
DOCUMENT_POSITION_FOLLOWING 4 
DOCUMENT_POSITION_CONTAINS 8 
DOCUMENT_POSITION_CONTAINED_BY 16 
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 32

아래 예제는 노드 종류 API를 이용해서 노드를 처리하는 예제다. 함수가 자기 자신을 호출하는 것을 재귀함수라고 하는데 본 예제는 재귀 함수의 예를 보여준다.

 

<!DOCTYPE html>
<html>
<body id="start">
<ul>
    <li><a href="./532">html</a></li> 
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
<script>
function traverse(target, callback){
    if(target.nodeType === 1){
		//if(target.nodeName === 'A')
		callback(target);
		var c = target.childNodes;
		for(var i=0; i<c.length; i++){
			traverse(c[i], callback);		
		}	
	}
}
traverse(document.getElementById('start'), function(elem){
	console.log(elem);
});
</script>
</body>
</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. 유유
    감사합니다!
  2. 감사합니다
  3. tachyon
    감사합니다
  4. yihsang
    재귀함수와 콜백...
    잘 보았습니다. 감사합니다.
  5. JustStudy
    2016.07.08 금
    고맙습니다 3.
  6. JustStudy
    2016.07.30금
    고맙습니다 2.
  7. 이주환
    2016. 04. 27
    잘보고 갑니다~!
  8. JustStudy
    고맙습니다
  9. GunLoc
    재귀함수 부분이 조금 어렵네요. 다음에 다시 볼땐 나아질런지..
  10. 박찬울
    traverse 함수 내의 for 문의 역할은

    가장 먼저 선택된 태그의 하위 태그들을 다시 traverse 함수로 리턴(재귀?) 해주는 것인데

    '구묵'님의 코드에서는 타겟의 코드네임이 A 가 아니라면 동작 자체를 멈춰버린다는 의미라고 생각하면 맞는건가요?

    이럴 때 디버그를 쓰는것이기도 하고요?

    직접 실습하러 가보겠습니다.

    if(target.nodeName==='A'){callback(target);} 과 같이 중괄호를 닫아주면 의미가 명확해질 듯 합니다만.
    대화보기
    • 툰아미
      재귀함수 2번 동영상 마지막 부분에 나와요. 조건문을 걸어서 callback(target); 이 A 태그에만 적용되는 거에요. A 태그만 걸러내는 if문이 없다면 UL 태그 이하의 모든 태그에 다 적용되네요.

      function traverse(target, callback){
      if(target.nodeType===1){
      if(target.nodeName==='A')
      callback(target);
      for(var i=0;i<target.childNodes.length;i++){
      traverse(target.childNodes[i],callback)
      }
      }
      });
      대화보기
      • 구묵
        강의에서
        if(target.nodeName==='A') 뒤에 {}가 빠졌다고 생각해서

        function traverse(target, callback){
        if(target.nodeType===1){
        if(target.nodeName==='A'){
        callback(target);
        for(var i=0;i<target.childNodes.length;i++){
        traverse(target.childNodes[i],callback)
        }
        }
        }
        }

        이렇게 해봤는데 아무런 테그도 선택하질 않네요.
        중괄호를 쓰지 않은 if문은 무슨 뜻일까요?

        //강의에서 쓰인 코드
        function traverse(target, callback){
        if(target.nodeType===1){
        if(target.nodeName==='A')
        callback(target);
        for(var i=0;i<target.childNodes.length;i++){
        traverse(target.childNodes[i],callback)
        }
        }
        }
      • WayneKing
        아직 이해를 못해서 우리말로도 못 정의했는 데.
        이해하고 나니까 그렇네요. 나중에 호출할 것!!
        대화보기
        • egoing
          나증에 호출될 것이다. 정도요? ㅎㅎ
          대화보기
          • WayneKing
            1년전에 봤었는 데...
            지금봐도 해깔리네요
            콜백이라는 말은 우리말고 쉽게 풀어쓰면 어떻게 되나요?
          • 안녕하세요 자바스크립트를 공부중인데 재귀함수를 이용한 노드탐색에대해 질문이있는데 메일이나 쪽지를 드릴수있을까요
          • dreamh1123
            명강의입니다. 재귀함수 로직에 대해 잘 알수 있었던 시간이었습니다.
          • 저번주그남자
            전혀 다른분야를 공부하는게 재미도 있지만 참 머리도 아프네요 ㅎㅎ 항상좋은 강의, 친절한 설명 감사합니다.
          • 2015-11-12
            이건 좀 어렵네요. ㅜㅜ
            체크해놓고 나중에 다시 봐야겠네요.
          • 코딩!
            재귀함수 언젠가 수학시간에 들어본것 같기도 하고 가물가물 ㅎㅎ
            뭔가 두개를 짬뽕해서 서로 쿵짝쿵짝하는 코딩같긴 한데
            잘 모르겠네요 ㅎㅎㅎ
            복잡한 만큼 뭔가 굉장히 효율적인 코딩인 것 같다는 생각이 드네요
          • ljs93kr
            // 머머님
            네 그저 반복작업을 위한 for문 안에서만 유효하는, 인덱스를 의미하는 일종의 컨테이너(변수)라고 보시면 될 것 같네요!
            대화보기
            • 머머
              함수 안의 var c가 하는 역할은 그냥 컨테이너인가요?
            • 육점이
              감사합니다. 마지막 예제가 난이도가 조금 있어서 헤매였지만 친절하고 멋진 설명 덕택에 잘 이해가 된거 같아 기분이 좋네요. ^^
            • 박진형
              강의를 정말 감사해하며 잘 듣고 있는 학생입니다.
              아주 개인적인 의견입니다.
              node가 어느 곳에서 사용되는지 강의에서 말씀해주시면 더욱 배울때 아 여기서 써야하는구나 하면서 잘 습득될 것 같습니다. 위의 재귀함수 또한 어디서 사용하면 어떻게 좋다라는 말씀이 있으면 더 좋을 것 같습니다.
            • 궁금이
              강의 잘보고있습니다, 감사합니다


              궁금한게 있는데..
              재귀함수를 쓰지않고 반복문으로 처리할수있을까요?
              된다면 어떻게 로직을 바꿔아할까요?
            • 규빈이아빠
              명강의 입니다^^
            • 도로시
              아하! 그렇군요. 감사합니다 :)
              대화보기
              • 비니
                조건문 실행 내용이 한줄미만일때는 안묶어도 실행이 됩니다 ^^
                대화보기
                • 도로시
                  사소한 부분이지만..
                  if(target.nodeName === 'A') 를 쓸 때,
                  그 뒤에 나오는 내용을 { } 이것으로 묶지 않았는데
                  조건문을 쓸 때 꼭 { } 이 괄호를 쓰지 않아도 실행이 되나 보네요..^^
                • somdari
                  정말 짧은 코드안에 많은걸 녹여 놓으셨네요.. 좋은 수업 감사합니다..^^;
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기