网页——JS（DOM、事件）

一、DOM：Document Objec Modle 文档对象模型:将HTML的各个组成部分看做一个对象
（1）通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应
  （2）查找HTML元素：通过JS，操作HTML元素
• 通过 id 找到 HTML 元素 getElementById():通过id属性值获取唯一的元素
• 通过标签名找到 HTML 元素 getElementsByTagName():通过标签名称获取元素对象数组
• 通过类名找到 HTML 元素 getElementsByClassName():通过class属性值获取元素对象数组 */
  （一）组成：
  Element 标签对象、Attribute 属性对象、Comment 注释对象、Text 文本对象、document 整个的HTML文档对象、Node:节点对象、DOM树 父节点子节点所构成了一个DOM树
  怎么获取文档对象：通过window中的document这个属性,来获取出文档对象
  （1）通过文档对象获取标签对象的几种常见方式

	/* 	 方法：
					* 获取Element对象
					* getElementsByName():通过name属性值获取元素对象数组
				var doc=window.document;  //文档对象中的属性和方法
				var bd=doc.body;   //获取body标签对象
				bd.style.background="red";
				// write() 向文档写 HTML 表达式 或 JavaScript 代码。
				//window.document.write("abc","ccc","ddd");//向文档中输出内容
				alert(document.URL);
				alert(document.title);
				alert(document.lastModified);

document中的方法：
1.

		var h1ELE=document.getElementById("myh1");   //通过一个标签的id 来获取一个标签对象
		//标签对象的属性
		var text=h1ELE.innerHTML;//获取标签之间的内容
		h1ELE.innerHTML="设置标签之间的文本";
		alert(text);
		//通过标签名来获取多个标签对象
		//返回是装有多个标签对象的数组
		var bs=document.getElementsByTagName("b");
		alert(bs.length);
		bs[0].style.color="red";
		for(var i=0;i<bs.length;i++){
			if(i%2==0){
				bs[i].style.color="red";
				bs[i].style.fontSize="20px"
			}else{
				bs[i].style.color="green";
				bs[i].style.fontSize="10px"
			}
		}

2.针对表单标签,提供了一个方法根据表单标签的name属性值,来获取多个表单元素

var arr = document.getElementsByName("username");
		arr[0].style.color = "red";
		var sex2 = document.getElementsByName("sex");
		sex2[0].checked="checked";

3.通过标签上的 class属性值,来获取多个标签的对象的数组

var arr=document.getElementsByClassName("myclass");
		arr[2].style.background="red";

（2）Element 标签对象的常用属性

var myDiv=document.getElementById("mydiv");
		//标签对象里面有几个属性
		//获取标签之间的内容
		 var a=myDiv.innerHTML; //获取标签之间的子标签和文本
		 var b=myDiv.innerText;//只获取标签之间夹的文本,不拿子标签
		 alert(a);
		 alert(b);
		myDiv.innerHTML="<h2>abcdddd</h2>"
		myDiv.innerText="aaaaaaaaa";
		
		myDiv.textContent="eeeeeeeeeeeeeeeeeabc";  textContent跟innerText一个意思
		//给标签对象设置style样式 就用 style属性
		//语法: 标签对象.style.css样式名="值"    注意的是,值是字符串类型
		myDiv.style.color="red";
		//css样式名里面有 "-" 横杠拼接的,注意把 "-" 去掉 然后把"-"横杠后面的第一个字母大写
		myDiv.style.fontSize="100px";
        myDiv.style.height="500px";
		 myDiv.style.width="600px";
		 myDiv.style.border="1px black solid";
		 
		 //给标签对象设置style样式的方式2

		 myDiv.style.cssText+="font-family:'黑体';background-color:yellow";

（二）标签对象

var fontEle = document.getElementsByTagName("font")[0];
		//通过调用方法,给标签自带的属性设置
		//    fontEle.getAttributeNode("size").value="7";
		// fontEle.getAttributeNode("color").value="red";
		//简便方式,就是直接通过标签对象.属性名 就可以获取或者设置属性的值
		fontEle.size = "7";
		fontEle.color = "yellow";

（1）创建标签对象

var bd=document.body;
		var mycom=document.createComment("这是一行注释");
		//创建属性对象
		var attri=document.createAttribute("style");
		attri.value="color:red;background:yellow";
		//怎么创建DOM对象
		//创建标签对象
		var myH1=document.createElement("h1");
		//myH1.setAttributeNode(attri); //设置属性对象
		//给标签设置属性以及属性的值
		myH1.setAttribute("style",'color:red;background:yellow;font-size:100px');
		//创建文本对象
		var myText=document.createTextNode("这是一行文本内容");
		//把文本对象,放到标签之间
		myH1.appendChild(myText);
		//把<h1>标签对象,放到body里面
		bd.appendChild(myH1);
		bd.appendChild(mycom);

（2）创建和删除DOM元素

var bd=document.body;
		var myH1=document.createElement("h1");
		var myText=document.createTextNode("一行文本");
		bd.appendChild(myH1);
		myH1.appendChild(myText);
		//myH1.removeChild(myText); //通过父元素删除子元素
		//myH1.remove(); 元素自己删自己
		bd.removeChild(myH1);

（3）动态创建DOM对象

var mydiv=document.createElement("div");
		mydiv.setAttribute('style','border:1px black solid;height:200px;')
		document.body.appendChild(mydiv);
		var i=-230;
		var timeID=setInterval(function(){
			i++;
			if(i>screen.height-500){
				clearInterval(timeID);	
				setTimeout(function() {
					mydiv.style.display="none";
				}, 2000);
			}else{
			mydiv.style.marginTop=i+"px";
			}
		},1);

（4）属性对象的操作

var mydiv=document.getElementById("myid");
		//获取元素上的属性值
		var v=mydiv.getAttribute("class");
		//alert(v);
		//获取style属性对象
		var attri=mydiv.getAttributeNode("style");
		//属性对象里面有两个属性name,value 可以设置或者获取属性名和属性值
		//var name=attri.name;
		var value=attri.value+="background:yellow";
		
		var atr=document.createAttribute("style");
		atr.value="color:red";
		document.getElementsByTagName("h1")[0].setAttributeNode(atr);
		//删除属性
		//根据属性名,来删除属性
		//document.getElementsByTagName("h1")[0].removeAttribute("style");
		//根据属性对象,来删除属性
		document.getElementsByTagName("h1")[0].removeAttributeNode(atr);
		//获取标签上所有的属性数组
		var attris= mydiv.attributes;
		alert(attris["id"].value);
		alert(attris["id"].name);
		alert(attris["class"].value);

二、事件
HTML事件发生在HTML元素上。
挡在HTML页面使用JS时，JS可以触发这些事情，在事件触发的时候，可以执行一些代码。HTML元素中可以添加事件属性，使用JS代码来添加HTML元素。
直接写入HTML输出流
对事件的反应
改变HTML内容
改变HTML图像
改变HTML样式
验证输入
常见的HTML事件

事件	描述
onchange	HTML元素改变
onclick	用户点击HTML元素
onmouseover	用户在一个HTML元素上移开鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

JS可以做什么？

• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容和的合法性
  可以使用多种方法来执行JS事件代码
• HTML事件属性可以执行JS嗲吗
• HTML事件属性可以调用JS函数
• 可以为HTML元素指定自己的事件处理程序
• 可以阻止事件的放生
  一件事划分：
  事件源：事件发生的源头 绑定事件的组件（标签）
  事件名：点击事情，滚动事件
  事件绑定：把事件绑定给这个标签
  事件处理：处理函数，这个事件被触发后，你的处理逻辑
  事件的绑定方式1：直接将事件写到你要绑定的那个标签上

function test() {
			//alert("触发了");
			document.getElementById("bt").style.backgroundColor = "red";
		}
		var myDiv = document.getElementById("div1");

事件的绑定方式2：事件处理函数

myDiv.ondblclick = function() {
			myDiv.style.color = "red";
		}
		//给所有的div绑定事件
		var hs=document.getElementsByTagName("h1");
		//遍历数组,给数组中的每个对象设置点击事件
		for(var i=0;i<hs.length;i++){
			hs[i].onclick=function(){
				//this 你点击谁就代表谁
				this.style.color="red";
			}
		}

焦点事件举例：

html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text"  value="请输入你的姓名" onfocus="test(this)" onblur="test2(this)" id="username"/>
		
		<span id="sp"></span>
		<br>
	<input type="text" id="" value="请输入你的密码"/>
	</body>
	<script type="text/javascript">
		function test(ele){
			//alert("abc");
			ele.value="";	
		}	
		function test2(ele){
			//var text=document.getElementById("username").value;
			var text=ele.value;
			var len=text.length
			 if(len>=6&&len<=12){
				 //alert(true);
				 	document.getElementById("sp").innerHTML="<font color='green'>符合要求</font>"
			 }else if(text.length==0){
				  document.getElementById("sp").innerHTML="<font color='red'>不能为空</font>"
			 }else{
				  //alert(false);
				  document.getElementById("sp").innerHTML="<font color='red'>不符合要求</font>"
			 }	
		}
	</script>
</html>

案例：校验用户名
具体事件：（一）鼠标事件
（1）鼠标123键位

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				height: 200px;
				width: 200px;
				background: red;
			}

			/* div:active{
				background: yellow;
			} */
		</style>
		<script type="text/javascript">
			function test(e, ele, flag) {
				//alert(e.which) // which 可以获取鼠标 左中右三个键的编码 1 2 3
				if (e.which == 1) {
					if (flag) {
						ele.style.background = "yellow";
					} else {
						ele.style.background = "green";
					}
				}
			}
		</script>
	</head>
	<body>

		<!-- 鼠标按下抬起 -->
		<div id="div1" onmousedown="test(event,this,true)" onmouseup="test(event,this,false)">

		</div>
	</body>
</html>

（2）鼠标悬浮

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				height: 200px;
				width: 200px;
				background: red;
			}
			
			/* div:hover{
				
				background:yellow;
			} */
		</style>
		<script type="text/javascript">
			
			function test(flag,ele){
				if(flag){
					ele.style.cssText="background:yellow"
					
				}else{
					ele.style.cssText="background:pink"
				}
				
			}	
		</script>

	</head>
	<body>
		<div id="div1" onmouseover="test(true,this)" onmouseout="test(false,this)">

		</div>
	</body>
</html>

（3）鼠标移入移出

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai{
				height: 100px;
				width: 200px;
			    background: #FF0000;
			}
		</style>
		<script type="text/javascript">
			function test(ele){
				//alert("鼠标移入");
				ele.style.background="yellow";
				document.getElementById("bt").style.background="blue"
			}
			
			function test2(ele){
				//alert("鼠标移出");
				ele.style.background="#FFFFFF";
				document.getElementById("bt").style.background="palegreen"
			}
			
		</script>
	</head>
	<body>
		<div id="wai" onmouseenter="test(this)" onmouseleave="test2(this)">
			<button type="button" id="bt">一个按钮</button>
		</div>
	</body>
</html>

（二）键盘事件

<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>

		<!-- event 事件对象由浏览器创建，当你事件出发时，可以传递给处理函数来使用 -->
		<input type="text" name="" id="bt" value="" onkeypress="isKeyPressed(event)" />
	</body>


	<script type="text/javascript">
		// altKey 返回当事件被触发时， "ALT"
		// 是否被按下。
		// shiftKey 返回当事件被触发时， "SHIFT"
		//  ctrlKey 键是否被按下。
		//
		//event.keyCode

		function isKeyPressed(event) {
			if (event.altKey == 1) {
				alert(" ALT 键被按下!");
			} else {
				alert(" ALT 键没被按下!");
			}
		}
	</script>
</html>

（三）表单事件

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test(){
				//alert("abc");
			}
			function isSubmit(){
				//完成表单的校验
				return true;
			}
		</script>
	</head>
	<body>
		<form action="#" method="get" onsubmit="return isSubmit()" onreset="test()">
			用户名：<input type="text" name="username" id="" value="" />
			<br>
			密码：<input type="password" name="username" id="" value="" />
			<br>
			<input type="submit" name="" id="" value="提交" />
			<input type="reset" name="" id="" value="重置"  />
		</form>
	</body>
</html>


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
			}
			function test(){
				alert("abc");
			}
			function show(ele){
				ele.style.height="100px";
			}
		</script>
	</head>
	<body>
		<select onchange="test()">
			<option value ="">--请选择学历--</option>
			<option value ="">幼儿园</option>
			<option value ="">小学</option>
			<option value ="">中学</option>
			<option value ="">大学</option>
		</select>
		
		<input type="text" name="" id="" value="" onselect="show(this)"/>
	</body>
</html>

（四）节点事件

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			<h1>abc</h1>
		</div>
		<div id="">打豆豆</div>
		<div id="">
			avbcfsafsadfsadfsafdsf
		</div>
	</body>
	<script type="text/javascript">
		//通过节点的层级关系,去找元素
		// var allNodes = document.all; //节点:文本节点,属性节点,元素节点 父节点,子节点,兄弟节点
		// for (var i = 0; i < allNodes.length; i++) {
		// 	alert(allNodes[i]);
		// }
		// var node = document.body.childNodes[0];
		// node.style.color = "red";
		// node.nextSibling.style.color = "yellow";
		
		var node = document.body.firstElementChild;
		node.style.color="red";
		node.parentElement.style.background="yellow"
		node.nextElementSibling.nextElementSibling.style.fontSize="200px";
	</script>
</html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 一行注释 -->
		<div id="">
			afdasfdasfdas
		</div>
	</body>
	<script type="text/javascript">
		var node = document.body.firstElementChild;
		//alert(node.nodeType); nodeType 获取节点类型
		// var v=node.innerText;
		// alert(v);
		var v = node.firstChild;
		alert(v.nodeValue);
	</script>
</html>