Angular에서 getElementsByClassName를 쓸 때 주의해야 할 점

외주 프로젝트를 작업하던 중 해당 페이지 내용을 pdf 형식으로 다운로드할 수 있는 기능이 필요했다.

pdf로 뽑을 내용의 가장 상위 태그에 class를 주어 canvas로 작업하기로 했다.

 

클래스가 'home'인 첫 번째 요소 가져오기

 const el = document.getElementsByClassName(
          'home'
        )[0] as HTMLElement;

첫 번째로 작업한 내용은 위와 같이 클래스가 'home'인 첫 번째 요소를 가져와서 canvas로 뽑아 오는 것이였다.

 

하지만, 여기서 맞이한 오류는 해당 페이지에서 새로고침을 했을 때 el의 값이 undefined이여서 받아오는 값이 없기 때문에 canvas형성도 안 되고 pdf 다운로드도 안 된다는 것.

왜 이런 문제가 발생하는 건지 고민해 본 결과 해당페이지 이전에 로드되었던 home페이지에도 'home'인 클래스명이 있었던 것이였다.

 

내가 지금 사용하는 프레임워크는 Angular에 ionic을 사용하고 있기 때문에 라우터 특성 상 이동한 페이지가 dom에 쌓인다는 것이다.

결론, getElementsByClassName() 메서드를 사용할 때는 클래스 명을 지정할 때 주의해야 한다는 것.

 

getElementsByClassName()란 무엇일까?

이 메서드는 지정된 클래스 이름을 가진 모든 하위 요소를 포함하는 getElementsByClassName()라이브를 반환한다.

특정 class를 가지고 있는 모든 dom 요소에 접근하기 때문에 SPA 프레임워크를 사용할 경우에 주의해야한다.