從零開始前端學習[53]:js中的擷取元素的方式

js中的擷取元素的方式

通過getElementById的形式擷取
通過getElementsByClassName形式擷取元素
通過getElementsByTagName标簽選擇元素
靜态擷取和動态擷取過程
通過選擇器來擷取元素
js相關的命名規範

提示

部落客:章飛_906285288

部落格位址:http://blog.csdn.net/qq_29924041

通過getElementById的形式擷取

getElementById這個就不用多說了，最開始使用的就是這個，也就是需要給标簽一個id，然後通過标簽選擇到對應的對象。因為id是唯一的，是以也擷取的這個變量其實也是唯一的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
      .main{width: px;margin: px auto;box-shadow:   px  deeppink}
    p{width: px ;height: px;background: blue;}
  </style>
</head>
<body>
  <div class="main">
    <p id="id_p">p</p>
  </div>
  <script>
    var id_p = document.getElementById("id_p");
    id_p.onclick = function () {
        this.style.backgroundColor = "red";
    }
  </script>
</body>
</html>

從零開始前端學習[53]:js中的擷取元素的方式

最簡單的效果

過getElementsByClassName形式擷取元素

既然有getElementsById那麼與之對應的肯定也有根據className來擷取的變量名，那就是cgetElementsById，可能會有點奇怪，就是id是唯一的，但是很多時候，我們的className并不是唯一的啊。那麼對應擷取到的應該也不是唯一的。是的，通過getElementsByClassName擷取到的是一個對象數組，是一個數組，并不是一個唯一的值

var abox = document.getElementsByClassName("box");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
    .main{width: px;box-shadow:   px  deeppink;margin: px auto}
    p{margin: px auto;width: px;height: px;background: greenyellow }
  </style>
</head>
<body>
  <div class="main">
    <p class="class_p">1</p>
    <p class="class_p">2</p>
    <p class="class_p">3</p>
  </div>
  <script>
   var classes_p = document.getElementsByClassName("class_p");
   console.log(classes_p.length);
   classes_p[].onclick = function () {
       this.style.color ="red";
   }
   classes_p[].onclick = function () {
       this.style.backgroundColor ="blue";
   }
   classes_p[].onclick = function () {
       this.innerText = "換個内容試試";
   }

  </script>
</body>
</html>

從零開始前端學習[53]:js中的擷取元素的方式

注意：相容：不相容IE8以及以下

通過getElementsByTagName标簽選擇元素

與選擇器一樣，選擇器可以使用标簽選擇器，那麼在js中也是可以通過标簽來選擇到對應的标簽的，它的使用跟getElementsByClassName一樣，擷取到的是一組數組。

var a_p = document.getElementsByTagName("p");

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">
    body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
    ul,ol{margin: ; list-style: none; padding: ;}
    a{ text-decoration: none; }
    *{ margin: ; padding: ; }
    .main{width: px;box-shadow:   px  deeppink;margin: px auto}
    p{margin: px auto;width: px;height: px;background: greenyellow }
  </style>
</head>
<body>
<div class="main">
  <p >1</p>
  <p >2</p>
  <p >3</p>
</div>
<script>
  <!--直接通過getElementsByTag來擷取标簽名字-->
    var classes_p = document.getElementsByTagName("p");
    console.log(classes_p.length);
    classes_p[].onclick = function () {
        this.style.color ="red";
    }
    classes_p[].onclick = function () {
        this.style.backgroundColor ="blue";
    }
    classes_p[].onclick = function () {
        this.innerText = "換個内容試試";
    }

</script>
</body>
</html>

顯示效果如下所示:

從零開始前端學習[53]:js中的擷取元素的方式

注意：可以相容所有浏覽器

靜态擷取和動态擷取過程

什麼是靜态擷取過程和動态擷取過程？？？

靜态擷取過程也就是當我們擷取到一個節點之後，它的id改變以後不會影響到這個節點，就好比我們找到這個人，無論它改了什麼名字，或者換了什麼衣服，其實對我們所認識的這個人都沒有任何影響

如:

<p id = "static">靜态擷取過程</p>
var oStatic = document.getElementById("static");
oStatic.style.color = "red";
oStatic.style.id = "s_static";
ostatic.style.color = "blue";

當id修改了之後，其對象的認知是不會進行改變的，注意為什麼是id，因為id它具有唯一性

動态擷取過程也就是如果我們每一次去修改其className的時候，這個時候都需要重新去擷取一下這個數組，因為數組預設是會改變的。每當我們用到一次類數組的時候都會動态的擷取一次

如:
<p class='dynamic'>p1</p>
<p class='dynamic'>p2</p>
<p class='dynamic'>p3</p>

var aDynamic= document.getElementsByClassName('xiao1');     //擷取到dynamic類數組

console.log( aDynamic.length );     //先彈出長度 3
aDynamic[0].style.color = 'red';    //在給數組的第0個（p1）字型設定顔色
aDynamic[0].className = 'dynamic_2';    //然後将類數組的第一個的類名改一下，這個時候就隻剩下2個dynamic   
console.log(aDynamic.length );  //彈出長度，這時候肯定長度為2了
aDynamic[0].style.color = '#cc00ff';     // 這個時候再給數組的第0個添加顔色，添加的就不再是p1了，而是p2

示範代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
        .clearfix:after{
          content: "";
          display: block;
          clear: both;
        }
        .fl_l{float: left}
        .fl_r{float: right}
        .main{width: px;margin: px auto;box-shadow:   px  deeppink}
    p{width: px;height: px;background: greenyellow;margin: px}
  </style>
</head>
<body>
  <div class="main">
    <div class="static_content">
      <header>static_content</header>
      <p id="static_p">static</p>
    </div>
    <div class="dynamic_content clearfix">
      <header>dynamic_content</header>
      <p class="dynamic_p fl_l">dynamic_1</p>
      <p class="dynamic_p fl_l">dynamic_2</p>
      <p class="dynamic_p fl_l">dynamic_3</p>
    </div>
  </div>
  <script>
    //靜态的擷取方法，隻要擷取了，就不會再改變
    var oStatic = document.getElementById("static_p");
    oStatic.style.background = "red";
    oStatic.id = "static_p_2";
    oStatic.style.color = "blue";   //id改變了，但是其依舊能夠改變樣式
    //動态的擷取方法，隻要每使用一次，就需要動态的擷取一次
    var aDynamicP = document.getElementsByClassName("dynamic_p");
    console.log(aDynamicP.length);
    aDynamicP[].onclick = function () {
        aDynamicP[].className = "dynamic_p_2 fl_l";
        console.log(aDynamicP.length);
        aDynamicP[].style.backgroundColor = "blue";
    }
  </script>
</body>
</html>

顯示效果如下所示:

從零開始前端學習[53]:js中的擷取元素的方式

靜态的過程就直接改變了。動态的過程在點選第一個p元素的時候，console輸出的為2，而不是原來的3，它會動态改變。這兒時候aDynamic中的第二個元素也就是對應的為dynamic3了。是以dynamic3的背景樣式發生了改變

注意：getElementById是靜态擷取的過程，getElementsByClassName與getElementsByTagName都是動态擷取的過程，但是一般很少去使用getElementsByTagName來修改。

通過選擇器來擷取元素

通過querySelector()和querySelectorAll()來進行選擇器選取元素。，但是這種是相容IE8及以上版本

querySelector是擷取單個節點，如果選擇器是類名或者标簽名等，隻會擷取到一個，(如果您在後面加上下标就會報錯，找不到這個元素)

var oBox = document.querySelector("#main.box");
oBox.style.color = "red";

querySelectorAll是擷取節點下面所有同一類的标簽元素。

var aBox = document.querySelectorAll(".content p");
console.log(aBox.length);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
        .clearfix:after{
          content: "";
          display: block;
          clear: both;
        }
        .fl_l{float: left}
        .fl_r{float: right}
        .main{width: px;margin: px auto;box-shadow:   px  deeppink}
        p{width: px;height: px;background: greenyellow;margin: px}
  </style>
</head>
<body>
  <div class="main">
    <div class="qS">
      <header>querySelector</header>
      <p id="qS_p">querySelector</p>
    </div>
    <div class="content clearfix">
      <header>querySelectorAll</header>
      <p class="qSA_p fl_l">querySelectorAll</p>
      <p class="qSA_p fl_l">querySelectorAll</p>
      <p class="qSA_p fl_l">querySelectorAll</p>
    </div>
  </div>
  <script>
    var oP = document.querySelector(".qS #qS_p");
    oP.style.color = "red";
    var aP = document.querySelectorAll(".content .qSA_p");
    console.log(aP.length);
    aP[].style.color = "blue"
    aP[].style.color = "red"
    aP[].style.color = "gold"
  </script>
</body>
</html>

顯示如下所示：

從零開始前端學習[53]:js中的擷取元素的方式

相對于以上所有的擷取方式，這個時候querySelector與querySelectorAll顯得更加的靈活一點。

js相關的命名規範

1.s: 表示字元串String
2.b: 表示布爾Boolean
3.a: 表示數組Array
4.o: 表示對象Object
5.fn: 表示函數Function
6.re: 表示正則Regular Expression

歡迎持續通路部落格:http://blog.csdn.net/qq_29924041

附上99乘法表代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--編輯器的名稱-->
  <meta name="Author" content="作者是誰">       
  <meta name="Keywords" content="關鍵詞">
  <meta name="Description" content="描述和簡介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: ;}
        ul,ol{margin: ; list-style: none; padding: ;}
        a{ text-decoration: none; }
        *{ margin: ; padding: ; }
    .main{width: px;margin: px auto;box-shadow:   px  deeppink;text-align: center;border: px solid transparent}
    .box{width: px;height: px;box-shadow:   px  red;margin: px auto;border: px solid transparent}
    .clearfix:after{
      content: '';
      clear: both;
      display: block;
    }
    .box p{
      width: px;
      height: px;
      float: left;
      border: px solid red;
      margin: px;
      font-size: px;
      line-height: px;
      padding:px px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="box clearfix">
      <!--<p>1 * 1 = 1</p>-->
    </div>
    <div class="box clearfix"></div>
    <div class="box clearfix"></div>
    <div class="box clearfix"> </div>
  </div>
  <script>
    var aBoxs  = document.querySelectorAll(".box");
    console.log(aBoxs.length);
//    第一個
    for(var i =  ;i <=  ; i++){
        for(var j =  ;j <= i; j++){
            aBoxs[].innerHTML += "<p>" + i +" * "+ j +" = "+i*j+"</p>";
        }
        aBoxs[].innerHTML+="<br><br><br>";
    }
//    第二個
    for(var i =  ;i >=  ; i--){
        for(var j = i ;j <= ; j++){
            aBoxs[].innerHTML += "<p>" + i +" * "+ j +" = "+i*j+"</p>";
        }
        aBoxs[].innerHTML+="<br><br><br>";
    }



    for(var i =  ;i >=  ; i--){
        for(var j =  ;j <= i; j++){
            aBoxs[].innerHTML += "<p>" + i +" * "+ j +" = "+i*j+"</p>";
        }
        aBoxs[].innerHTML+="<br><br><br>";
    }

    //第三個
    for(var i =  ;i <=  ; i++){
        for(var j = i ;j <= ; j++){
            aBoxs[].innerHTML += "<p>" + i +" * "+ j +" = "+i*j+"</p>";
        }
        aBoxs[].innerHTML+="<br><br><br>";
    }


  </script>
</body>
</html>

從零開始前端學習[53]:js中的擷取元素的方式

js中的擷取元素的方式

通過getElementById的形式擷取

過getElementsByClassName形式擷取元素

通過getElementsByTagName标簽選擇元素

靜态擷取和動态擷取過程

通過選擇器來擷取元素

js相關的命名規範

繼續閱讀

《CSS世界》：一本CSS領域的内功心法修煉手冊

【前端面試題】02—59道CSS面試題(附答案)

這些推薦使用的CSS命名和書寫規範，你應該知道

關于CSS 的 :is()和 :where() 僞類，作為前端的你需要了解一下

前端pink老師網課

前端開發人員必須掌握的10個CSS選擇器

計算機科學最難的東西之一

jQuery文法結構以及讀取設定CSS屬性值，移除CSS樣式

jQuery選擇器優勢和分類

jQuery選擇器之基本選擇器

jQuery的用途和優勢

過濾選擇器

【深度好文】代碼的保養

使用xpath實作document.querySelector樣式選擇器進行html解析（一）：将html轉成xml使用xpath實作document.querySelector樣式選擇器進行html解析（二）：擴充一下xpath以便支援正則

css3學習篇之選擇器css3學習篇之選擇器4 表單僞類選擇器

105道CSS 面試知識點總結