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

먼저 W3C 사양에 따라 이 두 메서드가 무엇을 반환해야 하는지 이야기해 보겠습니다.
querySelector:

노드의 하위 트리 내에서 첫 번째로 일치하는 Element 노드를 반환합니다. 메서드는 null을 반환해야 합니다. (지정된 요소 노드의 하위 트리에 있는 선택기와 일치하는 집합의 첫 번째 항목을 반환합니다. 일치하는 항목이 없으면 null을 반환합니다.)

querySelectorAll:

노드의 하위 트리 내에서 일치하는 모든 Element 노드를 포함하는 NodeList를 문서 순서로 반환합니다. 해당 노드가 없으면 메서드는 빈 NodeList를 반환해야 합니다(지정된 하위 트리에서 일치하는 선택기를 반환합니다. 요소 노드. 노드 집합은 깊이 우선 사전 검색을 사용합니다. 일치하는 항목이 없으면 이 메서드는 빈 집합을 반환합니다.

사용법:

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

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

BaseElement가 문서인 경우 문제가 없으며 각 브라우저의 구현은 기본적으로 동일하지만 BaseElement가 일반 dom Node(이를 지원하는 dom Node)인 경우 두 가지 방법), 브라우저 구현이 약간 이상합니다. 예:

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

테스트

< 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를 지정하여 일치 범위를 제한하는 것입니다. 이 방법은 주요 인기 프레임워크에서 널리 사용됩니다.

Jquery 구현:

코드 복사 코드는 다음과 같습니다. var oldContext = context,

old = context.getAttribute( "id" ),
nid = old || 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 구현:

코드 복사

코드는 다음과 같습니다. var currentId = _context.getAttribute('id'), slickid = 'slickid__'; ('id', slickid); _expression = '#' slickid ' ' _expression;

context = _context.parentNode;

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

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

IE 8: baseElement는 객체로 지원되지 않습니다. ;

Daniel JK님의 답변에 진심으로 감사드리며, 다른 방법도 알려주셨습니다.