js中通过css选择器查询dom有2个方法，
querySelector：返回文档中匹配指定 CSS 选择器的第一个元素
比如baseElemet.querySelector('P');
querySelectorAll：返回文档中匹配指定 CSS 选择器的所有元素
比如baseElemet.querySelectorAll('P');
当baseElemet为document时一般没有问题，但是当baseElemet为一个普通的dom节点时，有时查询的范围并不是理想的在baseElemet里面，而是在整个
doucument下。这里可以增加一段处理（参考jq中），为baseElemet增加一个id属性的查询，如果没有id属性可以先添加，最后用完了删除掉。
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
</head>
<body>
<div id="test" class="test">
<p>test</p>
</div>
</body>
<script type="text/javascript">
//处理函数
function bmQuerySelector(selector,context){
context=context || document;
if(context===document){
//如果文档为document则直接处理
return context.querySelectorAll(selector);
}
else{
var oldid,newid="_newid_";
try{
oldid=context.getAttribute("id");
//如果原来文档不存在id属性,帮它添加一个
if(!oldid){
context.setAttribute("id",newid);
}
newid=oldid || oldid;
//在原来选择器的基础上增加id属性的筛选
return context.querySelectorAll("[id='" + newid +"'] " + selector);
}
catch(error){
}
finally{
//如果原来文档中不存在id属性,需要移除掉
if(!oldid){
context.removeAttribute("id");
}
}
}
}
var baseElement=document.getElementById("test");
alert(bmQuerySelector('.test p',baseElement));//没结果
alert(baseElement.querySelectorAll(".test p"));//有结果
</script>
</html>
1051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
