복수 클래스로 된 요소 선택하기 (자바스크립트)

예를 들어, document.querySelectorAll(".class1")을 사용하면 class1 클래스로 된 모든 요소에 적용됩니다. class1 클래스 또는 class2 클래스로 된 모든 요소를 선택하고 싶은 경우가 있을 수 있습니다. 이런 경우 개별적으로 만들어도 되겠지만 비효율적일 것입니다.

복수 클래스로 된 요소 선택 방법

How to get elements with multiple classes라는 제목의 Stackoverflow 글에서 class1 클래스와 class2 클래스가 모두 있는 요소를 선택하는 방법에 대하여 다루고 있습니다.

<div class="class1 class2"></div>

이 경우 다음과 같은 코드를 사용할 수 있습니다.

var list = document.getElementsByClassName("class1 class2");
var list = document.querySelectorAll(".class1.class2");

위의 스크립트를 사용하면 class1과 class2를 모두 가진 요소가 선택됩니다.

class1 클래스 또는 class 2 클래스를 가진 요소(즉, OR 연산)를 원하는 경우에는 다음과 같은 코드를 사용할 수 있습니다.

var list = document.querySelectorAll(".class1,.class2");

class1과 class2 중 하나만 가진 요소(두 클래스를 모두 가진 요소는 제외)를 선택하려는 경우에는 다음과 같은 형식으로 가능합니다.

var list = document.querySelectorAll(".class1:not(.class2),.class2:not(.class1)");

별 것은 아니지만 코드를 효율적으로 만드는 데 도움이 될 것입니다.

티스토리의 경우 자바스크립트 코드를 [**</body>**] 바로 위에 추가하면 보통 문제없이 작동할 것입니다.

워드프레스의 경우 다음 글을 참고하여 JavaScript를 로드할 수 있습니다.

워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법 - 워드프레스 정보꾸

이 방법이 정석이지만 번거로울 경우 WPCode 플러그인을 사용하여 코드를 추가할 수 있습니다.

워드프레스 헤더와 푸터에 쉽게 코드 삽입하기: WPCode Insert Headers and Footers 플러그인 - 워드프레스

GeneratePress 테마를 사용하는 경우에는 제너레이트프레스 테마에서 제공하는 Element 기능을 사용하면 편리하게 자바스크립트 코드를 추가할 수 있습니다.

GeneratePress 테마 후크 사용하기 - 워드프레스 정보꾸러미

참고

https://avada.tistory.com/2704

[자바스크립트] 외부 링크를 새 창으로 열기

https://avada.tistory.com/2008

자바스크립트: 숫자 천 단위마다 콤마를 찍는 방법