element 목록을 tagName id className 으로 출력하기

 

개발 관련 문서 작성 중 페이지별 element 정보 목록을 추가할 필요가 있어 아래와 같이 작성하여 사용 하였다.

 

 

function printElement(elem){
  var print = '';
  document.querySelectorAll(elem).forEach((ipt)=>{
    var txt = ipt.tagName.toLocaleLowerCase();
    if('' != ipt.id) txt += '#' + ipt.id;
    if('' != ipt.className) txt += '.' + ipt.className.replaceAll(' ', '.');
    print += txt + '\n';
  });
  console.log(print);
}

printElement('input[type=button]');

위와 같이 함수를 생성한 후 대상을 지정하여 사용한다.

 

 

 

 

input#btnReload.btn.btn-primary.btn-very-sm.btn-reload
input#btnTest.btn.btn-primary.btn-very-sm.col-12

위와 같이 출력되는 것을 확인할 수 있다.