웹브라우저 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. Jeffry
    @enqn192 음 저도 javascript는 배운지 1달이 안되었지만 재귀에 대해서는 설명드릴수 있어서 짧은 지식으로 글써봅니다. 님이 말씀하시는거는 2중for문 하고 비슷한데 밖에 for문의 증감자가 하나 증가할 때마다 안의 for문이 돌게 되면 말하신것 처럼 나오는데 지금 저거는 재귀함수라서 body안에 들어와서 ul들어가고 li들어가서 안에 더이상 들어갈 곳이 없으면 return return 해서 쭉쭉 나오고 ul까지 나왔으면 다시 밑에 ul가서 또 들어가고 들어가고 그렇게 반복해서 더이상 들어갈곳 없이 밑에까지 내려오면 마지막으로 return해주게 되면 저렇게 다 출력이 됩니다! 어려운데 tree처럼 하나 끝까지 들어가서 다시 나오고 한다고 생각하시면 될 것 같아요!
  3. Seo Yun Seok Tudoistube
    자바스크립트 수업에서 재귀함수 보다가 일루 왔는데, Node.js 강의 들을때 한번 더 들어야 겠습니다.
    암기하지 않고 사용법을 익히면서 이해할 수 있는 빠른 방법을 찾고 싶습니다^^;;;
    감사합니다.^_____^!!!
  4. enqn192
    궁금한게 있어서 질문올립니다.
    함수 안에 for문이 있으면 재귀함수로 다시 콜이 될 때도 for문이 동작하지 않는가 해서요.
    for문이 동작하지 않아야지 저런 결과가 나올것 같은데 아니네요
    지금 생각으로는 for문이 함수 내에 있어서 재귀함수가 콜될때 마다 for문이 새롭게 동작하여
    위의 a태그만 골라내는 조건문이 없을 경우엔 body, ul, li, a, ..., ul 까지 모두 출력된 후에 맨 처음 태그인 body를 뺀 모든 태그가 출력되고 그렇게 마지막엔 ul태그만 출력될 것 같은 생각이 들거든요
    즉, 처음에 c가 body.childNodes 인 상태로 for문이 동작하여 body.childNodes[1] = ul이 되고 이 ul 태그 가 또다시 c = ul.childNodes인 상태로 for문 안에서 ul.childNodes[1] = li 이 되고... 이렇게 되어 결국 중복되는 출력이 많을것 같은데 아니네요.

    궁금합니다..
  5. crable
    감사합니다.
  6. Byeong Heon Lee
    너무 감사합니다~
  7. 신입1
    항상 감사합니다.
  8. 유유
    감사합니다!
  9. hyuna
    감사합니다
  10. tachyon
    감사합니다
  11. yihsang
    재귀함수와 콜백...
    잘 보았습니다. 감사합니다.
  12. JustStudy
    2016.07.08 금
    고맙습니다 3.
  13. JustStudy
    2016.07.30금
    고맙습니다 2.
  14. 이주환
    2016. 04. 27
    잘보고 갑니다~!
  15. JustStudy
    고맙습니다
  16. GunLoc
    재귀함수 부분이 조금 어렵네요. 다음에 다시 볼땐 나아질런지..
  17. 박찬울
    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년전에 봤었는 데...
            지금봐도 해깔리네요
            콜백이라는 말은 우리말고 쉽게 풀어쓰면 어떻게 되나요?
          • ssjs
            안녕하세요 자바스크립트를 공부중인데 재귀함수를 이용한 노드탐색에대해 질문이있는데 메일이나 쪽지를 드릴수있을까요
          • dreamh1123
            명강의입니다. 재귀함수 로직에 대해 잘 알수 있었던 시간이었습니다.
          • 저번주그남자
            전혀 다른분야를 공부하는게 재미도 있지만 참 머리도 아프네요 ㅎㅎ 항상좋은 강의, 친절한 설명 감사합니다.
          • 2015-11-12
            이건 좀 어렵네요. ㅜㅜ
            체크해놓고 나중에 다시 봐야겠네요.
          • 코딩!
            재귀함수 언젠가 수학시간에 들어본것 같기도 하고 가물가물 ㅎㅎ
            뭔가 두개를 짬뽕해서 서로 쿵짝쿵짝하는 코딩같긴 한데
            잘 모르겠네요 ㅎㅎㅎ
            복잡한 만큼 뭔가 굉장히 효율적인 코딩인 것 같다는 생각이 드네요
          • ljs93kr
            // 머머님
            네 그저 반복작업을 위한 for문 안에서만 유효하는, 인덱스를 의미하는 일종의 컨테이너(변수)라고 보시면 될 것 같네요!
            대화보기
            • 머머
              함수 안의 var c가 하는 역할은 그냥 컨테이너인가요?
            • 육점이
              감사합니다. 마지막 예제가 난이도가 조금 있어서 헤매였지만 친절하고 멋진 설명 덕택에 잘 이해가 된거 같아 기분이 좋네요. ^^
            • 박진형
              강의를 정말 감사해하며 잘 듣고 있는 학생입니다.
              아주 개인적인 의견입니다.
              node가 어느 곳에서 사용되는지 강의에서 말씀해주시면 더욱 배울때 아 여기서 써야하는구나 하면서 잘 습득될 것 같습니다. 위의 재귀함수 또한 어디서 사용하면 어떻게 좋다라는 말씀이 있으면 더 좋을 것 같습니다.
            • 궁금이
              강의 잘보고있습니다, 감사합니다


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