자바스크립트: 클래스가 있는지 체크하기

자바스크립트(JavaScript)에서 특정 클래스가 있는 경우에 실행되도록 스크립트를 만들고 싶은 경우에 참고해보세요.

자바스크립트: 클래스가 있는지 체크하기

예를 들어, mobile 클래스가 존재하는 경우에 팝업을 표시하는 경우를 생각해볼 수 있습니다.

<div class="mobile">

 그러면 다음과 같은 스크립트를 사용할 수 있습니다.

var isMobileVersion = document.getElementsByClassName('mobile');
if (isMobileVersion.length > 0) {
    // elements with class "mobile" exist
}

getElementsByClassName는 배열과 유사한 개체(array-like object)인 NodeList를 반환한다고 합니다. 그 길이를 체크하여 정의된 클래스가 있는 요소(element)가 있는지 결정할 수 있습니다("If class exists, do something with Javascript" 참고). 

getElementsByClassName returns a NodeList which is an array-like object. You can check its length to determine if elements with defined class exist:

마치며

워드프레스의 일부 페이지에서 자바스크립트와 관련하여 "Uncaught TypeError: Cannot read property 'innerHTML' of undefined at (index):776..."과 비슷한 오류가 발생하여 문제의 원인을 찾다가 해당 스크립트가 실행되지만 스크립트에서 필요로 하는 클래스가 없는 페이지에서 이와 같은 오류가 발생하는 것을 발견했습니다. 그래서 해당 스크립트가 특정 클래스(class)가 있는 경우에만 실행되도록 하니 문제가 해결되었습니다.ㅎ

참고

avada.tistory.com/342

javascript로 텍스트 변경하기 (자체 정리용)

avada.tistory.com/1784

티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법