Javascript 자습서:query Selector() 방법

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 selector에 맞는 문자열이어야 합니다.다른 것은querySelector가 되돌아오는 대상이고querySelectorAll이 되돌아오는 집합(NodeList)이다.개발 효율성을 500% 높일 수 있는 프런트엔드 UI 프레임워크! 현재 IE8/9 및 Firefox/Chrome/SAfari/Opera의 최신 버전이 지원되고 있습니다.
 
 
querySelector () 방법은 CSS 조회를 받고 일치하는 모드의 첫 번째 자손 요소를 되돌려줍니다. 일치하는 요소가 없으면 null로 되돌려줍니다.다음 예를 참조하십시오.

//  body   
  
varbody=document.querySelector("body"); 
  
//  ID myDiv    
  
varmyDiv=document.querySelecotr("#myDiv"); 
  
//        selected    
  
varselected=document.querySelector(".selected"); 
  
//        button     

 
 
　　　　varimg=document.body.querySelector("img.button");querySelector () 방법이 문서 형식에 적용되면 문서 요소부터 일치하는 모드를 시도합니다.Element 유형을 적용하면 질의는 해당 요소의 하위 노드에서만 일치를 찾습니다.CSS 질의는 필요에 따라 복잡하거나 단순화할 수 있습니다.검색에 문법 오류가 있거나 선택기를 지원하지 않는 경우querySelector () 또는 오류가 발생했습니다.개발 효율성을 500% 높일 수 있는 프런트엔드 UI 프레임워크!querySelector () 방법은 선택할 수 있는 두 번째 인자를 수락합니다. 이것은 명명 공간 해석기입니다. 이것은 명명 공간 접두사를 수락하고 관련 URI를 되돌려주는 함수입니다. 예를 들어 다음과 같습니다.

varnsresolver=function(prefix){ 
  
switch(prefix){ 
  
case"w3cmm": 
  
return"http://www.w3cmm.com"; 
  
//       
  
} 
  
}；

 
 
네임스페이스 파서는 SVG나 MathML과 같은 다른 언어가 포함된 XHTML 문서에서 질의를 수행하는 데 유용하며, XML 문서도 마찬가지입니다.CSS 질의의 네임스페이스는 다음과 같은 파이프를 사용하여 지정됩니다.

varsvgImage=document.querySelector("svg|svg",function(prefix){ 
  
switch(prefix){ 
  
case:"svg": 
  
return"http://www.w3.rog/2000/svg"; 
  
} 
  
});

 
 
이 예는 문서에서 로 정의된 요소를 찾아서 첫 번째 SVG 이미지를 되돌려줍니다.검색에서svg 이름공간 접두사를 만났을 때, 이름공간 해상도 함수를 호출해서 URI를 확인합니다.명명 공간 해석기가 없으면 검색 엔진이svg 명명 공간 접두사를 식별할 수 없기 때문에 오류가 발생합니다.개발 효율성을 500% 높일 수 있는 프런트엔드 UI 프레임워크! 브라우저마다querySelector와querySelectorAll의 실현 차이
페이지class 속성이'red'인 요소를 가져오려면 문서를 사용하지 마십시오.getElementsByClassName ('red ') 은 문서도 사용할 수 있습니다.querySelector('.red') 및 문서.querySelectorAll('.red').하지만 Element.query Selector 및 Element.querySelectorAll의 구현에 오류가 있습니다. 아래와 같습니다.

<div id="d1"> 
    <p><a href=http://www.jcodecraeer.com>SINA</a></p> 
</div> 
<script type="text/javascript">    
    function $(id){return document.getElementById(id);} 
    var d1 = $('d1'); 
    var obj1 = d1.querySelector('div a'); 
    var obj2 = d1.querySelectorAll('div a'); 
    alert(obj1); // -> http://www.jcodecraeer.com 
    alert(obj2.length); // -> 1   
</script>

 
 
이 두 가지 방법을 지원하는 브라우저에서 각각 팝업된 것을 볼 수 있습니다 "http://www.sina.com.cn/, 및 1입니다.원하는 원소나 원소 집합을 조회했다는 설명입니다.이것은 W3C의 정의와 맞지 않습니다. 정의에 따라 원소 d1 범위 내에서'div a '를 찾아야 하지만 d1 안에는div가 없습니다.따라서 각각 null, 빈 집합으로 돌아가야 합니다.jQuery1.4.2 및 이전 버전에서는 문서만 사용했습니다.querySelectorAll, Element을 사용하지 않았습니다.querySelectorAll. jQuery1.4.3 이후 Element을 사용했습니다.query Selector All이지만 수정되었습니다.선택기 앞에 "# sizzle"추가지정한 요소 내에서 찾기를 강제로 합니다. (3903-3918 줄)단순화개발 효율성을 500% 높일 수 있는 프런트엔드 UI 프레임워크!

function $(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.querySelector( query )); 
    alert(d1.querySelectorAll( query ).length); 
} catch(e) { 
} finally { 
    old ? d1.id = old : d1.removeAttribute( "id" ); 
}

 
 
범위가 지정된 요소에 id가 있으면 old, "sizzle"[div a] 선택기 앞에 [# sizzle]을 지정하여 임시 id로 지정합니다.즉 d1.finally 문장을 마지막으로 정리합니다. 지정한 범위의 요소 자체에 id가 있으면old로 복원하고, 없으면 임시 id 속성 ' sizzle' 을 제거합니다.