DOM选择器：querySelectorAll和querySelector

时间 2019-11-08

标签 dom 选择器 queryselectorall queryselector 栏目 HTML 繁體版

原文原文链接

这是我写的一个操做dom的小例子：css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    
    </style>
</head>
<body>
<div id="aa"><p>hello</p><p>world</p></div>
<div id="bb"></div>
<div style="color:#ffa;">1</div>
<div>2</div>
<div>3</div>
<script>
function d$(selector){
 
 function Duquery(selector){
  this.arr=document.querySelectorAll(selector);
  this.len=this.arr.length;
 };
 Duquery.prototype.init=function(){
  for(var i=0;i<this.len;i++){
   this[i]=this.arr[i]
  };  
 };
 Duquery.prototype.gethtml=function(){
  return this[0].innerHTML; 
 };
 Duquery.prototype.sethtml=function(arg){
  for(var i=0;i<this.len;i++){
   this[i].innerHTML=arg;
  }; 
  return this; 
 };
 Duquery.prototype.getcss=function(key){
  return this[0].style[key]; 
 };
 Duquery.prototype.setcss=function(key,val){
  for(var i=0;i<this.len;i++){
   this[i].style[key]=val;
  }; 
  return this; 
 };
 var obj=new Duquery(selector);
 obj.init();
 return obj;
 
};
d$("#bb").sethtml(0000);
d$(".cc").setcss("color","#ffb").sethtml(999999999999);
</script>   
</body>
</html>

看这个位置的代码：html

利用dom提供的选择器，咱们能够找到节点和操做节点，数组

调用后，咱们在预览就发现元素根据js的处理而变化了。dom

1.querySelectorAll和querySelector兼容性测试

能力检测属于经常使用技能之一，咱们看下面的能力检测代码：this

<script>
 if(document.querySelector){
  
 }else{
  alert("不支持！");
 };
 if(document.querySelectorAll){
  
 }else{
  alert("不支持！");
 };
  
</script>

结果就是ie6 7不被支持，这个结果是很让人欣喜的，如今的ie6 7已经被几乎弃用，这2个方法咱们至少在移动端是能够完美执行的。spa

2.querySelectorAll和querySelector使用方法prototype

咱们已经很熟悉这两个选择器：code

document.getElementById(str);
document.getElementsByTagName(str);

写咱们的html结果，咱们写个2 3级，有id和class就能够了：htm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    
    </style>
</head>
<body>
    <div id="aa">
        <p>1</p>
        <p>2</p>
        <div>
            <span>3</span>
            <span>4</span>
        </div>
    </div>
    <div id="bb">
        <div class="bb1">5</div>
        <div class="bb2">
            <span>6</span>
            <span>7</span>
        </div>
    </div>
   
</body>
<script>
 document.getElementById(str);
 document.getElementsByTagName(str);
  
</script>
</html>

为了测试是否选择到节点，咱们元素内的内容做了区分，利用上面2个老的处理方式咱们输出1-7。

<script> 
 alert(document.getElementById("aa").getElementsByTagName("p")[0].innerHTML);
 alert(document.getElementById("aa").getElementsByTagName("p")[1].innerHTML);
 alert(document.getElementById("aa").getElementsByTagName("div")[0].getElementsByTagName("span")[0].innerHTML);
 alert(document.getElementById("aa").getElementsByTagName("div")[0].getElementsByTagName("span")[1].innerHTML);
 alert(document.getElementById("bb").getElementsByTagName("div")[0].innerHTML);
 alert(document.getElementById("bb").getElementsByTagName("div")[1].getElementsByTagName("span")[0].innerHTML);
 alert(document.getElementById("bb").getElementsByTagName("div")[1].getElementsByTagName("span")[1].innerHTML);
  
</script>

是如此的麻烦，确定问没有经过类名获取的方法吗？这是是有的，不过兼容性存在问题，假如咱们找.bb1，咱们就要获取全部元素利用classname进行判断，有的就存入一个数组最后返回。

咱们利用最新的方法去获取和返回：

<script> 
 alert(document.querySelectorAll("#aa p")[0].innerHTML);
 alert(document.querySelectorAll("#aa p")[1].innerHTML);
 alert(document.querySelectorAll("#aa>div span")[0].innerHTML);
 alert(document.querySelectorAll("#aa>div span")[1].innerHTML);
 alert(document.querySelectorAll("#bb .bb1")[0].innerHTML);
 alert(document.querySelectorAll("#bb .bb2 span")[0].innerHTML);
 alert(document.querySelectorAll("#bb .bb2 span")[1].innerHTML);
  
</script>

参数就是css选择器的形式，并且支持>这种关系选择器，返回的是类数组形式，咱们根据下标就可指定获取了。

还有一个没有all的方法，他的用法和上面相同，不过不会以相似数组形式返回，返回的是单个，all的有无就是1和n的区别。

<script> 
 alert(document.querySelector("#aa p").innerHTML);
 
  
</script>

只会返回第一个p的内容。

3.利用querySelectorAll和querySelector开发tab切换效果

效果很是简单，咱们简单实践开发使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo1</title>
    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
 
 .tab{ width:500px; height:500px; background:#CCC; margin:100px;}
 .tab-nav{ height:40px; line-height:40px; border-bottom:1px solid #fff;}
    .tab-nav span{ float:left; margin:0 10px;}
 .tab-nav span.focus{ color:#09F;}
 .tab-con{ height:450px;}
    </style>
</head>
<body>
    <div class="tab">
     <div class="tab-nav">
         <span class="focus">菜单1</span>
            <span>菜单2</span>
            <span>菜单3</span>
        </div>
        <div class="tab-con">
         <div>内容1</div>
            <div style="display:none;">内容2</div>
            <div style="display:none;">内容3</div>
        </div>
    </div>
   
</body>
<script> 
 var nlist=document.querySelectorAll(".tab-nav>span");
 var clist=document.querySelectorAll(".tab-con>div");
 for(var i=0;i<nlist.length;i++){
  nlist[i].onclick=function(){   
   for(var j=0;j<nlist.length;j++){
    if(this==nlist[j]){
     nlist[j].setAttribute('class',"focus");
     clist[j].style.display="block";
    }else{
     nlist[j].removeAttribute('class');
     clist[j].style.display="none";
    }
   };
  };
 };
 
 
  
</script>
</html>