Javascript Review 2

第六天

数组基础

字面量创建：var arr1=[2,1,3,6,5,4,7,9,8];
对象实例化创建：var arr2=new Array(“a”,“b”);
对象创建法：var arr3=new Object([1,2,3,4]);//一般不这么使用，数组是由对象创建完成

1.数据添加删除时，length将会时时产生改变；
2.如果new Array(参数)，参数有且仅有一个，并且是一个正整数时，这个参数表示创建若干个空元素在数组中，也就是设置数组的长度；
3.如果是负数或者小数时，就会报错；
4.如果是非数值，就会将这个参数作为数组的第0项元素添加进入；
5.Array.isArray() //判断元素是否是数组
6.数组也是对象的一种，因此，变量也是获得数组在堆中的引用地址；

数组.length

数组.length //数组的长度
数组.length //设置值
1.如果设置的值比当前的长度大，就会将当前的数组长度设为这个值，多出来的添加空值弥补；
2.如果设置的值小于当前的长度，其实就是删除数组后面元素，直到需要保留的长度位数；
3.如果设置的值为0，就表示清空数组；

var arr=[1,2,3];
arr=[];//千万不能使用，因数组中值未能清除，会漂浮在堆中，造成内存泄漏
arr.length=0; //清空数组

对象数组和二维数组

var data=[      //定义一个二维数组
           {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},          
           {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
        ];

数组中的方法

concat

arr.concat(元素)； 原数组不改变，在尾部添加一个新元素，并且返回这个生成的新数组
arr.concat(元素1，元素2，元素3)； 原数组不改变，在尾部添加多个新元素，并且返回这个生成的新元素
arr.concat(数组) 原数组不改变，合并数组，添加的数组在尾部，并且返回这个生成的新数组
arr.concat(数组1，数组2) 原数组不改变，合并数组，添加的数组在尾部，并且返回这个生成的新数组
arr.concat() 复制数组，形成新的数组与原数组无引用关系

push、unshift 返回值：新数组的长度

在头部添加比尾部添加复杂，当是大数据量处理时，可先 倒序–>在尾部添加–>倒序
arr.push(6) 向尾部添加一个数值
arr.push(6,7,8,9) 向尾部添加多个数值
**arr.unshift(6)**向头部添加一个数值
arr.unshift(6,7,8,9); 向头部添加多个数值
var len=arr.push(6); //arr.push(6)返回值为新数组的长度
var len=arr.push(6,7,8,9);
var len=arr.push([6,7,8,9]);//push一个数组，这里会把这个数组当成一整个元素添加进去
var len=arr.unshift(0); //向头部添加一个数值
var len=arr.unshift(0,-1,-2); //向头部添加多个数值

pop、shift 删除数组尾部、头部元素，并且将被删除的元素返回

var item=arr.pop(); //删除arr数组的尾部元素，并且将被删除的元素返回给item
var item=arr.shift(); //删除数组头部元素，并且将被删除的元素返回
【注】数组中若有对象的话不可用arr.length()=0 因对象还没删除，会在堆中游离，解决方法如下：
* 用pop将对象删为null，可改为：
* 1.将i++删除，data.shift();
* 2.for(var i=0;i<len;i++){
* data[0]=null;
* data.shift();
* }
* 3.for(var i=0;i<len;i++){
* data[data.length-1]=null;
* data.pop();
* }
* 为什么不直接使用 delete data[i]遍历删除？
* delete将数组变为松散型数组，删除每个元素未按照紧密型数组进行补位，所以数据为empty,但长度不变。

splice 返回的数组是被删除元素的集合数组

  arr1=arr.splice();不做任何操作，返回一个空数组
  * 数组迁徙
  * arr1=arr.splice(0);从第0位开始删除所有元素，并且将这个被删除的元素返回给新数组
  *arr.splice(-1)  删除数组的最后一个元素，这里的负数，是从后向前计数
  *
  *删除元素
  * arr.splice(2,2);  从第二位开始删除紧邻其后的2个元素,返回被删除的2个元素数组
  *
  * 插入元素
  * arr.splice(2,0,-1,-2); 从第二位开始，不删除元素，插入-1，-2
  *
  * 替换元素
   * arr.splice(2,2,-1,-2); 从第二位开始，删除2个元素，插入-1，-2，
  *                         相当于将第二位开始后面两个元素替换为-1，-2

【注】splice用的不多，用起来麻烦，效率较低，数组过大时不可用
* 删除的效率最慢，添加的效率最快
* 删除并不是真的删除，而是添加新数组

将不用数组设为null，防止内存泄漏

 var arr5=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
        /*
        * 错误写法：
        *       因为len会随着arr.splice的执行而逐渐变小，会出现找到一个符合的值而跳过下一个值的现象
        var len=arr5.length;
       for(var i=0;i<len;i++){
           if(arr5[i]%2===0 || arr5[i]%3===0){
                 arr5.splice(i,1);      //当arr数组元素能被2或者3整除时，用splice将此元素删除，并将删除后的集合元素数组返回
           }
       }*/
        var arr6=[];
        for(var i=0;i<arr5.length;i++){
            if(arr5[i]%2!==0 && arr5[i]%3!==0){
                arr6.push(arr5[i]);     //当数组元素不能被2并且不能被3整除时，将arr5的元素放至arr6中
            }
        }
        arr5=arr6.concat();
        arr6=null;
      console.log(arr5);

查找

/* if(!~arr.indexOf(11)){//没找到

        }
 if(~arr.indexOf(3)){//找到

}*/

indexOf() 在数组中查找元素，如果找到，返回该元素所在的下标，如果没找到返回-1;
lastIndexOf() 在数组中从后向前查找元素，如果找到，返回该元素所在的下标，如果没找到返回-1;

寻找数组值为3时的下标

var arr1=[1,2,3,4,3,2,4,3,1,2,5,3,4,1,3];
       /* var index=-1;
       while (true){
           index=arr1.indexOf(3,index+1);   //从index+1位置开始遍历，寻找数组值为3时的下标
           console.log(index);
           if(index===-1){
               break;
           }
       }*/

去重

 var arr2=[];
       for(var i=0;i<arr1.length;i++){
           var bool=false;
           for(var j=0;j<arr2.length;j++){
               if(arr2[j]===arr1[i]){
                   bool=true;
                   break;
               }
           }
           if(!bool){
               arr2.push(arr1[i]);
           }
       }

//      for(var i=0;i<arr1.length;i++){
//          if(arr2.indexOf(arr1[i])===-1){
//                arr2.push(arr1[i]);
//          }
//      }
        arr1=arr2.concat();
        arr2=null;
        console.log(arr1);

---

第七天

join

join() 用逗号作为分隔符连接为字符串
join(“符号或者字符”) 用符号或者字符作为分隔符连接
join("") 将数组中所有元素首尾相连为字符串

reverse 实际上reverse就是做了一个翻转数组

sort 排序

从小到大

function sortFun(a,b){
	return a-b;
}

从大到小

function sortFun(a,b){
	return b-a;
}

以第一个字符的字节码作为大小进行升序排列

arr.sort(function(a,b){
	return a.charCodeAt(0)-b,charCodeAt(0);
});

随机产生长度为5的数组

第一种方法：
var arr=[];
while(true){
	var num=pareInt(Math.random()*100);
	if(arr.indexOf(num)===-1){
		arr.push(num);
	}
	if(arr.length===5){
		break;
	}
}
console.log(arr);

第二种方法：
var arr=[];
for(var i=0;i<100;i++){
	arr.push(i);
}
//随机乱序
arr.sort(function(){
	return Math.random()-0.5;
});
arr.length=5;
console.log(arr);

reduce 求和

数组.reduce(function(和值,当前项,当前下标,数组自身){ return 返回值})
sum初始是数组的第0项
item就是从第一项开始
下标也是从1开始
不管需不需要求和，都必须返回sum值

var a=arr1.reduce(function (sum,item,index,list) {  //定义数组求和属性reduce
//            console.log(sum,item,index,list);
            return sum+item;
        });
        var b=arr.reduce(function (sum,item,index) {    //定义数组求和属性reduce
            if(index%2===0){        //若当前下标（下标从1开始）能被2整除，返回下标为偶数项的和
                return sum+item;
            }else {
                return sum;     //若不能被2整除，返回和值（不进行相加）
            }
        });
        console.log(b);

arr.filter(function(当前项，当前下标，当前数组){return 条件})
将符合条件的元素返回到新数组的中

var arr2=arr.filter(function (item,index,list) {     //将arr数组筛选后的值赋给arr2
            return item>7;
        });
        console.log(arr2);

遍历
* item 当前元素
* index 当前下标
* list 当前数组
* forEach(function(item,index,list){})
* map(function(item,index,list){})
*
* 1、forEach 没有返回值，不能直接修改item，可以通过list修改，也可以修改
* item的属性
* 2、map 可以得到返回的新数组，这个数组的所有元素，都是通过遍历数组时，
* return 返回的值，如果没有返回就是undefined。这里可以直接通过return返回修改后的item值

//定义forEach遍历，无返回值
arr.forEach(function (item,index,list) {
   if(index%2===0){
         item.price+=100;	//item不可直接修改，可通过list修改，也可修改item属性
   }
});
       console.log(data);*/
      arr.forEach(function (item,index,list) {
           if(index%2===0){
//                list[index]=item+10;
//                item不能直接修改
           }
      });

var arr1=arr.map(function (item,index) {
       if(index%2===0){
             return item+10;
       }else{
           return item;
      }
});

slice

// var arr1=arr.slice();//复制数组，无引用关系
// var arr1=arr.slice(1);//从某个元素开始到结尾所有元素复制到新数组中
// var arr1=arr.slice(-3);//从后向前数第3个元素到结尾的所有元素复制到新数组中
// var arr1=arr.slice(1,3);//从第1个元素到第3个元素之前的所有元素复制到新数组中
// var arr1=arr.slice(-3,-1);//从后向前第3个元素到最后1个元素之前的所有元素复制到新数组中
// var arr1=arr.slice(-5,8);//从后向前第5个元素到顺序数第8个元素的所有元素复制到新数组中

arguments

任何函数中都有一个局部变量arguments
arguments不能使用数组的任何方法

String对象

字符串的length是只读的，不可以写入值
str[0] 方式也是只读的，不可以写入值
连接和编码
// 字符串连接concat()可以连接多个字符串
// str=str.concat(“e”,“xyz”,s,“px”);
var str2=“azAZ09”;
** 将字符串中指定位置的字符转换为编码**
/* console.log(str2.charCodeAt(0));
console.log(str2.charCodeAt(1));
console.log(str2.charCodeAt(2));
console.log(str2.charCodeAt(3));
console.log(str2.charCodeAt(4));
console.log(str2.charCodeAt(5));*/
将编码转换为字符console.log(String.fromCharCode(97));
// 验证码 分流
// 多台计算同时访问一个服务器—并发

---

作业

1.将数组[1,2,3,1,2,4,2,1,3,2,1,4],去重，有小到大排列顺序，冒泡排序

function sort(arr){
            var len=arr.length;
            var value;
            for(var i=len;i>0;i--){
                for(var j=0;j<i-1;j++){
                    if(arr[j]>arr[j+1]){
                        value=arr[j];
                        arr[j]=arr[j+1];
                        arr[j+1]=value;
                    }
                }
            }
            return arr;
        }

2.写一个函数，参数是数组[“a”,“b”,“c”,“d”,“a”,“b”,“d”,“a”,“d”,“c”,“a”]，以对象的形式记录该数组元素重复次数

 var arr=["a","b","c","d","a","b","d","a","d","c","a"];
       console.log(getRepeatObject(arr));
       function getRepeatObject(arr) {
           var obj={};
           for(var i=0;i<arr.length;i++){
               if(!obj[arr[i]]){
                   obj[arr[i]]=1;
               }else{
                   obj[arr[i]]++;
               }
           }
           return obj;
       }

3.将对象型数组 [{name:“xie”,age:20},{name:“zhang”,age:18},{name:“wang”,age:26}]变成字符串?name=xie&age=20|name=zhang&age=18|name=wang&age=26;写函数生成

var  arr1=[{name:"xie",age:20},{name:"zhang",age:18},{name:"wang",age:26}];
        
       function arrayToString(arr) {
           var str="?";
           for(var i=0;i<arr.length;i++){
               for(var prop in arr[i]){
                   str+=prop+"="+arr[i][prop]+"&";
               }
               str=str.slice(0,-1);
               if(i<arr.length-1){
                   str+="|";
               }
           }
           return str;
       }

       console.log(arrayToString(arr1));

---

第八天

查找与替换

if(!~str.indexOf("a")){
            //没找到
        }
if(str.indexOf("a")>-1){
            //找到了
 }

// str.lastIndexOf(“a”);//从后向前查找
// console.log(str.search(“a”));//和indexOf类似，也是返回查找到元素的下标,但是这个方法一般应用于正则
// console.log(str.match(“a”));//错误,仅应用于正则
// str=str.replace(“a”,“e”);//将a字符替换为e字符，返回修改后新的字符串，原字符串不变化
// 暂时我们使用replace替换元素，只能替换第一次被查找到的元素，如果要替换多个元素，就需要用正则
大小写

var str="abc";
str=str.toUpperCase();//转为大写
str=str.toLowerCase();//转为小写
console.log(str);

在输入框中选中小写字母时，将小写字母转为大写

var texts=document.getElementById("texts");

texts.addEventListener("select",selectHandler);
        function selectHandler(e) {
            e=e || window.event;
//        input中如果使用select事件，selectionStart可以获得当前选择开始位置，
//            selectionEnd获得当前选择的结束位置
//            console.log(texts.selectionStart, texts.selectionEnd);
            var str0=texts.value.slice(0,texts.selectionStart);
            var str1=texts.value.slice(texts.selectionStart,texts.selectionEnd);
            var str2=texts.value.slice(texts.selectionEnd);
            texts.value=str0+str1.toUpperCase()+str2;
        }

split 将字符串切割成数组，和join相对

var str=arr.join("|");  //将数组以|相连接为字符串
var arr1=str.split("|");   //将字符串以|切割为数组

获取地址栏中的信息，以对象的形式返回

var url="http://www.qq.com/index.php?user=xietian&password=123456&age=30&sex=man";
   		console.log(getObject(url));

        function getObject(str) {
            var arr=str.split("?")[1].split("&");
            var obj={};
            for(var i=0;i<arr.length;i++){
                var arr1=arr[i].split("=");
                obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);
            }
            return obj;
        }

数学方法
Math.abs(); 求绝对值
Math.ceil(); 向上取整，有小数就进位取整
Math.floor(); 向下取整，舍去小数位
Math.round(); 四舍五入
.toFixed(); 保留小数位数，四舍五入
parseInt(); 向下取整
Math.max(); 求最大值
Math.min(); 求最小值
求最大值

var max=Math.max.apply(null,arr);

求最小值

var min=Math.min.apply(null,arr);

Math.sqrt(); 平方根
Math.pow(); 求幂
Math.pow(2,5);和1<<5一样，但是后者更好
Math.pow(9.0.5);和Math.sqrt(2);和Math.SQRT2一样，最后一个最好
Math.random(); 生成0-1的随机数
Number.MAX_VALUE 大于零的最大值
Number.MIN_VALUE 大于零的最小值
Number.NEGATIVE_INFINITY 正无穷
Number.POSITIVE_INFINITY 负无穷
Date
console.log(date.getFullYear());
console.log(date.getMonth());//从0开始
console.log(date.getDate());//日期
console.log(date.getDay());//星期,星期日是0
console.log(date.getHours());//小时
console.log(date.getMinutes());//分钟
console.log(date.getSeconds());//秒
console.log(date.getMilliseconds());//毫秒.1000=1秒
console.log(date.getTime());//1970.1.1 0 到现在的毫秒数
时间戳

var url="....";
url+="?time="+new Date().getTime();
console.log(url);

获取时间

<div id="div0"></div>
    <script>
        var div=document.getElementById("div0");
        var obj=getObject(location.search);
        var time=0;
        if(obj.time){
            time=obj.time;
        }
        var nowDate=new Date();
        nowDate.setHours(20);
        nowDate.setMinutes(0);
       var id=setInterval(animation,1000);
        function animation() {
            document.write(time);
            document.write("<br>");
            time--;
            if(time<0){
                clearInterval(id);
            }
//            var date=new Date();
//            div.innerHTML=Math.floor((nowDate-date)/1000);
        }

        function getObject(str) {
            var arr=str.split("?")[1].split("&");
            var obj={};
            for(var i=0;i<arr.length;i++){
                var arr1=arr[i].split("=");
                obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);
            }
            return obj;
        }

作业

1.将价格随机修改为0-100任意整数，修改num为1-10任意整数，计算总价
1、统计总价大于200元的对象
2、统计单价大于50元的对象总价之和
3、按照总价排序由高到低
4、生成表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0}
        table{border-collapse: collapse}
        td,th{border: 1px solid #000000;width: 100px;height: 30px;line-height: 30px;text-align: center}
    </style>
</head>
<body>
<table id="table"></table>
    <script>
        /*2、var data=[
            {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
            {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
            {id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30},
            {id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40},
            {id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50},
            {id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60},
            {id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70},
            {id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80},
            {id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90},
            {id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100}
        ];
        var data=[
            {id:1001,icon:"img/1.png",name:"餐饮0",num:1,price:10},
            {id:1002,icon:"img/2.png",name:"餐饮1",num:1,price:20},
            {id:1003,icon:"img/3.png",name:"餐饮2",num:1,price:30},
            {id:1004,icon:"img/4.png",name:"餐饮3",num:1,price:40},
            {id:1005,icon:"img/5.png",name:"餐饮4",num:1,price:50},
            {id:1006,icon:"img/6.png",name:"餐饮5",num:1,price:60},
            {id:1007,icon:"img/7.png",name:"餐饮6",num:1,price:70},
            {id:1008,icon:"img/8.png",name:"餐饮7",num:1,price:80},
            {id:1009,icon:"img/9.png",name:"餐饮8",num:1,price:90},
            {id:1010,icon:"img/10.png",name:"餐饮9",num:1,price:100}
        ];

        data.forEach(function (t) {
            t.price=parseInt(Math.random()*101);
            t.num=parseInt(Math.random()*10+1);
            t.sum=t.price*t.num;
        });
       var list=data.filter(function (t) {
            return t.sum>200;
        });
       var sum=data.reduce(function (sum,item) {
            if(item.price>50){
               return sum+item.sum;
            }else{
                return sum;
            }
       },0);
        data.sort(function (a,b) {
            return b.sum-a.sum;
        });
        var table=document.getElementById("table");
        table.innerHTML=createTable(data);
        
        function createTable(list) {
            var str="";
            str+="<tr>";
            for(var prop in list[0]){
                str+="<th>"+prop+"</th>";
            }
            str+="</tr>";
            for(var i=0;i<list.length;i++){
                str+="<tr>";
                for(var s in list[i]){
                    str+="<td>"+list[i][s]+"</td>"
                }
                str+="</tr>";
            }
            return str;
        }
    </script>
</body>
</html>

第九天

作业

1.写一个倒计时，通过地址栏中增加&time获取当前的分钟,设置新的时间date.setMinutes(date.getMinutes()+time);通过时间间隔函数每次获取当前的时间，
让当前时间的秒数-设置的时间秒数，并且按照分钟显示出来

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/Method.js"></script>
</head>
<body>
<div id="div0"></div>
   <script>
       //定义变量
       var div,
           id,
           date;
       //调用初始函数init
       init();
       /*
       * 初始化函数init（）的作用：
       *       传入未来时间，定义定时器，使代码标准化
       *  参数：
       *       无参
       * 功能：
       *       1、获取div标签；
       *       2、定义时间对象；
       *       3、定义增加时间变量；
       *       4、调用函数获取URL信息，并转换为对象；
       *       5、若转换后的对象存在，并且有time属性及值，将对象的time值赋给time；
       *       6、将现在的时间加上增加的时间赋给设置的时间（分钟）；
       *       7、以1000ms为间隔设置计时器。
       *
       * */
      function init() {
           div=document.getElementById("div0");
           date=new Date();
           var time=0;
           var obj=Method.getURLObject(location.search);
           if(obj && obj.time){
               time=obj.time;
           }
           date.setMinutes(date.getMinutes()+time);
           id=setInterval(animation,1000);
      }
      /*
      * 计时器函数作用：
      *
      * */
      function animation() {
           var now=new Date();
           var value=date-now;
           if(value<0){
               clearInterval(id);
               return;
           }
           value=Math.round(value/1000);
           var m=Math.floor(value/60);
           var s=value%60;
           div.innerHTML=m+":"+s;
      }
      
     /* function getURLObject(url) {
          if(!~url.indexOf("?")) return;
          url=url.split("?")[1];
          var obj={};
          var arr;
          var arr1;
          var bool=false;
          if(!~url.indexOf("&")){
               if(!~url.indexOf("=")) return;
               arr=url.split("=");
               obj[arr[0]]=isNaN(Number(arr[1])) ? arr[1] : Number(arr[1]);
               return obj;
          }
          arr=url.split("&");
          for(var i=0;i<arr.length;i++){
               if(!~arr[i].indexOf("=")) continue;
               arr1=arr[i].split("=");
              if(arr1[0].length===0) continue;
               obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);
               bool=true;
          }
          if(bool) return obj;
      }*/
   </script>
</body>
</html>

2.将当前时间显示出来，每秒变化都需要显示，div.innerHtml=“时间”
将所有的阿拉伯数值以中文数值显示

<div id="div0"></div>
<script>
	var div;
	var numberArr=["零","一","二","三","四","五","六","七","八","九","十"];
	var weekArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
	init();
	function init(){
		div=document.getElementById("div0");
		setInterval(animation,1000);
	}
	function animation(){
		var date=new Date();
		var year=date.getFullYear();
		var month=date.getDate();
		var week=date.getDay();
		var hours=date.getHours();
		var minutes=date.getMinutes();
		var seconds=date.getSeconds();
		var str=hours<5?"凌晨":(hours<12?"上午":(hours<14?“中午”:(hours<18?"下午":"晚上")))；
		div.innerHTML=getYear(year)+年+getChinaNumber(month+1)+"月"+getChinaNumber(day)+"日"+weekArr[week]+"  "+str+"  "+getChinaNumber(hours)+"点"+getChinaNumber(minutes)+“分"+getChinaNumber(seconds)+"秒"
	}
	function getYear(year){
		var str="";
		year=String(year);
		for(var i=0;i<year.length;i++){
			str+=numberArr[Number(year[i])];	
		}
		return str;
	}
	function getChinaNumber(num){
		if(num>=100)return;
		if(num<11)return numberArr[num];
		if(num%10===0){
			return numberArr[num/10]+“十”;
		}
		if(num<20){
			return "十"+numberArr[num%10];
		}
		return numberArr[Math.floor(num/10)]+"十"+numberArr[num%10];
	}
	</script>

DOM获取
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值

var div=document.getElementById("div0");//根据ID名获取
div.n=5;//这种定义的属性都是对象属性
getElementsByTagName();//根据标签名
getElementsByClassName();//根据class
getElementsByName();//根据name获取
querySelector();//根据选择器来查找第一个元素
querySelectorAll();//根据选择器来查找所有元素

节点遍历

document.body.children;//获取子元素
document.body.childNodes;//获取子节点

document.body.parentElement;//父元素
document.body.parentNode;//父节点

document.body.firstElementChild;//第一个子元素
document.body.firstChild;//第一个子节点

document.body.lastElementChild;//最后一个子元素
document.body.lastChild;//最后一个子节点

document.body.nextElementSibling;//下一个兄弟元素，弟弟
document.body.nextSibling;//下一个兄弟节点，弟弟

document.body.previousElementSibling;//上一个兄弟元素，哥哥
doucment.body.previousSibling;//上一个兄弟节点，哥哥

DOM节点操作

document.createElement("div");//根据标签创建元素

document.body.appendChild(div);//将元素插入在DOM对象中的尾部

document.createTextNode("文本内容");//创建文本节点

div.insertBefore(span,text);//插入什么元素前面，第一个参数是新元素，第二个参数是插入的位置

img.cloneNode(true/false);//深复制true,复制元素包括它的子元素；浅复制false，只复制该元素；若ID重复，复制完成后如果有ID，需要更换

div.replaceChild(p,imgs);//替换元素，（新元素，要替换的旧元素）

div.removeChild(p);//父级要删除子级元素
img.remove();//自己删除自己，自杀

第十天

碎片容器

var ul=document.createElement("ul");
        document.body.appendChild(ul);
//        创建碎片容器,就像一个胶囊，提升效率
//		
        var temp=document.createDocumentFragment();
        for(var i=0;i<100;i++){
            var li=document.createElement("li");
            temp.appendChild(li);
        }
        ul.appendChild(temp);

对象属性

var div0=document.getElementById("div0");
div0.num=5;

标签属性

//        设置元素标签属性，age是属性名，30是值，要求值必须是字符
        div0.setAttribute("age","30");
//        获取标签属性，值是字符
        console.log(div0.getAttribute("age"));
//        删除标签属性
        div0.removeAttribute("class");

对象的样式和属性

    //IE8及以下不支持
//    console.log(getComputedStyle(div).width);
    //IE8以下支持
//     console.log(div.currentStyle.width);

用try…catch解决

var width;
    try {
        width=getComputedStyle(div).width;
    }catch (e){
        width=div.currentStyle.width;
    }
    console.log(width);

判断解决

if(div.currentStyle){
            width=div.currentStyle.width;
        }else{
            width=getComputedStyle(div).width;
        }

DOM常见属性
宽高

clientHeight    //width+padding-滚动条宽度、高度
offsetHeight    //width+padding+border
scrollHeight    //容器内滚动范围的宽度和高度（如果没有滚动，减去滚动条高度）

//        默认状态,页面宽度-margin*2   高度 0
//        console.log(document.body.clientWidth,document.body.clientHeight);
//        浏览器页面的宽度，浏览器页面的高度
//        console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
//        浏览器页面被撑开的宽度和高度，实际内容的宽高
//        console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);

位置、左上顶角的位置

不能设置，只读：
clientLeft/clientTop    //border的宽度
offsetLeft/offsetTop    //边线外到父级容器的距离，如果父级容器没有定位，就会到再上层的父级位置
可以设置：
scrollLeft/scrollTop    //设置页面滚动条

获取到距离页面的位置和offset的宽高
getBoundingClientRect();

小案例——小球点击移动/停止

css:
div{
	width:50px;
	hiight:50px;
	background-color:red;
	position:absolute;
}
html:
<div></div>
js:
var div;
init();
function init(){
	div=document.querySelector("div");
	div.bool=false;
	setInterval(animation,16);
	div.addEventListener("click",clickHandler);
}
function animation(){
	if(!div.bool)return;
	div.style.left=div.offsetLeft+2+"px";
}
function clickHandler(e){
	this.bool=!this.bool;
}

小案例——回到顶部，不用锚点

css:
div{
	width:50px;
	height:50px;
	background-color:gray;
	position:fixed;
	right:50px;
	bottom:50px;
	line-height:50px;
	text-align:center;
	cursor:default;
}
html:
	<div>TOP</div>
js:
	var div;
	var bool=false;
	init();
	function init(){
		div=document.querySelector("div");
		for(var i=0;i<300;i++){
			Method.createElem("p",document.body,i);//已经封装好的函数，可用于创建元素，具体见自己Method库
		}
		div.addEventListener("click",clickHandler);
		setInterval(animation,16);
	}
	function animation(){
		if(！bool)return;
		if(document.documentElement.scrollTop<=0){
			bool=false;
			return;
		}
		document.documentElement.scrollTop-=300;
	}
	function clickHandler(e){
		e=e||window.event;
		bool=true;
	}

作业

1、留言薄,ul做界面，下方有文本框，点击按钮创建li，li里面内容是文本框的值，
右侧有小×，点击可以删除当前的li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
        var ul=document.createElement("ul");
        document.body.appendChild(ul);
        ul.style.width="800px";
        ul.style.height="400px";
        ul.style.border="1px solid #000000";
        ul.style.padding="0";
        ul.style.listStyle="none";
        var input=document.createElement("input");
        input.type="text";
        input.style.width="720px";

        document.body.appendChild(input);
        var bn=document.createElement("button");
        bn.textContent="留言";
        bn.style.width="78px";
        document.body.appendChild(bn);
        bn.addEventListener("click",clickHandler);
        ul.style.paddingRight="5px";
        function clickHandler(e) {
            e=e || window.event;
//            去除字符串前后空格
            if(input.value.trim().length===0) return;
            var li=document.createElement("li");
            li.textContent=input.value;
            li.style.fontSize="20px";
            var a=document.createElement("a");
            a.style.cursor="default";
            a.style.float="right";
            a.innerHTML="&times;";
            a.addEventListener("click",removeClickHandler);
            li.appendChild(a);
            ul.appendChild(li);
            input.value="";
        }

        function removeClickHandler(e) {
            e=e || window.event;
            this.parentElement.remove();
        }
    </script>
</body>
</html>