为了尽量实现浏览器兼容，同时又能方便进行节点定位，我就写了这两个函数，对于支持querySelector的浏览器会调用自带的querySelector,如果浏览器不支持，就调用自己实现的函数。
此函数可能有些bug，不过现在我还没遇到，有人要是遇到了给个留言我有空就去修掉。
//支持 #id|.classname|tagname|tagname.classname|tagname#id四种，如果要多层筛选，请重复调用
function querySelectorAll(node,selector){
if(typeof(document.querySelectorAll)!='undefined'){
return node.querySelectorAll(selector);
}
var tname;
var citems;
function findElementsByClassNameInner(n,className){
var items= n.children;
for(var i=0;i<items.length;i++){
if(items[i].className==className){
citems.push(items[i]);
}
findElementsByClassNameInner(items[i],className);
}
return citems;
}
function findElementsByIDInner(n,id){
var items= n.children;
for(var i=0;i<items.length;i++){
if(items[i].id==id){
citems.push(items[i]);
}
findElementsByIDInner(items[i],id);
}
return citems;
}
if(selector.charAt(0)=='.'){
tname=selector.substring(1);
citems=new Array();
var items=findElementsByClassNameInner(node,tname);
return items;
}
else if(selector.charAt(0)=='#'){
var id=selector.substring(1);
citems=new Array();
var items=findElementsByIDInner(node,id);
return items;
}
else if((r=selector.match(/(\w+)\.(\w+)/))!=null){
tagName=r[1].toLowerCase();
className=r[2];
citems=new Array();
var titems=findElementsByClassNameInner(node,className);
var items=new Array();
for(i=0;i<titems.length;i++){
if(titems[i].tagName && titems[i].tagName.toLowerCase()==tagName){
items.push(titems[i]);
}
}
return items;
}
else if((r=selector.match(/(\w+)#(\w+)/))!=null){
tagName=r[1].toLowerCase();
id=r[2];
citems=new Array();
var titems=findElementsByIDInner(node,id);
var items=new Array();
for(i=0;i<titems.length;i++){
if(titems[i].tagName && titems[i].tagName.toLowerCase()==tagName){
items.push(titems[i]);
}
}
return items;
}
else{
var items= node.getElementsByTagName(selector);
return items;
}
}
//支持 #id|.classname|tagname|tagname.classname|tagname#id四种，如果要多层筛选，请重复调用
function querySelector(node,selector){
if(node==null) return null;
if(typeof(document.querySelector)!='undefined'){
return node.querySelector(selector);
}
var items=querySelectorAll(node,selector);
return items.length==0 ? null:items[0]
}
//调用示例
window.onload=function(){
//var li=document.querySelectorAll("#Test li.a1");
var test=querySelector(document.body,"#Test");
var li=querySelectorAll(test,"li.a1");
alert(li.length);
}
下面是测试上面代码使用的HTML
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta charset="utf-8"/>
</head>
<body>
<div id="Test">
<ul>
<li class="a1">111</li>
<li class="a1">111</li>
<li class="a1">111</li>
<li class="a1">111</li>
<li>222</li>
<li class="a1">111</li>
<li class="a1">111</li>
<li class="a1">111</li>
</ul>
</div>
<div>
<ul>
<li class="a1">111</li>
<li class="a1">111</li>
<li class="a1">111</li>
<li class="a1">111</li>
</ul>
</div>