Javascript Data 속성(Data Attribute) 값으로 요소(Element) 찾기

Javascript 의 Data 속성값(Data Attribute Value)로 HTML의 요소(Element)를 찾아야 하는 경우가 존재한다.

 

querySelector를 이용하여 찾을 수 있다.

(querySelector는 해당 첫 요소를, querySelectorAll은 모든 요소를 가져온다.)

// Javascript 방식
// "data-test" 속성이 "test-button" 인 값을 불러온다.
// (*아래 예시는 selectAll이라 모두 가져온다. 한 값만 가져오는 경우 querySelector 사용) 
document.querySelectorAll('[data-test="test-button"]');