DOM----基础语法（onclick，onmouseover, setInterval , onkeydown）

1.onclick  点击事件

//一.练习DOM onclick 点击事件
			// var div = document.getElementsByTagName("div")[0];
			// div.style.width = "100px";
			// div.style.height = "200px";
			// //div.style.backgroundColor = "red";
			// div.style.marginBottom = "50px";
			
			//  //点击一次 背景色变成蓝色，再点击一次还原为红色
			//  var count  = 0;
			//  var i = 2;
			// div.onclick = function() {
			// 		count ++;
			// 		if(count % i == 1 ) {
			// 			this.style.color = "blue";
			// 		}else {
			// 			this.style.color = "pink";
			// 	}
			// }
		
		// 二。选项卡：点击那个button，那个高亮，并显示对应内容
		// var btn = document.getElementsByTagName('button');
		// var div = document.getElementsByClassName('content');
		// for( var i = 0 ; i < btn.length ; i ++ ) {
		// (function (n) {
			
		// 	btn[i].onclick = function () {
		// 		for( var j = 0 ; j < btn.length ; j++ ) {
		// 			btn[j].className = "";//点击其他button，原button高亮背景色消失
		// 			div[j].style.display = "none";//点击其他button，盒子消失
		// 		}
		// 		this.className = "active";//给当前点击button加上黄色
		// 		div[n].style.display = "block";//当前点击的button显示对应盒子
		// 	}
			
		// }(i) )
		// }

　　二.onmouseover  鼠标移入事件

 

 三.setInterval （移动）/onkeydown（键盘事件）/  clearintval （清空移动的方法）

	//setInterval 每隔多少秒，执行下列函数
			//clearIntval 清空运动的物体
			//三让物体运动起来
			// var follow = 1;
		 //  var empty =  setInterval(function () {
			// 	follow += follow /100; //和下面毫秒一块进行使用，使运动的物体变得缓慢
			// 		div.style.top = parseInt(div.style.top) + follow + "px";//将类型转换成整数，在进行赋值
			// 		div.style.left = parseInt(div.style.left) + follow + "px";
			// 	//判断物体是否晕倒到300，到达300则停下来
			// 	if( parseInt(div.style.top) > 300 && parseInt(div.style.left) >300 ) {
			// 			clearInterval(empty);
			// 	};
			// },10);
			
			//四
			//onkeydown 键盘事件，按下按键，执行JS代码
			//上 38 下 40  左 37 右 39
			//通过键盘事件，点击上下左右剪，分别进行移动
			var speed = 5;
			btn.onclick = function () {
				speed++;//点击button，给div加速
			}
			document.onkeydown = function (e) {
				switch(e.which) {
					case 38 :
						div.style.top = parseInt(div.style.top) - speed + "px";
					break;
					case 40 :
						div.style.top = parseInt(div.style.top) + speed + "px";
					break;
					case 37 :
						div.style.left = parseInt(div.style.left) + speed + "px";
					break;
					case 39 :
						div.style.left = parseInt(div.style.left) - speed+ "px";
				}
			}

　　四.QuerySelectorAll（）//创建副本，镜像（//类似于创建副本，之后在用方法创建出来的元素，增删改查都不会显示在这里）