querySelector와 querySelectorAll_javascript 스킬의 차이점과 연관성에 대해 이야기해보겠습니다.

var element = baseElement.querySelector(selectors)
var elementList = baseElement. querySelectorAll(selectors);

< script type="text/javascript">
var testElement= document.getElementById('testId')
var element = testElement.querySelector('.testspan'); var elementList = document.querySelectorAll('.testspan');
console.log(element) // Testconsole.log(elementList); >

W3C 이해에 따르면 이 예에서는 testElement에 baseElement와 일치하는 하위 노드가 없으므로 element: null; 그러나 브라우저는 baseElement를 무시하고 선택기에만 관심을 두는 것 같습니다. 이는 현재 baseElement가 거의 문서화되어 있음을 의미합니다. 아마도 브라우저가 계속 업그레이드되면 이 문제가 통합될 것입니다.
인간의 지혜는 항상 무한합니다. Andrew Dupont는 이 이상한 문제를 일시적으로 수정하는 방법을 발명했습니다. 이는 선택기 앞에 baseElement의 ID를 지정하여 일치 범위를 제한하는 것입니다. 이 방법은 주요 인기 프레임워크에서 널리 사용됩니다.

try {
if ( !relativeHierarchySelector || hasParent ) {
return makeArray( context.querySelectorAll( "[id='" nid "'] " query ), extra )
}
} catch(pseudoError) {}
finally {
if ( !old ) { oldContext.removeAttribute( "id" );}
}


이 코드의 다른 부분을 보지 말고 이 메서드를 어떻게 구현하는지 살펴보세요. 이 코드는 JQuery1.6 Fragment입니다. ; baseElement에 ID가 없으면 id = "__sizzle__"을 설정한 다음 범위를 제한하기 위해 사용할 때 선택기 앞에 추가합니다. 마지막으로, 이 ID 자체는 baseElement가 가져야 하는 것이 아니기 때문에 제거해야 합니다: oldContext.removeAttribute( "id" ), Mootools 구현:

Mootools는 slickid = ' slickid__를 제외하고는 Jquery와 유사합니다. '; 사실 의미는 같습니다.

메소드 호환성: FF3.5 /IE8 /Chrome 1 /opera 10 /Safari 3.2