자바스크립트 고급 선택기 querySelector 및 querySelectorAll_Basic 지식에 대한 종합 분석

querySelector 및 querySelectorAll 메소드는 W3C Selectors API 사양에 정의되어 있습니다. 그 기능은 CSS 선택기 사양에 따라 문서에서 지정된 요소를 편리하게 찾는 것입니다.

현재 거의 모든 주요 브라우저가 이를 지원합니다. IE8(포함) 이상, Firefox, Chrome, Safari, Opera를 포함합니다.

querySelector 및 querySelectorAll은 사양에서 다음 인터페이스를 정의합니다.

module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };

인터페이스 정의를 보면 Document, DocumentFragment 및 Element가 모두 NodeSelector 인터페이스를 구현하는 것을 볼 수 있습니다. 즉, 이 세 가지 유형의 요소에는 모두 두 가지 방법이 있습니다. querySelector 및 querySelectorAll의 매개변수는 CSS 선택기를 준수하는 문자열이어야 합니다. 차이점은 querySelector가 객체를 반환하고 querySelectorAll이 컬렉션(NodeList)을 반환한다는 것입니다.

페이지에서 I 속성 D가 테스트인 요소를 가져옵니다.

1 document.getElementById("test");
2 document.querySelector("#test");
3 document.querySelectorAll("#test")[0];

페이지에서 클래스 속성이 "red"인 요소를 가져옵니다.

document.getElementsByClassName('red')
document.querySelector('.red')
document.querySelectorAll('.red')

ps:

그러나 반환된 nodeList 컬렉션의 요소는 실시간 반환 결과와 비실시간 반환 결과를 구별하려면 다음 예를 참조하세요.

 <div id="container">
   <div></div>
   <div></div>
 </div>

//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('div'));
//这个元素不但添加到页面了，这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3

위의 예를 통해 실시간으로 업데이트되는 요소가 무엇인지 잘 이해할 수 있습니다. document.getElementById는 하위 요소를 추가한 후 실시간 결과를 반환합니다. 모든 하위 요소의 수는 원래 2에서 3으로 업데이트되었습니다(일부 브라우저에서는 이를 고려하지 않음). 예를 들어 Chrome은 공백을 표시하고 하위 노드로 확인됩니다.

Element.querySelector와 Element.querySelectorAll 및 jQuery(element).find(selector) 선택기의 차이점:

<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="http://www.jb51.net/">脚本之家</a></div> 
<pid="bar">111</p> 
<script> 
var d1 = document.getElementById('test1'), 
obj1 = d1.querySelector('div a'), 
obj2 = d1.querySelectorAll('div a'); 
obj3 = $(d1).find('div a'); 
console.log(obj1)//<a href="http://www.jb51.net/">脚本之家</a> 
console.log(obj2.length)//1 
console.log(obj3)//null 
</script> 
</SPAN> 

querySelectorAll 요소 자체를 포함하여 선택기 설명과 일치하는 문서의 모든 노드를 찾습니다

jQuery(element).find(selector) 요소 자체를 제외하고 선택기 설명과 일치하는 문서에서 모든 노드를 찾습니다

위의 javascript 고급 선택기 querySelector 및 querySelectorAll에 대한 종합 분석은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home을 지원해 주시길 바랍니다.