QuerySelector 및 QuerySelectorall 메소드는 W3C Selectors API 사양에 정의되어 있습니다. 그들의 기능은 CSS 선택기 사양에 따라 문서에서 지정된 요소를 편리하게 찾는 것입니다.
현재 거의 주류 브라우저에서 지원됩니다. IE8 (포함) 이상의 버전, Firefox, Chrome, Safari, Opera를 포함합니다.
QuerySelector 및 QuerySelectorall 사양에서 다음 인터페이스를 정의합니다.
모듈 dom {[supplemental, nointerfaceObject] 인터페이스 노드 선출기 {emect QuerySelector (domString selectors); Nodelist QuerySelectorall (Domstring Selectors); }; 문서는 노드 선거를 구현합니다. DocumentFragment는 노드 선택기를 구현합니다. 요소는 노드 선택기를 구현합니다. };인터페이스 정의에서 해당 문서, DocumentFragment 및 요소는 모두 NodeSelector 인터페이스를 구현할 수 있습니다. 즉,이 세 가지 유형의 요소에는 두 가지 방법이 있습니다. QuerySelector 및 QuerySelectorall의 매개 변수는 CSS 선택기를 준수하는 문자열이어야합니다. 차이점은 QuerySelector가 객체를 반환하고 QuerySelectorall이 컬렉션 (NODELIST)을 반환한다는 것입니다.
페이지가 페이지가 테스트 한 요소를 얻습니다.
1 document.getElementById ( "test"); 2 docum
페이지 클래스 속성 "빨간색"으로 요소를 가져옵니다.
document.getElementsByClassName ( 'red') document.querySelector ( '. red') document.querySelectorall ( '. red') document.querySelectorall ( '. red')
추신:
그러나 반환 된 Nodelist 컬렉션의 요소는 비 라이브라는 점에 유의해야합니다. 실시간 비실한 시간 반환 결과를 구별하려면 다음 예를 참조하십시오.
<div id = "컨테이너"> <div> </div> <div> </div> </div>
// 컨테이너 = document.getElementById ( '#container'); console.log (container.childnodes.length)가있는 페이지에 ID 컨테이너가있는 요소를 먼저 선택합니다. 그런 다음 결과는 2 // 코드 컨테이너를 통해 하위 요소를 추가합니다. console.log (container.childnodes.length) // 결과는 3입니다
위의 예를 통해 실시간으로 업데이트 될 요소를 이해할 수 있습니다. document.getElementById 실시간 결과를 반환합니다. 자식 요소를 추가 한 후 모든 자식 요소의 수가 다시 얻어지고 원래 2가 3으로 업데이트되었습니다 (Chrome과 같은 일부 브라우저도 하위 노드로 구문 분석 할 것임을 고려하지 않음).
요소의 차이점 QuerySelector와 element.querySelectorall 및 jQuery (element) .find (선택기) 선택기의 차이점 :
<span style = "font-size : 15px"> <divid = "test1"> <ahref = "// www.vevb.com/">wulin.com </a> </div> <pid ="bar "> 111 </p> <cript> var d1 = document.getElementById ( 'test1'), divj2 = d1.querySelector ( 'div a') d1. QuerySelectorall ( 'div a'); obj3 = $ (d1) .find ( 'div a'); console.log (obj1) // <a href = "// www.vevb.com/">wulin.com </a> console.log (obj2.length) // 1 console.log (obj3) // null </script> </span>
QuerySelectorall 요소 자체를 포함하여 문서에서 선택기 설명을 충족하는 모든 노드를 찾습니다.
jQuery (element) .find (선택기) 문서에서 선택 설명을 충족하는 모든 노드를 찾아 요소 자체를 포함하지 않습니다.
위의 JavaScript Advanced Selector QuerySelector 및 QuerySelectorall의 위의 포괄적 인 분석은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.