querySelector 문법 (CSS 선택자)

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

일치하는 요소가 없으면 null을 반환한다.

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

기본적인 선택자

document.querySelector("#btn_prev"); 기본적인 선택자
document.querySelector(".btn_prev"); // class
document.querySelectorAll("button"); // 태그
document.querySelectorAll("[name]"); // name 속성이 있는 요소 모두
document.querySelectorAll("[value='1']") // value 속성이 1 인 요소 모두
document.querySelectorAll("#btn_prev, button")// ID가 'btn_prev' 인 요소와 Button 태그들을 선택
document.querySelectorAll("button#btn_prev");// button 태그이면서 아이디가 'btnPrev' 인 요소를 선택
document.querySelectorAll('input[type="checkbox"]');
document.querySelector("input[name=subject]")
document.querySelector("[name=stx]");
document.querySelector("meta[name='token']");

계층 선택자

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

^ , $, *, ! 선택자

document.querySelectorAll("[value*='a']"); // * 어느곳에라도 있는지 : 'value'라는 속성의 값에 'a'라는 문자가 포함된 요소 선택
document.querySelector("[value^='a']");// ^ 시작 : 'value'라는 속성의 값이 'a'로 시작하는 요소 선택
document.querySelectorAll("[value$='e']"); // $ 끝 : 'value'라는 속성의 값이 'e'으로 끝나는 요소 선택
document.querySelectorAll("[value!='1']"); // ! 아닌 것 : 'value'라는 속성의 값이 '1'이 아닌 요소 선택

필터 선택자

document.querySelectorAll("div:even"); // 짝수번째 div태그만 선택
document.querySelectorAll("div:odd"); // 홀수번째 div태그만 선택
document.querySelectorAll("li:nth-child(2)"); // li 태그의 형제들중 2번째 요소만 요소만 선택
document.querySelectorAll("li:first");// 첫번째 li태그 요소만 선택
document.querySelectorAll("li:last");// 마지막 li태그 요소만 선택
document.querySelector("li:eq(2)"); // 3번째 li태그 선택
document.querySelectorAll("li:gt(2)"); // 3번째이후 li태그 선택
document.querySelectorAll("li:lt(2)"); // 3번째이전 li태그 선택

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

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

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

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

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

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

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

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

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

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