您的位置：首页 > 产品设计 > UI/UE

HTML Dom querySelector

2015-06-19 15:34 225 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航