기본적이고 강력한 DOM 선택기 querySelector에 대한 자세한 소개(코드 첨부)

이 글은 주로 네이티브 DOM 선택기인 querySelector에 대한 몇 가지 관련 지식을 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.

전통적인 JavaScript 개발에서 DOM을 찾는 것은 종종 네이티브 JavaScript가 많은 DOM을 제공하지 않는 경우에 직면하는 첫 번째 골칫거리입니다. 선택 방법은 태그, 이름, ID 등을 통한 검색에만 국한됩니다. 더 정확한 선택을 하려면 매우 번거로워 보이는 정규식을 사용해야 합니다. 도서관. 실제로 모든 브라우저 제조업체는 이제 querySelector 및 querySelectorAll 메소드를 지원합니다. 심지어 Microsoft에서도 이 기능을 지원하기 위해 IE 8을 보냈습니다. 이는 개발자가 DOM을 찾는 또 다른 방법으로 사용됩니다. CSS 선택기를 사용하는 것만큼 빠르게 필요한 노드를 찾을 수 있습니다.

querySelector 및 querySelectorAll의 사용은 제목에서 알 수 있듯이 CSS와 완전히 동일하게 작성되어 있어 프런트엔드 개발자에게는 거의 어려움이 없는 학습 경험입니다. ID가 test인 p가 있는 경우 이 요소를 얻으려면 다음과 같이 할 수 있습니다.

document.getElementById("test");
이제 이 p를 얻기 위해 새로운 방법을 사용해 보겠습니다. :

document.querySelector("#test");
document.querySelectorAll("#test")[0];

다음은 간단한 데모입니다.

저는 테스트 ID의 p입니다

별거 없는 것 같지만, 조금 더 복잡한 상황이라면 원래 방법이 매우 번거로울 것입니다. 이때 querySelector와 querySelectorAll의 장점이 발휘됩니다. 예를 들어, 다음 예에서는 문서의 클래스 test를 사용하여 p의 하위 요소 p의 첫 번째 하위 요소 p를 선택합니다. 물론 이 문서의 새로운 방법을 사용하여 이를 선택합니다. 요소는 말로 설명하는 것보다 훨씬 간단합니다.

document.querySelector("p.test>p:first-child");
document.querySelectorAll("p.test>p:first-child")[0];

여기에 간단한 데모가 있습니다.

나는 레이어의 p 태그입니다

이제 querySelector 및 querySelectorAll 메소드의 매개변수를 매우 명확하게 이해하게 되었습니다. 예, 수신되는 매개변수는 정확히 동일합니다. CSS 선택자. querySelector와 querySelectorAll의 차이점은 querySelector는 하나의 요소를 얻는 데 사용되는 반면 querySelectorAll은 여러 요소를 얻을 수 있다는 것입니다. querySelector는 일치하는 첫 번째 요소를 반환하거나, 일치하는 요소가 없으면 Null을 반환합니다. querySelectorAll은 일치하는 요소가 포함된 배열을 반환합니다. 일치하는 요소가 없으면 반환된 배열은 비어 있습니다. 이 기사의 마지막 예에서는 querySelectorAll을 사용하여 클래스 강조로 모든 요소를 ​​굵게 표시합니다.

var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
  emphasisText[i].style.fontWeight = "bold";
}

이것은 jquery보다 빠른 기본 방법입니다. 단점은 IE6과 7이 이를 지원하지 않는다는 것입니다.

라이브러리의 W3C 사양 및 구현

querySelector: 노드의 하위 트리 내에서 첫 번째로 일치하는 요소 노드를 반환합니다. 해당 노드가 없는 경우 메서드는 null을 반환해야 합니다. (지정된 요소 노드의 하위 트리에서 일치하는 선택기를 반환해야 합니다.) 집합의 첫 번째 항목이거나 일치하는 항목이 없으면 null입니다.

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

BaseElement인 경우에는 문제가 되지 않습니다. 각 브라우저의 구현은 기본적으로 동일합니다. 그러나 BaseElement가 일반 dom 노드(이 두 가지 방법을 지원하는 dom 노드)인 경우 브라우저의 구현은 다음과 같이 약간 이상합니다. W3C 이해하려면 다음을 반환해야 합니다. element: null; elementList: []; 왜냐하면 testElement의 선택기와 일치하는 하위 노드가 없기 때문입니다. 이번에는 baseElement가 문서에 가깝습니다. 이는 예상 결과와 일치하지 않습니다. 아마도 브라우저가 계속 업그레이드되면 이 문제가 통합될 것입니다.

인간의 지혜는 항상 무한합니다. Andrew Dupont는 선택기 앞에 baseElement ID를 지정하여 일치 범위를 제한하는 방법을 고안했습니다. 이 방법은 주요 인기 프레임워크에서 널리 사용됩니다. Jquery:

<p class= "test"  id= "testId" > 
   <p><span>Test</span></p> 
</p> 
<script type= "text/javascript" >   
   var  testElement= document.getElementById( &#39;testId&#39; ); 
   var  element = testElement.querySelector( &#39;.test span&#39; ); 
   var  elementList = document.querySelectorAll( &#39;.test span&#39; ); 
   console.log(element); // <span>Test</span>
   console.log(elementList); // 1  
</script>

var  oldContext = context,
old = context.getAttribute( "id"  ),
nid = old || id,

이 코드의 다른 부분은 보지 말고 이 메서드를 어떻게 구현하는지 살펴보세요. 이 코드는 JQuery1.6의 일부입니다. baseElement에 ID가 없으면 ID를 "__sizzle__"로 설정하세요. 그런 다음 범위를 제한하기 위해 사용할 때 선택기 앞에 추가하십시오. context.querySelectorAll( "[id='" + nid + "'] " + query; 마지막으로 ID 자체가 baseElement가 아니기 때문에 존재해야 합니다. 제거해야 합니다: oldContext.removeAttribute( "id" ) , Mootools 구현:

var  currentId = _context.getAttribute( 'id' ), slickid = 'slickid__' ;
_context.setAttribute( 'id' , slickid);
_expression = '#'  + slickid + ' '  + _expression;
context = _context.parentNode;

Mootools和Jquery类似：只不过slickid = 'slickid__'；其实意义是一样的；方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;IE 8 ：不支持baseElement为object；

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Node.Js实现端口重用步骤详解

js继承中的方法重写重点讲解

js方法的重写和重载的技巧详解

위 내용은 기본적이고 강력한 DOM 선택기 querySelector에 대한 자세한 소개(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!