从零开始前端学习[53]:js中的获取元素的方式

最新推荐文章于 2022-07-17 23:46:29 发布

^_^ 小小码nong

最新推荐文章于 2022-07-17 23:46:29 发布

阅读量1.3k

点赞数 1

分类专栏： # 1.从零开始挑战前端文章标签：获取元素方式命名规范 js选择器选择器 query系列选择器

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78515348

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

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: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
      .main{width: 1200px;margin: 10px auto;box-shadow: 0 0 10px 0 deeppink}
    p{width: 200px ;height: 200px;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>

这里写图片描述
最简单的效果

过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: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 10px auto}
    p{margin: 10px auto;width: 150px;height: 150px;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[0].onclick = function () {
       this.style.color ="red";
   }
   classes_p[1].onclick = function () {
       this.style.backgroundColor ="blue";
   }
   classes_p[2].onclick = function () {
       this.innerText = "换个内容试试";
   }

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

这里写图片描述

注意：兼容：不兼容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: 0;}
    ul,ol{margin: 0; list-style: none; padding: 0;}
    a{ text-decoration: none; }
    *{ margin: 0; padding: 0; }
    .main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 10px auto}
    p{margin: 10px auto;width: 150px;height: 150px;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[0].onclick = function () {
        this.style.color ="red";
    }
    classes_p[1].onclick = function () {
        this.style.backgroundColor ="blue";
    }
    classes_p[2].onclick = function () {
        this.innerText = "换个内容试试";
    }

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

显示效果如下所示:

这里写图片描述

注意：可以兼容所有浏览器

静态获取和动态获取过程

什么是静态获取过程和动态获取过程？？？
静态获取过程也就是当我们获取到一个节点之后，它的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: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .clearfix:after{
          content: "";
          display: block;
          clear: both;
        }
        .fl_l{float: left}
        .fl_r{float: right}
        .main{width: 1200px;margin: 10px auto;box-shadow: 0 0 10px 0 deeppink}
    p{width: 150px;height: 150px;background: greenyellow;margin: 10px}
  </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[0].onclick = function () {
        aDynamicP[1].className = "dynamic_p_2 fl_l";
        console.log(aDynamicP.length);
        aDynamicP[1].style.backgroundColor = "blue";
    }
  </script>
</body>
</html>

显示效果如下所示:

这里写图片描述
静态的过程就直接改变了。动态的过程在点击第一个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: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        .clearfix:after{
          content: "";
          display: block;
          clear: both;
        }
        .fl_l{float: left}
        .fl_r{float: right}
        .main{width: 1200px;margin: 10px auto;box-shadow: 0 0 10px 0 deeppink}
        p{width: 150px;height: 150px;background: greenyellow;margin: 10px}
  </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[0].style.color = "blue"
    aP[1].style.color = "red"
    aP[2].style.color = "gold"
  </script>
</body>
</html>

显示如下所示：

这里写图片描述

相对于以上所有的获取方式，这个时候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: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .main{width: 1000px;margin: 20px auto;box-shadow: 0 0 10px 0 deeppink;text-align: center;border: 1px solid transparent}
    .box{width: 800px;height: 600px;box-shadow: 0 0 6px 0 red;margin: 10px auto;border: 1px solid transparent}
    .clearfix:after{
      content: '';
      clear: both;
      display: block;
    }
    .box p{
      width: 70px;
      height: 40px;
      float: left;
      border: 1px solid red;
      margin: 5px;
      font-size: 14px;
      line-height: 40px;
      padding:0px 2px;
      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 = 1 ;i <= 9 ; i++){
        for(var j = 1 ;j <= i; j++){
            aBoxs[0].innerHTML += "<p>" + i +" * "+ j +" = "+i*j+"</p>";
        }
        aBoxs[0].innerHTML+="<br><br><br>";
    }
//    第二个
    for(var i = 9 ;i >= 1 ; i--){
        for(var j = i ;j <= 9; j++){
            aBoxs[1].innerHTML += "<p>" + i +" * "+ j +" = "+i*j+"</p>";
        }
        aBoxs[1].innerHTML+="<br><br><br>";
    }



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

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


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

^_^ 小小码nong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[53]:js中的获取元素的方式

js中的获取元素的方式通过getElementById的形式获取通过getElementsByClassName形式获取元素通过getElementsByTagName标签选择元素静态获取和动态获取过程通过选择器来获取元素js相关的命名规范提示博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041通过getEleme
复制链接

扫一扫