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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。