[JS] html/xml 문서 재귀로 선회하여 출력

활용할 html 문서

<div class='source'>
  <div class='system' number='1'>
    1번
    <div class='system' number='2'>
      2번
      <div class='system' number='3'>
        3번
      </div>
      <div number='3-1'>
        3-1번
      </div>
    </div>
  </div>
  <div class='test'>
  test
  </div>
</div>

<div class='result'>
</div>

 

 

 

1 그냥 자식이 있으면 출력하는 코드

var data = $('.source');

findSystemLevel(data);

function findSystemLevel(data) {

  if (data.children.length) { // 자식태그가 있다면
    for (var i = 0; i < data.length.length; i++) {         
      findSystemLevel(data.length[i]);
    } 
  }
  
}

 

 

2 특정 클래스의 자식만 출력하는 코드

: 배열에 담아 출력

var test = findSystemLevel('system');

 function findSystemLevel(className) {
  let result = []; // 결과 요소를 담을 배열

  let body = document.body; // 최상위 element

  //리커젼 함수
  let recursion = function(element) {
    
    if (element.classList.contains(className)) { // element가 주어진 className을 담고 있는지 확인 후, true이면 result배열에 추가
    /* 	result.push("<div>" + element.textContent + "</div>"); */
       result.push(element); 
      //console.log(element.textContent);
    }

    if (element.children.length > 0) { // 자식 element가 있으면
      for (let i = 0; i < element.children.length; i++) { //for 문을 돌면서 리커젼을 통해 className 포함 여부를 확인
      console.log("들어감");
       if (element.classList.contains(className)) {
        recursion(element.children[i]);
        }
        
        
      }
    }

  }

  recursion(body);
  
  return result;

}
  
 $('.result').html(test);