JavaScript 基础视频笔记

第1章 JavaScript基础知识和实战案例

1.将 CSS 引入到页面的几种方式：
1：行内样式；
2：内嵌式（将CSS样式写在style标签块里面，放在head里面）；
3：外链式（只是将内嵌式中的CSS样式放在外面一个单独的样式文件里）；
4：导入式 @import "index.css";
2.将js引入到页面中的几种方式
1：行内引入（不推荐）
2：内嵌式：将js代码写在script脚本内容块；
3：外链式：将js代码写在外面文件中，通过src找到引入

细节：1.在外链式的script脚本块中间不可以写js代码（不执行）；
      2.通常将js放在body的最后面，原因：html页面是从上到下加载的，js通常是
        获取html标签给予动态操作效果的，所以需要先加载html标签再加载js。
      3.CSS是确定html内容的样式和位置的，所以需要先加载CSS再加载html标签即
        放在head内。

js中常用的几种输出方式：
1.alert("内容") 在浏览器中弹出框显示内容；
2.document.write("welcome");在页面中输出显示内容；
3.console.log("内容"); 最常用的一种方式（在控制台输出内容）。F12打开控制台console.
4.innerHTML/innerText：向指定元素中动态添加内容。

层级关系：浏览器(window浏览器对象)-->文档(document文档对象)
-->html-->head/body-->...
javascript是一门轻量级的脚本编程语言。
ECMAScript(4,5):定义了js里面的命名规范、变量、数据类型、基本语法、操作语句等最核心的东西。
DOM:文档对象模型 document object model
BOM:浏览器对象模型 broswer object model
js变量命名规范：
1:js中严格区分大小写 test\Test.
2:使用驼峰命名法（首字母小写，其余每个有意义的单词首字母大写）如：personImportInfo.
3.可以使用数字、字母、下划线、$（数字不能做为首位）命名。
4.不能使用关键字和保留字（在js中有特殊意义的字和未来可能成为关键字的字）。
变量：可变的量。
js中的变量是一个抽象的概念，变量是用来存储值和代表值的。
js中定义一个变量非常的简单。如：var 变量名 = 变量值;
js中的变量是松散类型的，通过一个var变量名可以存储任何数据类型。
js中的数据类型分类：
1：基本数据类型：由简单的结构组成的。
如数字(number)，字符窜(string)，布尔(boolean)，null，undefined.
2:引用数据类型：结构相对复杂一些的。
如对象数据类型(object)，函数数据类型。
number:正数，负数，0，小数，NaN
NaN:not a number不是一个有效数字，但是它是属于number数据类型的。
NaN==NaN 是不相等的！！！  1==1是对的。
isNaN();检测一个值不是有效数字的命题是否成立，是有效数字就返回false，不是有效数字返回true。
如果检测的值不是number类型的，浏览器默认将其转化为number类型再判断其是否为有效数字。
console.log("123");==（false）首先将"123"转化为number类型的Number==>Number("123")==123.
Number():强制将其他的数据类型转化为number数据类型，如果是字符窜时要求其中一定都是数字才可以转换。
如：Number("12")==>12    Number("12px")==>NaN。
非强制数据类型转换：parseInt/parseFloat从左到右一个个字符查找，把是数字的转化为有效数字，
中途遇到一个非有效数字就停止。
parseFloat和上面一样，只是可以多识别一个小数点。
parseInt("12px13")==12,parseInt("z0")==NaN,parseFloat("12.5")==12.5。
boolean: true  false
!：取反，首先将值转化为布尔类型的再取反。
!!：将其他数据类型转换为boolean类型，相当于Boolean()
console.log(Boolean("zhu"));==console.log(!!"zhu");==true。
数据 类型转化规则：
1、如果只有一个值判断这个值为真或假，只有0 NaN "" null undefined这五个是假的。
2、如果两个值比较是否相等遵循这个规则：
val1==val2两个值可能不是同一数据类型，如果是==比较的话，会进行默认的数据转换。
1）对象==对象  永远不相等 
[]==[]==({}=={})==false
2) 对象==字符窜  先将对象转换为字符窜再比较  调用toString()方法。
[]==""  {}==>"[object Object]"
3) 对象==布尔类型  对象先转换为字符窜再转化为数字（Number),布尔类型也转化为数字
（true是1 false是0），最后让两个数字比较。""==0.
4)  对象==数字   对象先转换为字符窜再转化为数字（Number)
5） 数字==布尔 布尔转化为数字
6） 数字==字符窜 字符窜转化为数字
7） 字符窜==布尔 都转化为数字
8） null==undefined 结果是true
9)  null或undefined 和其它任何数据类型比较都不相等。
3、除了 == 是比较，===也是比较(绝对比较即数据类型和值相等)
如0==false是true, 0===false是false，null==undefined是false.

js数据类型中的对象数据类型
由多组[属性名和属性值]组成，多组键值对组成，由多个key:value组成。
属性名和属性值是用来描述这个对象特征的。
var obj={name:"yibin",age:23};
var person={
   name:"yibin",age:23,height:"168cm",weight:"55kg"
}
var obj={name:"yi"};//字面量创建方式
var obj=new Object();//实例创建的方式
//给一个对象增加一组属性名和属性值
obj.name="yy";  obj["age"]=6;
//修改原有属性名的属性值，规定一个对象中的属性名不能重复，如果之前有就是修改，
没有就是增加。
obj.name="zhu";   obj["name"]="zhu";
//获取属性名和属性值(若属性名不存在返回undefined)
console.log(obj.name); console.log(obj["name")];
console.log(obj.zz);==undefined; 
//删除属性名和属性值
obj.age=null;(假删除)   delete obj.age;(真删除)

对象数据类型中，还可具体的细分：
对象类（Object）,数组类(Array),正则类(RegExp),时间类(Date),Math数学函数等
对应的实例：对象，数组，正则，时间......
js对象，类和实例的区别：对象是泛指，js中万物皆对象，类是对对象的具体的细分，实例
是类中一个具体的事物。
举例：自然界中万物皆对象，所有的东西可以分为人类，植物类，动物类和物体类，每个人
都是人类中的一个具体的实例。

基本数据类型和引用数据类型的区别：
基本数据类型操作的是数值，引用数据类型操作的是对新空间的引用地址。
eg: var num1=12;  var num2=num1;//把num1变量代表的值给了num2变量
    num2++;//相当于num2=num2+1;在自己原有值基础上加1即num2+=1;
    console.log(num1);==>12.
    var obj1={name:"yibin"};
    var obj2=obj1;
    obj2.name="zhu";
    console.log(obj1.name);==>"zhu".
//发现：基本数据类型没跟着改变，引用数据类型跟着改变了。
本质区别：基本数据类型是把值直接给变量，接下来在操作过程中，直接拿该值操作，可能两个变量存储
一样的值，但是两者之间无关系，其中一个改变不影响另一个。
引用数据类型：1、定义一个变量；2、开辟一块新的空间，然后把属性名和属性值保留在这个空间中，并且
有一个空间地址；3、把空间的地址给了这个变量，变量并没存储这个数值，而是存储对这个空间的引用地址；
4、接下来我们把这个地址又告诉了另一个变量，另一个变量存储的也是这个地址，此时两个变量操作的是同
一块空间；5、其中一个改变了空间的内容，另一个也跟着相应地改变了。

js中检测数据类型的方式:
1、tyeof运算符
2、instanceof运算符
3、constructor
4、Object.prototype.toString.call();
typeof  用来检测数据类型的:typeof 要检测的值
返回值：是一个字符串，包含了数据类型字符。如："number","string","boolean","undefined","object","function".
typeof null的结果是"object".
typeof的局限性：不能具体检查object下的细分类型，检查这些返回的都是"object"
console.log(typeof (typeof (typeof (typeof []))));==>"string"出现2个几以上的结果都是"string"
typeof []==>"object"  typeof "object"==>"string"..n次typeof..==>"string"
console.log(typeof "zhu");//"string"

js中三个判断语句:
1、if else
2、三元运算符
3、switch case
1:if、else if、else 是最常用的判断，可以解决js所有的判断需求。
2:三元运算符运用于简单的if else情况。num>=0?console.log("正数或零"):console.log("负数")。
   num>=0?console.log("正数或零"):void 0;<==if(num>=0) console.log("正数或零");
3:switch case应用于不同值情况下的不同操作。每一种case都要加break.如果不加break下面代码不管
  成立与否都执行。每一种case情况相当于三个等于号的比较，需注意数据类型是否一致。
  var num = 10;  
  switch(num){
    case 0:
        console.log("0");
        break;
    case 10:
        console.log("10");
        break;
    default:
        console.log("NaN");
  }

js的三个循环：
1、for循环
四部曲：1.设置初始值。  2.设置循环执行条件。 3.执行循环体内容。 4.执行每一轮循环完成后都执行i++累加。
break/continue在循环体中只要遇到这两个关键字，循环体后面的代码就不再执行了。
break:在循环体中出现了break,整个循环直接结束。最后的累加操作不执行。
continue:在循环体中出现continue,当前这一轮的循环就结束,继续返回执行下一轮循环。最后的累加操作继续执行。

2、for in循环：用来循环一个对象中的属性名和属性值的。
 eg: var obj={
       name:"yi",
       age:18,
       height:"170cm",
       hobby:"play basketball"，
       1:10086
     };
    //对象中有多少组键值对就循环几次。
    //顺序问题：首先循环数字的属性名（按照从小到大）,再把剩下的属性名按照我们写的顺序循环。
     for(var key in obj){
        console.log(key);//每次获取的属性名
        console.log(obj[key]);//获取的属性值，不能通过console.log(obj.key);来获取属性值。
     }
   
第2章 JS中函数function的详细解读

1、function:函数 -->具备某个功能的一个方法，方法本身没什么意义，只有执行这个方法，实现了对应的功能才有自己的价值。
2、函数由两部分组成：创建一个函数、执行这个函数。
   function 方法名(){
       //函数体：存放的是实现某个功能的js代码。
   }
    调用：方法名();可以被多次调用执行且一般情况下多次调用执行之间无联系。
    创建一个函数
    1）首先开辟一个新的内存空间，浏览器为其分配一个16进制的地址
    2）把函数体中的JS代码当做“字符串”存储到内存空间中。
    3）再把这个地址赋值给当前的函数名
 
    function sum(){
       var total = null;
       total  = 1+1;
       console.log(total);
    }
   sum;//-->sum后面不加小括号代表的是当前函数本身。
   sum();//-->sum后面加小括号代表执行当前函数。
   sum();//-->函数执行的目的：把函数之前存储的那些字符串变成js代码从上到下依次执行。
   1）当函数执行时首先会提供一个供函数体中代码执行的环境--“私有作用域”；
   2）把函数体中的代码字符串变为代码从上到下执行。
   --》函数执行时，首先会形成一个新的私有作用域，供函数体中的代码从上到下执行；形成的
  那个私有作用域把函数体中的代码都包含起来，保护了里面的私有变量不受外界的干扰（外界获
  取不到也修改不了）-->我们把函数执行的时候形成的这种保护机制叫做“闭包”；
   
函数中的形参：
制定一个功能方法的时候，需要的原材料并不知道，我们只需要暴露对应的入口，执行的时候把原
材料传递给函数即可--》暴露的那个入口就是关于函数中的“形参”。
eg:  function sum(num1, num2){//num1,num2就是设定的形参“变量”，它就是当前函数的那个入口。
       var total = null;
       total = num1 + num2;
       console.log(total);
     }
     sum(100,200); //执行时只需要把对应形参的值传递给函数即可。num1=100,num2=200.
     sum(10);//-->num1=10 , num2=undefined; 定义了形参执行的时候没有传递值，其默认值为undefined。

函数中的return:
//任意数求和：随便给几个数（具体几个不知道，就没办法定义形参个数），我都能求出和。
eg:    arguments:函数天生自带的(不管写没写形参也不管是否传递值，arguments始终存在)，
       用来接收函数传递进来的参数值的一个集合。
console.dir(arguments);-->查看arguments的内容。
coonsole.log(typeof arguments);->"object"它是一个对象数据类型的值。
观察它的结构发现，它是以数字作为索引，索引从0开始逐级递增，索引0存储的是第一个参数值，
有一个叫做length的属性代表一共传递了多少个参数.-->类数组。
-->callee:function sum()...它还有一个自己特殊的属性callee，代表当前函数本身。
function sum(){
   var total = null;
   for(var i=0;i<arguments.length;i++){
      //把传进来的值转换为number类型的
      var cur = Number(arguments[i]);
      //对于非有效的数字不进行累加，防止最后结果是NaN。
       if(isNaN(cur)){ //为true说明其不是有效数字。
          continue;
       }
      total+=cur;
   }
   return total;
}

var total = sum(); console.log(total);-->null;
total=sum(10,20);-->total=30;

console.log(sum(10,20,"30","zhu"));
0:10->total=10; 1:20;->total=10+20=30;  2:"30"->total=30+"30"="3030";
Number("zhu");->NaN;

函数中的 return ：
eg:   function sum(num1,num2){
         var total = null;
         total = num1 + num2;
         return total;//不是把变量返回给外面而是把其存储的值返回给外面。
//return就是当前函数提供给我们的出口，因为不提供出口的话，闭包的机制导致了在函数体的外面无法获取里面
//的值，如果想要在外面用total的值只需通过return把total的值返回给外面即可-->"返回值机制"
//外面想用哪个值就把哪个值返回。
        }
 var total = sum(100,200);->首先把sum执行，后把sum执行的返回值(看sum执行的返回结果，只需看sum中是否存在
 return，return后面的值是什么，那么函数返回的就是啥；若无return默认返回值是undefined)赋值给外面的变量total.
  function fn(){
     var total = 2;
     return total * 2; 
     或 return; --> 返回值为 undefined; 作用：在函数体中return下面的代码不执行。
  }
  console.log(fn);->输出当前函数本身。
  console.log(fn());->4。
   
匿名函数：没起名字的函数。
实名函数：起了名字的函数。
在JS中常用到的匿名函数有两种方式：
1）自执行函数：定义函数和函数执行一起完成了。
  ;(function(num){ //前面加;的作用是为了上面代码结束不加;号。
               
   })(100);
  //以下的几种写法装逼专用，和上面意思一样。
   +function(num){}(100);
   -function(num){}(100);
   !function(num){}(100);
   ~function(num){}(100);

2)函数表达式：把函数定义的部分当做一个值赋值给一个变量或者元素的某一个行为。
  oDiv.onclick = function(){}

第3章：JS中数组的基本知识和常用算法
一：数组基础知识
object->{},[],/^$/,时间。
->每个对象都是由属性名和属性值组成的。
  var ary = [12,23,34,45];
  console.dir(ary); //查看数组
  //->数组也是对象，我们看到的是它的属性值，属性名是数字0-3.
  //->0存储的是第一项的值......我们把代表第几项的这个数字的属性名叫做数组的“索引”。
  //->length:4 数组的长度
  数组中有一个叫length的属性，这个属性是浏览器天生就给数组增加的属性，不是我们自己编写的属性，
这个属性属于当前数组“不可枚举的属性”
   for(var i=0;i<ary.length;i++){
      console.log(ary[i]);
   }

   for(var key in ary){
      console.log(ary[key]);
     //for in循环是用来遍历一个对象中属性名和属性值的，但是对于当前对象不可枚举的属性我们通过
     //它是遍历不到的；例如：我们无法遍历到 ary["length]这个元素属性。
   }
二：数组去重（优化的方式）
->数组去重的思想：http://web.jobbole.com/83425/
->利用对象的键值对方法：
1）我们把数组中的每一项的值当做一个对象的属性名和属性值存储起来。
2) 但是在每一次存储之前，我们先判断当前这一项(N)是否在对象中已经存在。->obj[N]如果值是N说明对
   象中已经存在这一项了，也说明了在N之前数组中已经出现过一次N了，说明当前这一项已经重复了，在
   数组中删除这一项；
   如果值是undefined，说明对象中没这一项，也就是当前这一项还没在数组中出现过，我们再把当前项当
   做对象的属性名和属性值存储进来。
  var ary = [1, 2, 3, 2, 4, 3, 2 ,1];
  
  1 obj[1]->undefined {1:1}
  2 obj[2]->undefined {1:1,2:2}
  3 obj[3]->undefined {1:1,2:2,3:3}
  2 obj[2]->2 说明第四项2在之前出现过，我们把第四项删除掉。
  //->在我们要存储第四项时，先判断一下对象中是否包含了2这一项。
  console.log(obj[2]);//->2
  console.log(obj[4]);//->undefined

  var obj = { };
  for(var i=0;i<ary.length;i++){
     var cur = ary[i];
     if(obj[cur]==cur){//说明对象中已经存在cur这一项了，也说明cur在数组中重复了，我们需要把这一项删除。
       /* ary.splice(i,1);//从第i项开始删除1项，之后各项会前移(下标改变-1)耗性能！
        i--;
        continue;*/
        //另一方法：把数组末尾项的值拿过来代替当前删除项，末项删除。
        obj[i] = obj[ary.length-1];
        ary.length--;
        i--;
        continue;
     }
      obj[cur]=cur;
   }
    console.log(ary);

三：详解递归算法
//->1、递归：当前函数自己调用自己执行

//->实现1-100之间，把所以不能被三整除的数相加。
  function sum(n){
     if(n===0){ //递归结束条件
        return 0;
     }
     if(n%3!==0){//不能被3整除
        return n+sum(n-1);
     }
     else
        return sum(n-1);
  }
   var total = sum(6);->sum(5)->5+sum(4)->5+4+sum(3)->9+sum(2)->9+2+sum(1)->11+1+sum(0)->12.
   
四：数组冒泡排序
   var ary = [4, 3, 5, 2, 1];
   //->[1, 2, 3, 4, 5]
   ary.sort(function(a,b){
      return a-b;
   });
  //冒泡排序的思想：让当前项与后一项进行比较，若当前项大于后一项则调换位置。(小->大)
   1)4 > 3 -> [3, 4, 5, 2, 1]
   2)4 < 5 -> [3, 4, 5, 2, 1]
   3)5 > 2 -> [3, 4, 2, 5, 1]
   4)5 > 1 -> [3, 4, 2, 1, 5]//第一轮虽然没达最后目标但已经把最大值放到最后一位。
   5)3 < 4 -> [3, 4, 2, 1, 5]
   6)4 > 2 -> [3, 2, 4, 1, 5]
   7)4 > 1 -> [3, 2, 1, 4, 5]//第2轮
   8)3 > 2 -> [2, 3, 1, 4, 5]
   9)3 > 1 -> [2, 1, 3, 4, 5]//第3轮
  10)2 > 1 -> [1, 2, 3, 4, 5]//第4轮  --> ok!
  特点：每一轮当前项和后一项两两比较的话，虽然不一定直接完成目标，但是每次都把当前最大项放到后面。
  共需进行 ary.length-1 轮比较。
  //--> i轮数 i=0  i<ary.length-1
  //--> j每一轮比较的次数
  //i=0 第一轮 4  ary.length-1-0 //ary.length-1：不用和自己比
  //i=1 第二轮 3  ary.length-1-1
  //i=2 第三轮 2  ary.length-1-2
  //i=3 第四轮 1  ary.length-1-3
  //每一轮比较次数 ary.length-1-i

   
   function bubbleSort(ary){
      var temp = null;
      var flag = false; 
      for(var i=0;i<ary.length-1;i++){//i=轮数
         for(var j=0;j<ary.length-1-i;j++){//j=每一轮比较次数
            if(ary[j] > ary[j+1]){
              temp = ary[j];
              ary[j] = ary[j+1];
              ary[j+1] = temp;
              flag = true;//只要本轮有交换就置flag为true.
            }
         }
           if(flag){  //flag==true上一轮有交换继续执行下一轮。
              flag = false; //重新赋值为false.
           }
           else{
              break; //上一轮不用交换即数组已经排好序了直接结束循环。
           }
      }
       return ary;
   }
    var ary = [4, 3, 5, 2, 1];
    var res = bubbleSort(ary);
    console.log(res);

五：数组快速排序
快速排序思想：
1）我们首先在数组中找一个“基准点”（一般把基准点选择为数组中间这一项）
   ->Math.floor(ary.length/2) ；
2）拿基准点和数组中的其他项进行比较，比基准点小的放在左边，比基准点大的放在右边；
3）以后的每一边都重复上述的两个操作，直到当前这一边只有一项是停止处理。

   function quickSort(ary){
     if(ary.length<=1){//若传递过来的数组只有一项就直接返回一项的数组即可。
       return ary;
     } 
     var pointIndex = Math.floor(ary.length/2);//找到基准点的索引。
     var pointValue = ary.splice(pointIndex, 1)[0];//通过基准点的索引删除这一项并把
     //基准点这一项获取到返回一个数组。要返回值加上[] 。
     //拿基准点值和原来的数组中每一项进行比较,把小于基准点的放在左边，大于基准点的放
     //在右边。
     var left = [], right = [];
     for(var i=0;i<ary.length;i++){
        var cur = ary[i];
        cur < pointValue ? left.push(cur) : right.push(cur);
     }
     return quickSort(left).concat([pointValue],quickSort(right));//排序后拼接数组。
}
   
   var ary = [1, 3, 5, 4, 2];
   var res = quickSort(ary);
   console.log(res);-->[1, 2, 3, 4, 5].

六：插入排序
插入排序思想：
1）把第一张牌放在左手；
2）以后拿到每一张牌的时候，和左手边的牌进行依次比较（一般来说我们的习惯是从后往前比较），
如果当前的牌比倒数第一张小，再继续往左比...一直到遇到当前牌已经比手里的某张牌大了，则把
这张牌插入到某张牌的后面（某张牌下一张牌的前面）
    function insertSort(ary){
       var newAry = [];//存储的是左手中已经抓取的牌
       newAry.push(ary[0]);//先抓第一张牌
    
       //依次把桌面上第二张及以后的牌抓到
       for(var i=1;i<ary.length;i++){
            var cur = ary[i];
  
             //抓到当前牌后，分别的从后往前和左手中的牌比较
            for(var j=newAry.length-1;j>=0;){
                if(cur < newAry[j]){
                   j--;
                   if(j === -1){
                      newAry.unshift(cur);//此牌是当前左手中最小的牌所以在此数组开头加入此牌。
                   }
                 }
                   else{//当前抓的牌比左手中某张牌大，则放到这张牌newAry[j]的后面即newAry[j+1]的前面。
                      newAry.splice(j+1,0,cur);
                      j = -1;//结束循环
                   }
            }
       }
         return newAry;
    }
   
   var ary = [6, 3, 5, 7, 2, 4];
   insertSort(ary);==>ary = [2, 3, 4, 5, 6, 7];
另一种方法：在原有牌数组上进行修改。
   var ary = [6, 3, 5, 7, 2, 4];
   function insertSort(ary){
      var key;
      var j;
      for(var i=1;i<ary.length;i++){
         key = ary[i];
         j = i - 1;
         while(j>-1 && ary[j] > key){
            ary[j+1] = ary[j];
            j--;
         }
         ary[j+1] = key;
      }
      return ary;
    } 

第四章：JavaScript中DOM的基础知识
DOM:document object model 文档对象模型
DOM就是描述整个html页面中节点关系的图谱
在DOM中，提供了很多的获取元素的方法和之间关系的属性以及操作这些元素的方法。
<div id="tab">
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
   </ul>
   <div name="zf"></div>
   <div></div>
   <div name="zf"></div>
</div>

<input type="radio" value="男" name="sex" checked="true"/>男
<input type="radio" value="女" name="sex"/>女

<input type="button" id="btn" value="获取性别"/>
name用来区分是否为同组元素。
一：获取元素的常用方法
1）document.getElementById("元素的ID");
在整个文档中，通过元素的ID获得这个元素对象(获取的是一个元素)
注意：如果页面中id重复了，那么这个方法默认只获取第一个元素
在IE6, 7中，会把表单元素(input)的name属性值当做ID来使用。
<input type="text" name="tab"/>==>id=tab.
在IE6, 7中，不区分ID的大小写
项目实战注意：不要让表单元素的name和其它元素 的id重复，不要用id的大小写来区分不同元素。
如果没获取到，返回的结果是null。
我们可以直接地用元素的id来代替当前这个元素对象（不推荐）
<div id="tab"></div>
var oDiv = document.getElementById("tab");
或直接使用tab当做对象来用：console.log(tab);
tab.style.border="1px solid red";

2) 通过元素的标签名来获取一组元素（有几个获取几个）
   document.getElementsByTagName("元素标签名");
在整个文档中，通过元素的标签名获取一组元素。
   //获取的是一个对象数据类型结果，并且是一个类数组(以数字作为索引，索引从0开始，逐级递增，
索引代表的是当前对应的某一个元素，有一个叫做length的属性代表获取的个数)
   //document称之为上下文(context),就是我们自己可以当前获取元素的范围。
   getElementById的上下文只能是document,因为id是唯一的，用哪个获取结果都一样。
   var oTab = document.getElementById("tab");
   var oLis = oTab.getElementsByTagName("li");
   console.dir(oLis);//输出某标签的详细信息。
   oLis.length 代表获取元素的个数 == oLis["length"]
   oLis[0]获取第一个li  ==   oLis.item(0);

   3)context.getElementsByName(); //通过元素name属性的值来获取一组元素。
    //在IE浏览器下只对表单元素起作用，此方法只应用于获取相同name的表单元素。
    var oDivs = document.getElementsByName("zf");
  
    var oBtn=document.getElementById("btn"){
       oBtn.οnclick=function(){
         var oSex = document.getElementsByName("sex");
         var cur = "";
         for(var i=0;i<oSex.length;i++){
           if(oSex[i].checked === true){
             cur = oSex[i].value;
             break;//单选只能有一个被选中
           }
         }
            console.log(cur);
     }   

    4) context.getElementsByClassName("tab")//通过元素的类名(class值)
       是项目中最常用的一种方法，但是，这个方法不兼容，在IE6-8中会报错。
//获取多个的这几个方法，即使你获取的只有一个，它也是类数组，也是一个集合，如果想用其中的第一个，
你也要通过索引来获取。

    5）
    document.documentElement//获取HTML元素
    document.body//获取body元素
//兼容所有浏览器的获取当前屏幕的宽度   
    var curWidth = document.documentElement.clientWidth || document.body.clientWidth;
//兼容所有浏览器的获取当前屏幕的高度 
    var curHeight = document.documentElement.clientHeight || document.body.clientHeight;

    6）在移动端我们获取元素常用的方法（IE6-8下不兼容）
      document.querySelector();  //获取一个
      documrnt.querySelectorAll(); //获取多个  类数组(集合)

      var oDiv = document.querySelector("#tab");
      //"#id"  ".class"  "li"
      var oLis = document.querySelectorAll("#tab li");

      document.querySelectorAll("input[type='radio']");

//querySelector、jQuery中的选择器参考的是css选择器的规则