一、验证码案例

【1.1 】生成有字母、数字组合成的四位验证码

//随机验证码：数字和字母组合，（四个数字和字母）
/* 
===> 1先把验证码准备好
===> 2随机获取相应的索引值
===> 3获取元素
*/
function  getCode(){
    var str="qwertyuiopasdfghjklzxcvbnm"+"QWERTYUIOPASDFGHJKLZXCVBNM"+"0123456789";
    var result="";
    //==> 索引值的范围：0---61
    for(var i=0;i<4;i++){
       var index=Math.round(Math.random()*61);
       var item=str[index];
       result+=item;
    }
    return result;
}
var code=document.getElementById("code");
var btn=document.getElementById("btn");
code.innerHTML=getCode();
btn.onclick=function(){
    code.innerHTML=getCode();
}
复制代码

【1.2】生成不重复的验证码

for(var i=0;i<4;i++){
       var index=Math.round(Math.random()*61);
       var item=str[index];
       //===>新增一个判断
       if(str.indexOf(item)>-1){
          // 此次循环作废，总共四次，浪费了一次，所以需要
          i--;
          continue;
       }
       result+=item;
    }
复制代码

【1.3】 while 循环实现

只要条件成立，就一直执行，知道条件不成立的时候停止

while(条件){
执行体
}

function  getCode(){
    var str="qwertyuiopasdfghjklzxcvbnm"+"QWERTYUIOPASDFGHJKLZXCVBNM"+"0123456789";
    var result="";
    //==> 索引值的范围：0---61
    while(result.length<4){
       var index=Math.round(Math.random()*61);
       var item=str[index];
       if(result.indexOf(item)==-1){
          result+=item;
       }
    }
    return result;
}
复制代码

二、dom操作

2.1【dom树】：浏览器在加载页面的时候，首先就是dom的结构计算，它形式就像是一颗大树，有很多的分支，所以被称为 “dom tree”

【回流和重绘】

重绘(repaint)：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。

常见的重绘操作有：
- 1. 改变元素颜色
- 1. 改变元素背景色
- 1. more ……
回流(reflow)：又叫重排（layout）。当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。

常见的回流操作有：
- 1. 页面初次渲染
- 1. 浏览器窗口大小改变
- 1. 元素尺寸/位置/内容发生改变
- 1. 元素字体大小变化
- 1. 添加或者删除可见的 DOM 元素
- 1. 激活 CSS 伪类（:hover……）
- 1. more ……

• 重点：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。

2.2[常用的dom操作方法]

1）getElementById：通过元素的id获取元素.

document.getElementById("box");
【document】：
     document 是上下文，限制范围的意思：在哪个范围下的 id名字是box的这个元素，不过这个上下文只能是   document
     
【id名字唯一性】：
     id名字是唯一的，一个document文档中不能同时出现多个相同的id名字，如果设置了多个相同的id，只能获取到第一个。
     
[兼容性注意]：不要让name 和id的名字一样。因为在ie6-ie7 的时候，如果设置了name属性，通过id也可以获取到
复制代码

<body>
   <input type="text" name="text">
</body>
</html>
<script>
  console.log(document.getElementById("text"));
  //  在ie6或者ie7的时候可以获取到
</script>
复制代码

2）【context].getElementsByTagName：在特定的上下文中，通过标签名，获取一组元素。

得到的是一个类数组，不能直接用数组的方法
得到的是一个集合，如果想要操作其中的某一项，可以基于索引获取。

    var omain=document.getElementById("main");
    var olis=omain.getElementsByTagName("li");
复制代码

// 想要获取到第二个li:olis[1]

3) [context].getElementsByCalssName:通过类名获取元素集合

• 此方法在ie6–ie8下不兼容

4）document.getElementsByName:通过name名字获取一组元素集合

它的上下文也只能是document
另外，正常的规范中，咱们只会给表单元素起name值，如果给其它元素设置name，在ie9以下版本浏览器不兼容，是获取不到的，所以为了这种情况，咱们以后养成习惯，只给表单元素用name，非表单元素不用name

5）【context].querySelector(“选择器”)

通过选择器获取指定的元素，即使匹配的有多个，也只会对第一个起作用，获取到的是一个对象(给咱们平时写样式时候写选择器是一样的)

 <div class="main">
        <div class="box1"></div>
    </div>
    
    document.querySlector(".main>div")
复制代码

6)【context】.querySelectorAll(“选择器”)

通过指定的选择器获取一组节点结合
注意：querySelector 和querySelector 在ie6-ie8 下不兼容

7）document.head

获取Head元素对象
复制代码

8) document.body

获取body元素对象
复制代码

9) document.documentElement

获取html元素对象
复制代码

【需求：】获取一屏幕的宽度或者高度，兼容所有的浏览器

// 获取一屏幕的高度
var vH=document.documnentElement.clientHeight || document.body.clientHeight;
// 偶去一屏幕的宽度
var vW=document.documentElement.clientWidth || document.body.clientWidth;
复制代码

2.3 练习题：

获取页面中所有name属性值为 “hehe” 的元素标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
    
   <div class="box1">
       <input type="text" name="he1">
   </div>
   <input class="box1" name="he1">
</body>
</html>
<script>
 function getElementsByName(value){
     var allTag=document.getElementsByTagName("*");
     var names=[];
     for(var i=0;i<allTag.length;i++){
          var item=allTag[i];
          if(item.name==value){
             names.push(item);
          }
     }
     return names;
 }
 var ary=getElementsByName("he1")
</script>
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="main">
        <div class="box1">
            <input type="text" name="he1" id="input1">
            <div name="he1" id="div2">111</div>
        </div>
        <input class="box1" name="he1">
    </div>
</body>
</html>
<script>
 var omain=document.getElementById("main");   
 function getName(contex,name,attr){
    var tags=contex.getElementsByTagName("*");
    var ary=[];
    for(var i=0;i<tags.length;i++){
        if(tags[i].getAttribute(name)==attr){
           ary.push(tags[i])
        }
    }
    return ary;
 }
 var res=getName(omain,"name","he1");
 console.log(res);
</script>
复制代码

关于id的一些鲜为人知的事情：
直接把id当成变量去用的时候，可以获取相应的id元素。（浏览器的机制）

文章版权归作者所有，未经允许请勿转载。

THE END

前端

喜欢就支持一下吧