Javascript教程:querySelector()方法

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()方法应用Document类型上时，它会尝试从文档元素开始匹配模式。如果应用与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>的元素返回了第一个SVG图像。当在查询中遇到了svg命名空间前缀时，则调用命名空间解析器函数来确定URI。没有命名空间解析器，则会抛出一个错误，因为查询引擎无法辨识svg命名空间前缀。
　　 可以500%提高开发效率的前端UI框架！   
各浏览器中querySelector和querySelectorAll的实现差异

如想获取页面class属性为"red"的元素，除了使用document.getElementsByClassName('red')还可以使用document.querySelector('.red')和document.querySelectorAll('.red')。

但Element.querySelector和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 及之前版本中只使用了document.querySelectorAll，没有使用Element.querySelectorAll。 jQuery1.4.3 后使用了Element.querySelectorAll，但做了修复。在选择器前加了"#__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__"赋值其作为临时id，在选择器"div a"前指定查找范围为"#__sizzle__"，即d1。finally语句来最后清理，如果指定范围的元素本身有id将其恢复为old，没有则去掉临时的id属性"__sizzle__"。