JS事件、Bom对象和Dom对象

JS事件

事件

html处理程序

特点
				与元素耦合度太高
			<标签名 onclick = "函数"></标签名>

		<button type="button" onclick="test()" onmouseout="console.log('鼠标移开')">html处理程序</button>

DOM0级处理程序

特点
只能为同一个元素的同一个事件设定多个处理程序（覆盖）
1.获取事件源
var 事件源 = document.getElementById(“事件源的id属性值”);
2.绑定事件
事件源.onmouseout = function(){
…
}

		<button type="button" id="btn1">DOM0级处理程序</button>

//DOM0级处理程序
			//获取事件源
			var btn = document.getElementById("btn1");
			//绑定事件
			btn.onclick = function(){
				console.log('DOM0级处理程序1');
			}

DOM2级

特点
				可以为同一个元素绑定多个事件
			方法
				addEventListener
					1.获取事件源
						var 事件源 = document.getElementById("事件源的id属性值");
					2.绑定事件
						事件源.addEventListener('click',function(){
							......处理代码
						});
					或
					function test(){
						......处理代码
					}
					2.绑定事件
						事件源.addEventListener('click',test);
				
				removeEventListener
					1.获取事件源
						var 事件源 = document.getElementById("事件源的id属性值");
					2.移除监听的事件
						事件源.removeEventListener('click',函数名);

		<button type="button" id="btn2">DOM2级处理程序</button>

//DOM2级处理程序
			var btn2 = document.getElementById("btn2");
			//绑定事件的监听
			btn2.addEventListener('click',function(){
				console.log("DOM2级处理程序1");
			});
			btn2.addEventListener('click',function(){
				console.log("DOM2级处理程序2");
			});

Bom

系统对话框

（1）消息框:alert， 常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
（2）输入框:prompt，返回提示框中的值。
prompt() 方法用于显示可提示用户进行输入的对话框。
参数（可选）：
第一个参数：要在对话框中显示的纯文本。
第二个参数：默认的输入文本。
（3）确认框:confirm，返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

window窗口

打开窗口
window.open(); 打开空窗口
window.open(地址); 打开网页，可以是在线地址或本地地址

关闭窗口
window.close(); 关闭当前窗口

时间函数

setTimeout
在指定毫秒数之后执行某个函数 返回唯一标识 方便关闭
var id = setTimeout(函数名,毫秒数);

setInterval
以指定毫秒数为周期，循环执行 返回唯一标识 方便关闭
var id = setInteval(函数名,毫秒数);

clearInterval(id);
清除时间函数

<script type="text/javascript">
			//在指定毫秒数后执行某个函数
			function fun1(){
				console.log("卢本伟牛逼")
			}
			setTimeout(fun1,2000);
			
	  		//指定毫秒数为周期，循环执行
			setInterval(fun1,2000);
			
      	</script>

history

history

		​	history对象的方法：
		​	back()：加载 history 列表中的前一个 URL。
		​	forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。
		​	go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面
		
			属性
				length

location

location
属性
window.location.href; 获取当前网页的地址
window.location.href = “地址”; 跳转
方法
reload 重新加载页面
replace 选择一个页面替换当前页面

Dom

获取Dom对象

     	getElementById()           根据id获取dom对象，如果id重复，那么以第一个为准
		getElementsByTagName()     根据标签名获取dom对象数组
		getElementsByClassName()   根据样式名获取dom对象数组
		getElementsByName()        根据name属性值获取dom对象数组，常用于多选获取值

//getElementById() 
			function testById(){
				var p = document.getElementById("p1");
				console.log(p);
			}
			//根据标签名获取dom对象数组
			function testByName(){
				var hobbys = document.getElementsByName("hobby");
				console.log(hobbys);
			}
			
			//根据样式名获取dom对象数组
			function testByTagName(){
				var inpts = document.getElementsByTagName("input");
				console.log(inpts);
			}
			
			function testByClass(){
				var prs = document.getElementsByClassName("para");
				console.log(prs);
			}

创建，插入节点

	创建节点的方法
			createElement()创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
			createTextNode()创建一个文本节点，可以传入文本内容
			innerHTML也能达到创建节点的效果，直接添加到指定位置了
			
	插入节点
			write()将任意的字符串插入到文档中
			appendChild()向元素中添加新的子节点，作为最后一个子节点
			insertBefore()向指定的已有的节点之前插入新的节点newItem：要插入的节点exsitingItem：参考节点   需要参考父节点	 

                //方式一
				//创建新的段落
				 var newP = document.createElement("p");
				创建一个文本节点
				 var newText = document.createTextNode("段落块级元素");
				//将文本追加到元素中
				 newP.appendChild(newText);
				//将元素添加到指定位置
				 div.appendChild(newP);
				
				//方式二
				//创建新的段落
				var newP = document.createElement("p");
				//给元素设置内容
				newP.innerHTML = "新的节点";
				//将元素添加到指定位置
				 div.appendChild(newP);
				
				//方式三
				var str = "<p>new段落</p>";
				div.innerHTML += str;

间接节点查询

        childNodes      返回元素的一个子节点的数组
		firstChild      返回元素的第一个子节点
		lastChild      返回元素的最后一个子节点
		nextSibling      返回元素的下一个兄弟节点
		parentNode      返回元素的父节点
		previousSibling      返回元素的上一个兄弟节点

	//返回元素的一个子节点的数组
			var div = document.getElementById("mydiv");
			console.log(div.childNodes);
			
			//返回元素的一个子节点的数组
			console.log(div.firstChild);
			
			//返回元素的最后一个子节点
			console.log(div.lastChild);
			
			// 返回元素的下一个兄弟节点
			var span = document.getElementsByTagName("span")[0];
			console.log(span.nextSibling);
			
			//parentNode
			console.log(span.parentNode);
			
			//返回元素的上一个兄弟节点
			console.log(span.previousSibling);

删除节点

删除节点
			removeChild();    先找到父节点    操作删除
			需要被删除的子节点.parentElement.removeChild(需要被删除的子节点)

function delNode(){
				//获取需要被删除的节点对象
				var pro = document.getElementById("programmer");
				pro.parentElement.removeChild(pro);
			}

表单

获取表单

       1、document.表单名称
		2、document.getElementById(表单 id);
		3、document.forms[表单名称]
		4、document.forms[索引]; //从 0 开始 

<body>
		 <form id='myform' name="myform" action="" method="post"></form>
		 <form id='myform2' name="myform2" action="" method="post"></form>
		 
		 <script type="text/javascript">
		 	//document.表单名称
			console.log(document.myform2);
			
			// document.getElementById(表单 id);
			console.log(document.getElementById("myform"));
			console.log("========");
			//3、document.forms[表单名称]
			console.log(document.forms['myform']);
			console.log(document.forms[1]);
		 </script>
	</body>

获取表单元素

获取数据
			表单元素
				节点对象.value;        取值
				节点对象.value = 值;   设置值
				文本框，密码框，文本域......S
				
			非表单元素
				节点对象.innerHtml;       取值
				节点对象.innerHtml = 值;  设置值
				
			1)、通过 id 获取：document.getElementById(元素 id);
			2)、通过 form.名称形式获取: myform.元素名称;    name属性值
			3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
			4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始

表单提交

提交表单
			（1）使用普通button按钮+onclick事件+事件中编写代码:
				获取表单.submit();
			（2）使用submit按钮 + onclick="return 函数()" +函数编写代码: 
		​		最后必须返回：return true|false;
			（3）使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数();" +函数编写代码: 
		​		最后必须返回：return true|false;