JavaScript와 JQuery에서 사용되는 선택자들에 대해서 살펴보겠습니다.
JQuery와 CSS의 선택자로 더 잘 알려져 있지만
JavaScript에 querySelector() 및 querySelectorAll()을 통해 접근 시 같은 선택자를 사용합니다.
* 물론 JavaScript에서 getElementById() 와같은 함수가 더 빠르고 지원이 잘 되지만
속도를 체감하기도 힘들뿐더러 코드가 더 깔끔하고 가독성이 좋다고 생각해 저는 querySelector()를 사용합니다.
기본 선택자
1. * : 모든 요소 선택
// 모든요소 선택
$("*")
document.querySelectorAll("*")2. # : ID 선택자 (ID명으로 선택)
// ID명이 'btnPrev'인 요소 선택
$("#btnPrev")
document.querySelector("#btnPrev")3. . : Class 선택자 (Class명으로 선택)
// Class 명이 'btn'인 요소 선택
$(".btn")
document.querySelectorAll(".btn")4. 태그명 : 태그명 선택자 (태그 이름으로 선택)
// 태그명이 'button'인 요소 선택
$("button")
document.querySelectorAll("button")
조합 선택자
조합 선택자는 여러 선택자들을 조합하여 사용하는 선택자입니다.
1. OR선택자 : , (콤마)로 구분하여 여러 선택자들을 한 번에 선택합니다.
// ID가 'btnPrev' 인 요소와 Button 태그들을 선택합니다.
$("#btnPrev, button")
document.querySelectorAll("#btnPrev, button")2. AND선택자 : 구분 값없이 선택자들을 붙여사용 하면 붙여사용 된 선택자들에 모두 부합되는 요소를 선택합니다.
// button 태그이면서 아이디가 'btnPrev' 인 요소를 선택합니다.
$("button#btnPrev")
document.querySelectorAll("button#btnPrev")
속성 선택자
1. [속성명] : 해당 속성이 있는 요소 선택
// 'value'라는 속성(attribute) 이 있는 요소 선택
$("[value]")
document.querySelectorAll("[value]")2. [속성명="일치 속성 값"] : 주어진 일치 속성 값이 속성의 값과 일치하는 요소 선택
// 'value'라는 속성의 값이 'Aiden'인 요소 선택
$("[value='Aiden']")
document.querySelectorAll("[value='Aiden']")3. [속성명*="부분 일치 속성값"] : 주어진 부분일치 속성 값이 속성 값에 포함된 요소 선택
// 'value'라는 속성의 값에 'A'라는 문자가 포함된 요소 선택
$("[value*='A']")
document.querySelectorAll("[value*='A']")4. [속성명!="속성 값"] : 속성 값이 존재하지 않거나 주어진 속성 값과 불일치하는 요소 선택
// 'value'라는 속성의 값이 'Aiden'이 아닌 요소 선택
$("[value!='Aiden']")
document.querySelectorAll("[value!='Aiden']")5. [속성명^="속성 시작 값"] : 주어진 속성 시작 값으로 속성 값이 시작하는 요소 선택
// 'value'라는 속성의 값이 'A'로 시작하는 요소 선택
$("[value^='A']")
document.querySelector("[value^='A']")6. [속성명$="속성 끝 값"] " 주어진 속성 끝 값으로 속성 값이 끝나는 요소 선택
// 'value'라는 속성의 값이 'n'으로 끝나는 요소 선택
$("[value$='n']")
document.querySelectorAll("[value$='n']")* 속성 선택자는 보통 기본선택자와 조합하여 쓰이는 경우가 많은 것 같습니다.
// input 태그중 'value'가 'Aiden' 인 요소선택
$("input[value='Aiden']")
document.querySelectorAll("input[value='Aiden']")
// input 태그중 'name' 이 'rdiGroup' 인 요소선택
$("input[name='rdiGroup']")
document.querySelectorAll("input[name='rdiGroup']")
계층 선택자
계층 선택자는 계층적인 구조에서 선택하는 요소를 선택하는 것입니다.
1. 부모 선택자 > 자식선택자 : 부모선택자 바로 밑에 있는 자식선택자 요소를 선택합니다.
// div바로 밑에 있는 input 태그를 선택합니다.
$("div > input")
document.querySelectorAll("div > input")
2. 부모 선택자 하위 선택자 : 부모선택자 아래에 있는 모든 하위선택자 요소를 선택합니다.
// div 태그 밑에 있는 input 태그를 선택합니다.
$("div input")
document.querySelectorAll("div input")
3. 선택자 + 다음 인접 선택자 : 동등계층에서 선택자 바로다음에 있는 다음인접 선택자 요소를 선택합니다.
// input 태그 바로 다음에있는 label 요소를 선택
$("input + label")
document.querySelectorAll("input + label")
4. 선택자 ~ 다음 형제 선택자 : 동등계층에서 선택자 뒤에 모든 다음형제 선택자 요소를 선택합니다.
// div태그와 동등계층에서 div태그 뒤에있는 모든 pre 태그를 선택합니다.
$("div ~ pre")
document.querySelectorAll("div ~ pre")
필터 선택자
필터 선택자로 선택자중 특정한 요소만 필터 하는 것입니다.
1. even, odd : 짝수/홀수 인덱스의 요소만 필터 (인덱스는 0부터 시작)
// 짝수번째 div태그만 선택
$("div:even")
document.querySelectorAll("div:even")
// 홀수번째 div태그만 선택
$("div:odd")
document.querySelectorAll("div:odd")
2. nth-child(index) : 형제 요소 중 index에 해당하는 요소만 필터
// li태그의 형제들중 2번째 요소만 출력
$("li:nth-child(2)")
document.querySelectorAll("li:nth-child(2)")
3. first, last: 첫 번째, 마지막 요소만 필터
// 첫번째 li태그와, 마지막 li태그 요소만 선택
$("li:first")
document.querySelectorAll("li:first")
$("li:last")
document.querySelectorAll("li:last")
4. eq(index), gt(index), lt(index): index번째 요소, index번째 이후 요소 선택, index번째 이전 요소 선택
(index는 0부터)
// 3번째 li태그 선택
$("li:eq(2)")
document.querySelector("li:eq(2)")
// 3번째이후 li태그 선택
$("li:gt(2)")
document.querySelectorAll("li:gt(2)")
// 3번째이전 li태그 선택
$("li:lt(2)")
document.querySelectorAll("li:lt(2)")
5. selected, checked, disabled, enabled, focus : 요소 상태에 따른 필터
// selected된 option만 선택
$("option:selected")
document.querySelectorAll("option:selected")
// checked된 checkbox만 선택
$("input[type='checkbox']:checked")
document.querySelectorAll("input[type='checkbox']:checked")
// disabled된 input태그만 선택
$("input:disabled")
document.querySelectorAll("input:disabled")
// enabled된 input태그만 선택
$("input:enabled")
document.querySelectorAll("input:enabled")
// focus된 input태그만 선택
$("input:focus")
document.querySelectorAll("input:focus")
6. not(원치 않는 선택자) : 원치않는 선택자를 필터 합니다.
// input태그중 disabled되지 않은 요소만 선택
$("input:not(:disabled)")
document.querySelectorAll("input:not(:disabled)")
7. has(포함된 선택자) : 포함된 선택자를 포함하고 있는 선택자를 필터 합니다.
// h1태그를 포함한 div태그만 선택합니다.
$("div:has(h1)")
document.querySelectorAll("div:has(h1)")
8. contains(문자열) : 문자열을 포함한 선택자를 필터 합니다.
// '안녕하세요' 라는 텍스트를 포함한 p 태그를 선택합니다.
$("p:contains('안녕하세요')")
document.querySelectorAll("p:contains('안녕하세요')")
9. hidden, visible : 숨겨진, 보이는 요소만 필터 합니다.
// 숨겨진 div태그를 선택합니다.
$("div:hidden")
document.querySelectorAll("div:hidden")
// 보이는 div태그를 선택합니다.
$("div:visible")
document.querySelectorAll("div:visible")