DOM编程和事件

Day21 DOM编程和事件

定时器

• setTimeout()：到了多少时间后执行(只执行一次)
• clearTimeout() ：取消定时器
• setInterval()：每隔多长时间执行(不断执行)
• clearInterval() ：取消定时器

var timerid = setTimeout(function(){
	console.debug("biu biu biu")
},2000);//两秒后执行这个匿名函数

clearTimerout(timerid);

setInterval(function(){
	console.debug("我是两秒就要执行一次的代码");
},2000);

clearInterval(timerId);

DOM

Document Object Model

DOM结构

Node ： 节点（一切皆节点）
Document：文档
Element：元素
Attribute：属性
Text：文本（节点内容）
D：文档 – html 文档 或 xml 文档（document）
O：对象 – document 对象的属性和方法
M：模型

获取DOM的三种方式

• 通过ID获取 document.getElementById(idValue)
  拿到的是唯一的一个元素

• 通过Name获取 document.getElementsByName(nameValue)

• 通过Tag获取 document.getElementsByTagName(tagName)

  • 可以拿到多个,只能拿到一种标签
  • Element.getElementsByTagName(标签名); //拿到这个元素中的相应标签
  • Element.getElementsByTagName(“*”); //拿到这个元素中的所有标签

Node常用的属性和方法

• 获取根节点
  var rootEle = document.documentElement
• 获取网页的宽度
  console.debug(rootEle.clientWidth);
• 获取网页的高度
  console.debug(rootEle.clientHeight);
• 获取内容节点
  document.body;

节点的操作

节点列表

• parentNode 父节点 Node
• firstChild 列表中的第一个节点 Node
• lastChild 列表中的最后一个节点 Node
• childNodes 所有子节点的列表 Node[]
• previousSibling 上一个兄弟节点 Node
• nextSibling 下一个兄弟节点 Node

var mdiv = document.getElementById("mdiv");
console.debug(mdiv.parentNode);
console.debug(mdiv.firstChild);

<div id="mdiv">
	这是我的div
	<span>这是我的span标签</span>
</div>

打地鼠(节点的操作)

1. 创建元素节点<img/>
   var imgEle = document.createElement(“img”);
2. 设置属性的值<img src="img/1.jpg"/>
   imgEle.src = “img/1.jpg”;
3. 设置样式 class是js中的保留字 如果要设置class，请使用className<img class='ys' src="img/1.jpg"/>
   imgELe.className = “ys”;
4. 获取网页的宽度
   var width = document.documentElement.clientWidth;
5. 获取网页的高度
   var heigth = document.documentElement.clientHeight;
6. 随机生成图片与左边界的距离
   var randomWidth = Math.floor(Math.random()*(width+1));
7. 随机生成图片与上边界的距离
   var randomWidth = Math.floor(Math.random()*(heigth+1));
8. 设置样式
   imgEle.style.left = randomWidth+“px”;
   imgEle.style.top = randomHeight+“px”;
9. 给图片添加点击事件
   imgEle.onclick = function(){
   //父节点删除子节点
   imgEle.parentNode.removeChild(imgEle);
   }
10. 在body标签中添加创建的节点
    document.body.appendChild(imgEle);
    }
11. 定时器
    setInterval(createImg,1000);

innerHTML和innerText

innerHTML和innerText的区别：
相同点：他们都是用来获取或者设置指定标签中的值
不同点：

• innerHTML用来获取指定标签中的所有值，而innerText用来获取指定标签中的纯文本
• innerHTML设置的值中如果有html代码，他是能被浏览器所解析的，而innerText中如果有html代码 ，会以纯文本进行显示。

window.onload = function(){
	//获取值 innerHTML
	var html = document.getElementById("mdiv").innerHTML;
	console.debug(html);
	//获取值  innerText
	var text = document.getElementById("mdiv").innerText;
	console.debug(text);
	
	//设置值
	document.getElementById("mdiv").innerHTML = "<h2>我是被InnerHTML修改的值</h2>"
	document.getElementById("mdiv").innerText="<h3>我是被InnerText修改的值</h3>"
}

<div id="mdiv">
	<h1>这是我的div</h1>
</div>

属性的操作

属性的分类

1. 内置属性 --> IDE工具直接可以提示的属性
   • 获取属性
     dom节点.属性名

• 设置属性
  dom节点.属性名 = 值

2. 自定义属性
   • 设置属性:dom节点.setAttribute(属性名,属性值)
   • 获取属性:dom节点.getAttribute(属性名)

var val = document.getElementById("username").value;
alert("文本框输入的值为:"+val);
document.getElementById("username").value = "我是修改的值"
document.getElementById("username").name = "uname";

//设置自定义属性的值
document.getElementById("username").setAttribute("sex",'男');
//获取自定义属性的值
val = document.getElementById("username").getAttribute("sex");
alert("获取自定义属性的值:"+val);

<input type="button" value="获取文本框内的值" onclick="clickBtn()" />
<input type="text" id="username" value="默认值" />

特殊属性的操作

• readonly=“readonly”
• disabled=“disabled”

<input type="button" value="选中" onclick="clickBtn1()" />
		
//修改checked的值
<input type="checkbox" id="hobby" value="女"  />女

<input type="button" value="只读禁用" onclick="clickBtn2()" />
<!--readonly="readonly"  只读-->
<input type="text" id="username" readonly="readonly" />

<!--disabled="disabled"  禁用-->
<input type="text" id="age" disabled="disabled"/>

script:

function clickBtn1(){
	var hobby = document.getElementById("hobby");
	//如果你要动态操作checked属性,只需要设置true或者false即可
	/*
	//方式1
	if(!hobby.checked){
		//选中
		hobby.checked = true;
	}else{
		//不选中
		hobby.checked = false;
	}
	//方式2
	hobby.checked = (!hobby.checked?true:false);
	*/
	//方式3
	hobby.checked = !hobby.checked;

}

function clickBtn2(){
	//获取dom节点
	var username = document.getElementById("username");
	var age = document.getElementById("age");
	//修改特殊属性的值
	username.readOnly = !username.readOnly;
	age.disabled = !age.disabled;
}

事件

事件驱动编程中的几个核心对象

事件源：谁发出事件通知，发出消息；也就是事件主体（通常指元素和标签）；
事件名称：发出什么样的通知的名称，比如鼠标到我头上了，我被别人点了一下；
事件响应函数：谁对这个这个事件感兴趣，当这个事件发生时要执行什么样的操作；
事件对象：一般来说，当事件发生时，会产生一个描述该事件的具体对象，包括具体的参数等一起发给响应函数，好让他们通过事件对象来了解事件更加详细的信息。
事件对象中包含事件中的所有信息

常见的事件

• click(单击时间)
• dblclick(双击事件)
• mousedown(鼠标按下事件)
• mouseup(鼠标释放事件)
• mouseout(鼠标移出)
• mouseover(鼠标移入)
• mousemove(鼠标移动)

<input type="button" value="单击" onclick="doIt('单机事件')" />
<input type="button" value="双击" ondblclick="doIt('双击事件')" />
<input type="button" value="鼠标" onmousedown="doIt('鼠标按下事件')" onmouseup="doIt('鼠标释放事件')" />
<input type="button" value="移入和移出事件" onmouseover="doIt('进去了')" onmouseout="doIt('出来了.')" />
<input type="button" value="鼠标移动" onmousemove="doIt('鼠标移动事件')"  />


function doIt(msg){
	console.debug(msg)
}

事件附录

onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。

onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。

onload和onchange

window.onload: 当页面内容加载完毕之后,执行匿名函数中的内容
onchange:当值发生改变的时候,触发该事件

<select onchange="changeColor(this)">
	<option value="red">红色</option>
	<option value="green">绿色</option>
	<option value="blue">蓝色</option>
</select>

function changeCountry(obj){
	console.debug(obj.value);
}

form表单常见的事件

• οnsubmit=“return checkForm()”：在提交前触发的事件
• οnreset=“return resetForm()” ：在重置前触发的事件
• οnfοcus=“focus01()” ：得到焦点的时候触发的事件
• οnblur=“blur01()” ： 失去焦点的时候触发的事件

<form onsubmit="return checkForm()" onreset="return resetForm()" action="/admin" method="post">
	username:<input onfocus="focus01()" onblur="blur01()" type="text" name="username" id="username" /><br />
	age:<input type="text" name="age" id="age" /><br />
	<input type="submit" value="提交" />
	<input type="reset" value="重置" />
</form>

script:

<script type="text/javascript">
	function checkForm(){
		var username = document.getElementById("username").value;
		if(!username){
			alert("情输入用户名");
			document.getElementById("username").focus();
			return false;
		}
		var age = document.getElementById("age").value;
		if(!age){
			alert("情输入年龄");
			document.getElementById("age").focus();
			return false;
		}
	}
	
	function focus01(){
		console.debug("请输入正确的用户名");
	}
	
	function blur01(){
		console.debug("该用户不存在");
	}
	
	function resetForm(){
		var boo = confirm("确认重置");
		if (boo == true) {
			alert("是的")
			return true;
		} else{
			alert("不重置")
			return false;
		}
	}
</script>

注册事件的三种方式

• 直接在元素上注册 οnclick=“regEve()”
  • 优点: 多浏览器支持非常完美
  • 缺点: 散落在代码各个地方,代码比较混乱，不方便事件批量管理 如果有很多元素要注册同一个事件，它就比较麻烦
• 元素.onXXX注册
  • 优点: 简单，多浏览器支持
  • 缺点: 不支持多个事件,不支持取消事件
• addEventListener或attachEvent
  • addEventListener :添加事件
  • removeEventListener：移除事件
  • 优点:也可以拿到自己(this),并且可以支持多个事件(也支持取消事件)
  • 缺点:比较麻烦,IE不支持

<script type="text/javascript">
	function regEve(){
		alert("这是注册事件的方式一")
	}
	
	window.onload = function(){
		document.getElementById("reg").onclick = function(){
			alert("这是注册事件的方式二")
		};
	
		document.getElementById("listener").addEventListener("click",function(){
			alert("这是注册事件的方式三 但是IE8以下的浏览器不支持这种方式")
		});

		document.getElementById("listener").attributes("onclick",function(){
			alert("这是注册事件的方式三 ，这种 方式只支持IE8以下的浏览器")
		});
	};
	
</script>
<body>
	<input type="button" value="方式1" onclick="regEve()" />
	
	<input type="button" value="方式2"  id="reg" />
	
	<input type="button" value="方式3"  id="listener" />
</body>

打字游戏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.letter{
				border: 5px solid blue;
				width: 60px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				font-size: 30px;
				font-weight: bold;
				background-color: black;
				color: red;
				border-radius: 50%;
				position:absolute;
				top: 0px;
			}
			.score{
				border: 5px solid blue;
				width: 60px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				font-size: 30px;
				font-weight: bold;
				position: absolute;
				right: 10px;
				top: 3px;
			}
		</style>
		
		<script type="text/javascript">
			
			//定义一个数组,该数组装所有的字母
			var letters = [];
			
			//创建字母
			function createLetter(){
				//创建一个div元素        <div></div>
				var letterDiv = document.createElement("div");
				//设置样式       <div class="letter"></div>
				letterDiv.className = "letter";
				//随机产生A-Z的随机数(随机数)
				var randomNum = Math.floor(Math.random()*26)+65;
				//根据随机数字,产生对应的字母
				var letter = String.fromCharCode(randomNum);
				//设置字母的值    <div class="letter">A</div>
				letterDiv.innerHTML = letter;
				//距离右边的距离
				var right = document.documentElement.clientWidth-130;
				//距离左边的距离
				var left = 90;
				//产生安全位置的随机数
				left = Math.floor(Math.random()*(right-left+1))+left;
				//设置div距离左边的随机数
				letterDiv.style.left = left+"px";
				
				//body内容节点添加子节点
				document.body.appendChild(letterDiv);
				//把创建的字母放到数组中
				letters.push(letterDiv);
			}
			
			//移动字母
			function moveLetter(){
				//安全距离
				var safeDistance = document.documentElement.clientHeight-70;
				//循环所有的字母
				for(var k in letters){
					//获取具体的字母
					var letter = letters[k];
					//让每个字母移动起来
					//letter.offsetTop 当前div距离顶部的距离
					letter.style.top = (letter.offsetTop+20)+"px";
					if(letter.offsetTop > safeDistance ){
						//删除letter
						document.body.removeChild(letter);//dom节点删除
						//数组要删除
						letters.splice(k,1);
						//减分
						document.getElementById("score").innerHTML--;
					}
				}
			}
			
			
			//注册的鼠标事件
			function addListener(){
				//获取事件对象   event 内置对象
				var e = event;
				//获取键盘号,并且变为大写
				var key = e.key.toUpperCase();
				//循环所有的字母
				for(var k in letters){
					//拿到具体的字母
					var letter = letters[k];
					//输入键盘的值是否和数组中的值一致,如果一致,加分,并且删除该div
					if(key===letter.innerHTML){
						//删除dom中的值
						document.body.removeChild(letter);
						//删除数组中的值
						letters.splice(k,1);
						//添加分数
						document.getElementById("score").innerHTML++;
						break;//删除完毕之后,结束程序
					}
				}
			}
			
			//点击开始游戏
			function startGame(){
				//每隔0.2s移动每个字母
				moveLetterId = setInterval(moveLetter,500);
				//每隔1s创建一个字母
				letterId = setInterval(createLetter,1000);
				//点击一次之后,禁用开始按钮
				document.getElementById("start").disabled = true;
					//暂停按钮禁用状态
				document.getElementById("suspend").disabled = false;
				//给根节点注册一个键盘事件
				document.documentElement.addEventListener("keypress",addListener);
			}
			
			//暂停游戏
			function suspendGame(){
				//消除定时器
				clearInterval(moveLetterId);
				clearInterval(letterId);
				//开始按钮启用状态
				document.getElementById("start").disabled = false;
				//暂停按钮禁用状态
				document.getElementById("suspend").disabled = true;
				//注销事件
				document.documentElement.removeEventListener("keypress",addListener);
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始游戏" id="start" onclick="startGame()"/><br />
		<input type="button" value="暂停游戏" id="suspend" onclick="suspendGame()" /><br />
		<div class="score" id="score">0</div>
	</body>
</html>