CSS 선택기를 결합하는 방법

Question

webdriver를 사용하고 CSS 선택기로 자주 작업하고 각 레벨을 가로 지르기 위해 작성하는 코드 양을 줄일 수 있는지 궁금합니다. 다음은 요소에 액세스하는 자바 스크립트 코드와 java의 유사한 코드가 내 코드에 존재할 것입니다.

아래 예제에서 나는 3 개의 레벨을 트래버스하기 위해 3 개의 CSS 선택기를 사용했으며이를 결합하거나 최소한 간단하게 만들 수 있습니다.

document.querySelector('.datagrid').querySelectorAll(".even")[3].querySelectorAll('tbody tr') 

Answer 1

당신은 첫 번째 부분 결합 descendant 또는 child 선택기 (기술적으로 "콤비")을 사용할 수 있습니다

document.querySelectorAll('.datagrid .even')[3].querySelectorAll('tbody tr') 

를 ... 그러나 당신의 코드보다 조금 더 열심히 브라우저 작업을 할 것입니다 코드의 첫 번째 부분 (document.querySelector('.datagrid'))은 첫 번째 요소 인을 찾은 다음 해당 요소 내에서만 .even 요소를 찾습니다. 위의 그림은 입니다..even의 조상은 모두 .datagrid입니다. 따라서 더 많은 문서를 검색해야 할 수도 있습니다. 대부분의 시간은 중요하지 않지만 지적할만한 가치가 있습니다. 위의 내용은 또한 첫 번째 .datagrid에 적어도 네 개의 .even 요소가 있다고 가정합니다. 이없는 경우가 아닌 경우, 코드는 (가 오류가 발생 할 수 위의 코드 반면, (때문에 null을 것 [3]에 .querySelectorAll를 호출하는 시도의) 오류를 슬로우 총 네 또는 .datagrid의 첫 번째 요소가 아닌 .even 요소를 참조 할 수 있습니다.

[3]은 다음과 결합하는 것이 까다로울 수 있습니다. 또는 .even:nth-of-type(3)을 사용하려는 유혹이지만, 그 중 하나도 .even과 일치하지 않으므로 실수 일 수 있습니다. nth-child은 인 요소와 일치합니다.및은 부모의 세 번째 자식 요소입니다 (모든 요소를 ​​고려하면 .even 것만 포함). nth-of-type은 같은 일을하지만 동일한 태그를 가진 다른 요소 만 고려합니다. 동일한 태그 이름을 가진 다른 비 .even 요소가있는 경우 잘못된 것입니다.

때로는 당신이 말하는 것을하기 위해 셀렉터 (jQuery에서 제공 한 :eq과 유사)를 추가하는 방법에 대해 이야기 할 때가 있지만, 이해할 수있는 문제는 선택기 엔진 프로세스 선택기 (오른쪽에서 왼쪽으로). (jQuery를 믿을 수 없을만큼 널리 사용하는 것도 문제가, 그리고 CSS 비슷한 상황에서 1을 사용하는 반면, 첫 번째 요소의 인덱스로 0를 사용합니다. CSS는 아마도 :index?   — 혼동을 피하기 위해   — :eq 이외의 것을 사용해야합니다 그래서.)

Answer 2

CSS 선택기로 할 수있는 일은 거의 없으므로 querySelector()과 함께 할 수 있습니다. 따라서 CSS 선택기를 알고 있다면 잘 할 수 있습니다.

"querySelector에 전달되는 문자열 인수는 CSS 구문"- API에서 추출해야합니다.