HTML Dom querySelector

来源：互联网发布：笔记本安装linux 编辑：程序博客网时间：2024/06/06 18:43

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>

0 0