HTML5에서, DOM은 강력한 요소 선택 API querySelector / querySelectorAll가 제공하는 자바 스크립트 코드의 사용이 기능을 선택하기 위해 CSS 선택자와 유사한 DOM 요소를 완료 할 수 있습니다. 일반적으로, document.querySelector / querySelectorAll은 우리가 DOM 요소를 선택,하지만 때로는 DOM 요소에 querySelector를 사용하는 데 사용됩니다 / querySelectorAll 방법, 조금 이상한이 시간.
예를 들어, HTML 페이지를 다음 (예를 들어 페이지 측면 노트, 나는 각 요소에 ID를 추가 한, 그러나 우리는 요소를 선택하는 ID 선택기를 사용하지 마십시오)
1 < 본체 > 2 < 스팬 ID = "S0" > 이 본체의 폭 직접 자식 인 </ 스팬 > 3 < DIV ID = "D1" 스타일 = "테두리 : 적색 고체 1 픽셀;" > 4 이것은 DIV D1 5 < DIV ID = "d1-1" 스타일 = "테두리 : 1 픽셀의 청색 고체;" > 6 이것은 DIV d1-1 < BR /> 7 < 스팬 ID = "d1-1-1" >스팬 > 8 </ DIV > 9 < 스팬 ID = "d1-2" > 이 스팬 d1-2 인 </ 스팬 > 10 </ DIV > 11 </ 바디 >
이 시나리오에서, 두 요소 DIV # 1 D1 하위 요소, 즉 DIV # 1 d1-1 스팬 # 1 d1-2, 및 DIV # 1 d1-1 요소가 스팬 # 1 DIV-1-1-1 서브 엘리먼트가있다. 나는 자식 요소 선택기는 다음 jQuery를이 같이해야하는 경우, 사업부 번호의 D1에서 스팬 #의 d1-1-1을 선택합니다 :
$ ( "#의 D1을"). ( "DIV> 범위를") 찾기
스팬 #의 d1-1-1를 반환이 코드는 우리의 예상 결과입니다.
그것은 HTML5 API는 다음과 같이 작성해야 선택기에 해당합니다
VAR의 D1 = document.querySelector ( "#의 D1을" ); VAR은 = d1.querySelectorAll 스팬 ( "div> 범위")
당신은 위의 코드는 스팬 #의 d1-1-1를 반환 할 것으로 예상하지만, 실제로 결과는 스팬 #의 d1-1와 함께 함께 반환에 실행됩니다! 아래 그림과 같이 :
이것은 ...... 정말 잠시 동안 저를 혼란. 공식 설명은 발견되지 않았지만, 약간의 문서를 확인뿐만 아니라 논리 querySelector 및 querySelectorAll DOM 요소의 기본 동작을 이해한다.
DOM 요소 조회 메커니즘을 querySelector / querySelectorAll를 호출 할 때 다음과 같다 : 문서의 맥락에서 첫 번째 장소는 위의 코드의 선택 기준을 충족하는 모든 요소를 찾기 위해, 우리는 선택 DIV> 스팬 그것은 DIV 요소의 직접적인 부모의 모든 요소에 걸쳐 있다는 점이다. 그런 다음 요소는 이러한 요소 querySelector / querySelectorAll가 반환되는 하위 요소를 호출하는 것입니다있는 봐. d1.querySelectorAll ( "div> 스팬") 스팬 #의 d1-2와 함께 함께 돌아갑니다 이유도 설명합니다.
따라서, 제한을 위해 조심 바람직 접속 ID 선택기가되도록 DOM 요소에 querySelector / querySelectorAll 전화, 상기 코드는 기록 될 수있다 :
d1.querySelectorAll ( "#의 D1> div> 범위");
그것은 정확하게 (그렇지 않으면 더 잘못 물론, 경우입니다!) 우리는 스팬 #의 d1-1-1 예상 반환합니다.
W3C의 공식 문서에 언급 된 사용 : 문맥 (현재로 알려진 : 범위) 의사 클래스 선택기는 작업 컨텍스트를 제한하기 시작, 그 쓰기, 말을하는 것입니다 :
d1.querySelectorAll ( "범위> div> 범위");
그러나 실제 시험 결과는 W3C도 말했기 때문에,이 표준 아니라, 사파리 6.0.4 및 크롬 예상대로 모두 작동하지 않았다 (27)이다.
요약하면, DOM 요소에 querySelector / querySelectorAll의 사용은 그래서 때때로 당신이 얻을 수 있도록 발생할 수, 예상 또는 jQuery를 우리가 다룰 생각하는데 익숙해 것을 그가이 아닌, 진실을 말할 조금 이상한 역할 올바른 결과를 설정하고, 때때로 당신이 결과 세트 및 구조와 당신이 당신의 페이지 DOM 요소의 관계를 사용하는 선택기를 기대하지합니다. 이 작품을 알고 후에는 설명 할 수없는 일이 발급되지 않습니다.
HTTPS : //www.cnblogs.com/yuanyq/p/3162635.html 재현