[JavaScript] 자주 사용하는 querySelector 문법 (CSS 선택자)

서론

자주 사용하는 JavaScript의 querySelector(All) 메소드의 문법을 정리해보자.

 

✏️참고!

querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환한다.
일치하는 요소가 없으면 null을 반환한다.

지정한 선택자와 일치하는 모든 요소의 목록이 필요한 경우 querySelectorAll() 함수를 사용해야 한다.

 

---

적용

 

✔️1. 기본적인 선택자

// id
document.querySelector("#btnPrev")

// class
document.querySelector(".btnPrev")

// 태그
document.querySelectorAll("button")

// 속성
document.querySelectorAll("[name]"); // name 속성이 있는 요소 모두
document.querySelectorAll("[value='test']") // value 속성이 test 인 요소 모두

// And, Or
// ID가 'btnPrev' 인 요소와 Button 태그들을 선택
document.querySelectorAll("#btnPrev, button")

// button 태그이면서 아이디가 'btnPrev' 인 요소를 선택
document.querySelectorAll("button#btnPrev")



// 예시
document.querySelectorAll('input[type="checkbox"]');
document.querySelector("input[name=useYn]")
document.querySelector("[name=searchWord]");
document.querySelector("meta[name='csrf_token']");

 

 

✔️2. 계층 선택자

// div 바로 밑에 있는 input 태그를 선택 (바로 밑에 있는 자식들만)
document.querySelectorAll("div > input")


// div 태그 밑에 있는 input 태그를 선택
document.querySelectorAll("div input")

 

 

✔️3. check 관련 (체크박스, 라디오 버튼)

// checked 된 value 값 구하기
document.querySelector("input[name=contentsType]:checked").value
document.querySelector("input[type=radio]:checked").value
document.querySelector("input[type=radio]:checked").getAttribute("data-value")

// 특정 value 값을 가진 선택자에 check 옵션 주기
document.querySelector("input[name='urlType'][value='" + dto.urlType + "']").checked = true;

// check 여부 리턴 (true/false)
document.querySelector("input[name=useYn]").checked

 

 

✔️4. ^ , $, *, ! 선택자

// * 어느곳에라도 있는지
// 'value'라는 속성의 값에 'A'라는 문자가 포함된 요소 선택
document.querySelectorAll("[value*='A']")

// ^ 시작
// 'value'라는 속성의 값이 'A'로 시작하는 요소 선택
document.querySelector("[value^='A']")

// $ 끝
// 'value'라는 속성의 값이 'n'으로 끝나는 요소 선택
document.querySelectorAll("[value$='n']")

// ! 아닌 것
// 'value'라는 속성의 값이 'test'이 아닌 요소 선택
document.querySelectorAll("[value!='test']")

 

 

 

✔️5. 필터 선택자

- even, odd : 짝수/홀수 인덱스의 요소만 필터 (인덱스는 0부터 시작)

// 짝수번째 div태그만 선택
document.querySelectorAll("div:even")
 
// 홀수번째 div태그만 선택
document.querySelectorAll("div:odd")

 

 

- nth-child(index) : 형제 요소 중 index에 해당하는 요소만 필터

// li 태그의 형제들중 2번째 요소만 출력
document.querySelectorAll("li:nth-child(2)")

 

 

- first, last: 첫 번째, 마지막 요소만 필터

// 첫번째 li태그와, 마지막 li태그 요소만 선택
document.querySelectorAll("li:first")
document.querySelectorAll("li:last")

 

 

- eq(index), gt(index), lt(index): index번째 요소, index번째 이후 요소 선택, index번째 이전 요소 선택

(index는 0부터)

// 3번째 li태그 선택
document.querySelector("li:eq(2)")
 
// 3번째이후 li태그 선택
document.querySelectorAll("li:gt(2)")
 
// 3번째이전 li태그 선택
document.querySelectorAll("li:lt(2)")

 

 

- selected, checked, disabled, enabled, focus : 요소 상태에 따른 필터

// selected된 option만 선택
document.querySelectorAll("option:selected")
 
// checked된 checkbox만 선택
document.querySelectorAll("input[type='checkbox']:checked")
 
// disabled된 input태그만 선택
document.querySelectorAll("input:disabled")
 
// enabled된 input태그만 선택
document.querySelectorAll("input:enabled")
 
// focus된 input태그만 선택
document.querySelectorAll("input:focus")

 

 

- not(원치 않는 선택자) : 원치않는 선택자를 필터

// input태그중 disabled되지 않은 요소만 선택
document.querySelectorAll("input:not(:disabled)")

document.querySelectorAll(".temp .btn:not(:nth-child(1))")

document.querySelectorAll(".temp .btn:not([value='" + 동적 데이터 + "'])")

 

 

- has(포함된 선택자) : 포함된 선택자를 포함하고 있는 선택자를 필터

- contains(문자열) : 문자열을 포함한 선택자를 필터

// h1태그를 포함한 div태그만 선택
document.querySelectorAll("div:has(h1)")

// '테스트' 라는 텍스트를 포함한 p 태그를 선택
document.querySelectorAll("p:contains('테스트')")

 

 

- hidden, visible : 숨겨진, 보이는 요소만 필터

// 숨겨진 div태그를 선택
document.querySelectorAll("div:hidden")
 
// 보이는 div태그를 선택
document.querySelectorAll("div:visible")