다양한 브라우저에서 querySelector와 querySelectorAll 간의 구현 차이점 분석_jquery

querySelector 및 querySelectorAll은 W3C에서 제공하는 새로운 쿼리 인터페이스

코드 복사 코드는 다음과 같습니다.

module dom {
[Supplemental, NoInterfaceObject]
interface NodeSelector {
Element querySelector(DOMString 선택기 내);
NodeList querySelectorAll(DOMString 선택기 내)
} ;
문서는 NodeSelector를 구현합니다.
DocumentFragment는 NodeSelector를 구현합니다. 즉, 이 세 가지 유형의 요소에는 모두 두 가지 방법이 있습니다. querySelector 및 querySelectorAll의 매개변수는
css selector
를 준수하는 문자열이어야 합니다. 차이점은 querySelector가 객체를 반환하고 querySelectorAll이 컬렉션(NodeList)을 반환한다는 것입니다.

현재 IE8/9 및 최신 버전의 Firefox/Chrome/Safari/Opera에서는 이미 이를 지원합니다. 페이지에서 클래스 속성이 "red"인 요소를 가져오려면 document.getElementsByClassName('red')를 사용하는 것 외에 document.querySelector('.red')를 사용할 수도 있습니다. 및 document.querySelectorAll('.red' ).

그러나 Element.querySelector 및 Element.querySelectorAll 구현에 다음과 같은 오류가 있습니다.

[code]

;p>< ;a href="http://www.sina.com.cn">SINA

이 두 가지 방법을 지원하는 브라우저에서는 "http://www.sina.com. cn"이 각각 팝업됩니다. /" 및 "1". 이는 원하는 요소 또는 요소 컬렉션이 쿼리되었음을 의미합니다. 이는 W3C 정의와 일치하지 않습니다. 정의에 따르면 "div a"는 요소 d1 범위 내에서 검색되어야 하며 d1에는 div가 전혀 없습니다. 따라서 null이면 빈 컬렉션이 각각 반환되어야 합니다.

jQuery 1.4.2 이하 버전에서는 document.querySelectorAll만 사용하고 Element.querySelectorAll은 사용하지 않습니다. Element.querySelectorAll은 jQuery 1.4.3 이후에 사용되었으나 수정되었습니다. 지정된 요소 내에서 검색하도록 선택기 앞에 "#__sizzle__"을 추가합니다(3903-3918행). 단순화

코드 복사

코드는 다음과 같습니다. 함수 $(id){return document .getElementById (id);} var d1 = $('d1'); var obj1 = d1.querySelector('div a')

var obj2 = d1.querySelectorAll('div a' );

var old = d1.id, id = d1.id = "__sizzle__";
try {
var query = '#' id ' div a'; ( 쿼리 ));
alert(d1.querySelectorAll( 쿼리 ).length);
} catch(e) {
} finally {
old ? d1.removeAttribute( "id " );


지정된 범위의 요소에 ID가 있으면 이를 이전 상태로 유지하고 "__sizzle__"은 이를 임시 ID로 할당합니다. 그리고 선택기 "div a"에서 선택합니다. 이전에 지정한 검색 범위는 "#__sizzle__", 즉 d1입니다. finally 문은 최종 정리에 사용됩니다. 지정된 범위의 요소에 ID가 있으면 이전으로 복원됩니다. 그렇지 않은 경우 임시 ID 속성 "__sizzle__"이 제거됩니다.

관련:

http://msdn.microsoft.com/en-us/library/cc288169(v=VS.85).aspx

http ://msdn.microsoft.com/en-us/library/cc304115(VS.85).aspx


https://developer.mozilla.org/En/DOM/Document.querySelector
https://developer.mozilla.org/En/DOM/Document.querySelectorAll
https://developer.mozilla.org/En/DOM/element. 쿼리선택기
https://developer.mozilla.org/En/DOM/Element.querySelectorAll