querySelectorAll에 완전한 css3 선택기를 올바르게 작성하는 방법

이 css3 선택기 쿼리를 올바르게 작성하는 방법은 무엇입니까?querySelectorAll에 완전한 css3 선택기를 올바르게 작성하는 방법

var elements = document.querySelectorAll("[data-datasource='ds1']:not(input[type='button']):not(input[type='submit']):not(input[type='submit']):not(input[type='hidden']):not(input[type='reset']):not(input[type='file']):not(input[type='image']):not(input[type='search'])");

위 쿼리는 구문 오류를 발생시킵니다.

버튼, 제출, 제출, 숨김, 재설정, 파일, 이미지 및 검색 유형의 입력을 제외하고 data-datasource = 'ds1'을 갖는 모든 요소를 선택하려고합니다.

출처

2012-06-28 Cesar Castello Branco Filho

내가 확실히 모르겠지만, 당신은 '말을해야 할 수도 있습니다 : 그것은 여전히 정말로 긴 선택 문자열입니다 때문에 여기에 고장입니다,

var elements = document.querySelectorAll("[data-datasource='ds1']:not(input), input[data-datasource='ds1']:not([type='button']):not([type='submit']):not([type='hidden']):not([type='reset']):not([type='file']):not([type='image']):not([type='search'])");

을 :

대신 시도 [data-source = blah]'즉, 선택자 앞에 별표를 넣으십시오. – Will

당신은': not (입력 [type = 'submit'])'을 셀렉터에 복제했습니다. – BoltClock

@Will : 별표는 필요하지 않습니다. – BoltClock

불행히도 CSS3's :not() selector은 한 번에 하나의 간단한 선택기 만 허용합니다. :not(input[...]) 선택기는 모두 유효하지 않은 CSS3이므로 두 개의 간단한 선택자인 input과 속성 선택자가 포함되어있어 예외가 발생합니다. *

/* Any elements except input that have this attribute value */ 
[data-datasource='ds1']:not(input), 

/* Only inputs that have this attribute value, but not any of these types */ 
input[data-datasource='ds1']:not([type='button']):not([type='submit']):not([type='hidden']):not([type='reset']):not([type='file']):not([type='image']):not([type='search'])

출처

2012-06-28 18:45:11 BoltClock

그레이트 !!! 첫 번째 쿼리를 사용했습니다. 그것은 멋진 일을합니다! 나는 두 번째와 세 번째 질의를 축출하고 결과를 결합하여 첫 번째 질의를 실행하는 것보다 느려질 것이라고 생각한다. 이 방법으로 나는 첫 번째 해결책을 사용했습니다. 다시 한 번 감사드립니다. –

두 번째와 세 번째 것은 실제로 첫 번째와 같습니다 ... 어떻게 작동하는지 설명합니다. 어쨌든 당신은 답변의 왼쪽에있는 진드기를 클릭하여 감사의 말로 받아 들일 수 있습니다. – BoltClock

답변

관련 문제