선택기

Question

사람이 특정 자바 스크립트 선택 설명 할 수 이해 : 특별히

document.querySelectorAll("div[class^='tile']"); 

^= 부분을?

Answer 1

그것은

CSS3's "attribute begins with" selector 따라서이 "제목"로 시작하는 클래스 속성을 가진 모든 div의 선택이다는

Answer 2

그것은 왼쪽의 속성이 오른쪽에있는 값으로 시작해야 함을 의미한다.

그래서 div class="tile0", div class="tiles" 등은 선택자와 일치합니다.

Answer 3

document.querySelectorAll() DOM 요소를 선택하는 CSS 선택기와 같은 검색어를 허용합니다. MDN은 어떻게 작동하는지 이해하기위한 최고의 참고 자료입니다. querySelector은 DOM Selector API의 일부이며 전체 사양은 here입니다.

여기에 포함 된이 코드는 속성 선택기 쿼리를 사용했습니다. 속성 선택자는 클래스에 제한되지 않습니다. 원하는 속성을 선택하여 사용할 수 있습니다.

document.querySelector('input[for="myInput"]');

속성 사이의 연산자는 값이 다음과 같은 수 있습니다 :

[attr=value]

<label for="myInput">My Lable</label>

다음이 선택이 당신의 요소를 선택한다 : 예를 들어, 당신은이 HTML이있는 경우 : 주어진 값과 완전히 동일한 속성을 가진 요소를 선택한다.

[attr*=value] : 에 주어진 값이 인 속성을 갖는 요소를 선택합니다. 마찬가지로 mvalue, value, valueone ....

[attr~=value] : *=과 동일하지만 value이 공간을 분리해야합니다. my value

[attr$=value] 같은 : value

[attr^=value]로 종료 : value

[attr!=value]로 시작하는 : value