JS事件、Bom对象和Dom对象

4 JS事件、Bom对象和Dom对象

重点:

• 事件类型
• BOM对象的window对象方法
• 表单
• DOM对象

4.1 事件

• 事件 (Event) 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器中 Web

页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定

元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完

成，或者是用户滚动窗口或改变窗口大小。

• 通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响

应。

4.1.1 作用

• 验证用户输入的数据。
• 增加页面的动感效果。
• 增强用户的体验度

4.1.2 事件中的名词

• 事件源: 谁触发的事件 ，车，按钮
• 事件名: 触发了什么事件 ，闯红灯，单击
• 事件监听: 谁管这个事情，谁监视？ ，交警，窗口
• 事件处理:发生了怎么办 ，扣分罚款，执行函数

4.1.3 事件类型

JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。

http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查

Window 事件属性：针对 window 对象触发的事件（应用到 标签）

Form 事件：由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在

form 元素中）

Keyboard 事件 : 键盘事件

Mouse 事件：由鼠标或类似用户动作触发的事件

Media 事件：由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于

媒介元素中，比如 、、、 以及)

• 几个常用的事件：

  onclick 、onblur 、onfocus 、onload 、onchange

  onmouseover、onmouseout、onkeyup、onkeydown

onload：当页面或图像加载完后立即触发 
onblur：元素失去焦点
onchange：用户改变域的内容
onfocus：元素获得焦点 
onclick：鼠标点击某个对象  
onmouseover：鼠标移动到某个元素上 
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开 
onkeydown：某个键盘的键被按下

4.1.4 事件流和事件模型

• 我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个

HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点

都会受到该事件，这个传播过程称为DOM事件流。

• 事件顺序有两种类型：事件捕获 和 事件冒泡。
• 冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为IE和Netscape两个大公司完全不同

的事件流概念产生的。（事件流：是指页面接受事件的顺序）IE的事件流是事件冒泡，Netscape的事件

流是事件捕获流。

4.1.4.1 事件冒泡

• IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体 的节点（文档）。
• 也就是说，click事件首先在div元素上发生，而这个元素就是我们单击的元素。然后，click事件沿 DOM树向上传播，在每一级节点上都会发生，直到传播到document对象。 div,body,html,document。
• 所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。

4.1.4.2 事件捕获

• Netscape提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到

事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。还

以前面的例子为例。那么单击元素就会按下列顺序触发click事件：document，html，body，div。

• 虽然事件捕获是Netscape唯一支持的事件流模式，但很多主流浏览器目前也都支持这种事件流模

型。尽管“DOM2级事件”规范要求事件应该从document对象开始时传播，但这些浏览器都是从window

对象开始捕获的。

4.1.4.3 DOM 事件流

• “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首

先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒

泡阶段，可以在这个阶段对事件做出响应。

4.1.5 事件处理程序

• 事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字，而

响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此

click事件的事件处理程序就是onclick，为事件指定处理程序的方式有好几种。

4.1.5.1 HTML 事件处理程序

• 某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。

• 直接绑定在html元素中

• 特点：
  与元素标签耦合度过高

• 使用方式：
  按钮

  注意:alert不点击会阻止下面代码的运行

			function fun1(){
				alert('123');//alert不点击会阻止下面代码的运行
                console.log('456');
			}

		
		<button type="button" onclick="fun1()" onmousemove="console.log('鼠标悬停')">HTML 事件处理程序button>
		<button type="button" onclick="alert('123');">HTML 事件处理程序1button>

4.1.5.2 DOM0 级事件处理程序

• 通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这

种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己

的事件处理程序属性，这些属性通常全都小写，例如onclick，然后将这种属性的值设为一个函数，就可

以指定事件处理程序了。

• 特点：
  不能为同一个元素绑定同一个事件的多个处理程序,会覆盖

  以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理

• 使用方式

	1.通过id获取元素对象
		var 变量名 = document.getElementById("元素的id属性值");
	2.通过元素对象绑定事件
		变量名.on事件名 = function(){
				//处理程序
		}

• 通过删除DOM0级方法指定的事件处理程序，只要将属性值 设为null即可

• 报错Cannot set properties of null (setting ‘onmouseout’)

  解决办法：将DOM的读取部分的script放在body后面。或者在script标签中添加window.onload，等页面加载结束后再执行这一部分代码。

		//DOM0 级事件处理程序
		//1.获取元素对象
		var btn0 = document.getElementById("btn0");
		//绑定事件
		btn0.onmouseout = function(){
			console.log("鼠标移开1");
		}
		btn0.onmousemove = function(){
			console.log("鼠标移动");
		}
		/* btn0.onmouseout = function(){
			console.log("鼠标移开2");
		}//覆盖之前的 */

		//删除DOM0级方法指定的事件处理程序
		btn0.onmousemove = null;

		
		<button type="button" id='btn0'>DOM0 级事件处理程序button>

4.1.5.3 DOM2 级事件处理程序

• “DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()

和removeEventListener()。所有DOM节点都包含这两个方法，并且他们都接受3个参数：要处理的事件

名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，则表示在捕获阶段调用

事件处理程序；如果是false则表示在冒泡阶段调用事件处理程序。 最后一个可以不写.

• 使用方式
  1.通过id获取元素对象
  var 变量名 = document.getElementById(“元素的id属性值”);
  2.添加事件的监听
  变量名.addEventListener(‘事件名’,function(){
  //处理程序
  });
  或
  变量名.addEventListener(‘事件名’,函数名);
  3.移除事件监听
  只能移除有函数名的处理程序
  变量名.removeEventListener(‘事件’,函数名);

		
		var btn3 = document.getElementById("btn3");
		var btn4 = document.getElementById("btn4");
		//添加事件的监听
		btn3.addEventListener('click',function(){
			console.log("DOM2 级事件处理程序  点击1");
		},false)
		
		btn3.addEventListener('click',click1,false);
		function click1(){
			console.log("DOM2 级事件处理程序  点击2");
		}
		
		//不写false也可以
		btn3.addEventListener('mouseover',function(){
				console.log("DOM2 级事件处理程序  悬停");
			});
			
		//按钮4点击删除按钮3的处理程序,需要有名字
		btn4.addEventListener('click',function(){
			btn3.removeEventListener('click',click1);
		})

		
		<button type="button" id="btn3">按钮3 DOM2 级事件处理程序button>
		<button type="button" id="btn4">按钮4 删除按钮3的事件button>

4.2 BOM对象

• BOM的核心对象是window，它表示浏览器的一个实例。window对象有双重角色，它既是通过 JavaScript访

  问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的 任何一个对象、变

  量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。如果页 面中包含框架，则每个

  框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中， 可以通过数值索引（从0开

  始，从左至右，从上到下）或者框架的名称来访问相应的window对象。

4.2.1 Window对象方法

4.2.1.1 系统对话框

• 浏览器通过（实际是window对象的方法）alert()、confirm()、prompt()方法可以调用系统对话

框向用户显示消息。

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

	<body>
		<button type="button" onclick="fun()">按钮button>
		<script type="text/javascript">
			function fun(){
				//消息框
				//alert('欢迎');
				
				//输入框
				//window加不加都可以
				/* var uname = window.prompt('请输入用户名');
				if(uname == 'admin'){
					alert("欢迎超级用户:"+uname);
				}else{
					alert("欢迎普通用户:"+uname);
				} */
				
				// 确认框
				var flag = confirm('确认删除这条记录吗？')
				if(flag){
					alert('删除成功');
				}
			}
		script>
	body>

4.2.1.2 打开窗口

• window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口
• window.open(); 打开一个空的窗口
  window.open(url地址); 打开链接

<body>
		<button type="button" onclick="fun()">按钮button>
		<script type="text/javascript">
			function fun(){
				//打开一个空的窗口
				//window.open();
				//打开一个在线地址
				// window.open("http://www.baidu.com");
				//打开一个本地地址
				//window.open("01 弹出框.html");
				// 当前窗口打开在线地址
				window.open("http://www.baidu.com","_self")
			}
				
		script>
	body>

4.2.1.3 关闭窗口

• window.close()：关闭窗口。

		按钮
		
	

4.2.1.4 时间函数

1 setTimeOut

• setTimeout() : 在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识；也可以通过返 回的标识clearTimeout(id)： 来清除指定函数的执行。
• 在times毫秒后执行function指定的方法，执行之前也可以取消

2 setInteval()

• setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用

来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

		setInterval(function() {
				console.log("setInteval 2 秒");
			}, 2000)

3 时间例子

		<button type="button" onclick="startTime()">开始button>
		<button type="button" onclick="closeTime()">结束button>
		
		<h2 id="h2">h2> 
		<script type="text/javascript">
			
			//开启时间函数，循环的写出时间
			function startTime(){
				id = setInterval(writeTime,1000);
			}
			
			//时间停止
			function closeTime(){
				//清除时间函数
				clearInterval(id);
			}
			
			//获取时间写出时间到页面中
			function writeTime(){
				//获取到当前时间
				var date = new Date();
				
				//格式化时间
				var str = format(date);
				
				//写出在页面中      设置元素的值/内容：对象.innerHTML = 值;
				/* var h2 = document.getElementById("h2");
				h2.innerHTML = str; */
				//变色
				if(date.getSeconds() == 0){
					//设置样式
					document.getElementById("h2").style.color = "red";
				}else{
					document.getElementById("h2").style.color = "black";
				}
					document.getElementById("h2").innerHTML = str;
				
			}
			
			//格式化时间的函数
			function format(date){
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds() < 10 ?  ("0"+date.getSeconds()) : date.getSeconds();
				
				var str = year +"-"+ month +"-"+ day +" "+ hour +":"+ minute +":"+ second;
				return str
			}
		script>

4.2.2 history对象

• history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是 window

对象的一部分，可通过 window.history 属性对其进行访问。

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

<body>
		head>
		<h2>1号页面h2>
		<a href="04 history2.html">跳转到2号页面a>
		<button type="button" onclick="fun()">forward前进button>
		<script type="text/javascript">
			console.log(window.history.length);
			
			function fun(){
				window.history.forward();
			}
		script>
	body>

<body>
		<h2>2号页面h2>
		<a href="04 history3.html">跳转到3号页面a>
		
		<button type="button" onclick="fun1()">back后退button>
		<button type="button" onclick="fun2()">forward前进button>
		<script type="text/javascript">
			console.log(window.history.length);
			
			function fun1(){
				window.history.back();
			}
			function fun2(){
				window.history.forward();
			}
			script>
	body>

<body>
		<h2>3号页面h2>
		
		<button type="button" onclick="fun1()">go跳转button>
		<button type="button" onclick="fun2()">back后退button>
		<script type="text/javascript">
			console.log(window.history.length);
			
			function fun1(){
				window.history.go(-2);
			}
			
			function fun2(){
				window.history.back();
			}
		script>		
	body>

4.2.3 location对象

• location 对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些

导航功能。也可通过 window.location 属性来访问。

• location 对象的属性

  href：设置或返回完整的 URL

  window.location.href 获取当前页面地址

• location 对象的方法

  reload()：重新加载当前文档。

  replace()：用新的文档替换当前文档。

<body>
		<button type="button">按钮button>
		<button type="button" onclick="window.location.reload()">重新加载button>
		<button type="button" onclick="location.replace('http://www.baidu.com')">替换button>
		<script type="text/javascript">
			console.log(window.location.href);
			<!-- window.location.href="http://www.baidu.com"; -->
		script>
	body>

4.3 DOM对象

• DOM：Document Object Model 文档对象模型
• 要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就 是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化 的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。
• 每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中 对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

4.3.1 节点

• 加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型 结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：

节点类型	HTML内容	例如
文档节点	文档本身	整个文档 document
元素节点	所有的HTML元素	, ,
属性节点	HTML元素内的属性	id、href、name、class
文本节点	元素内的文本	hello
注释节点	HTML中的注释

4.3.2 操作元素的节点

• 当HTML文档在被解析为一颗DOM树以后，里面的每一个节点都可以看做是一个一个的对象，我 们称为DOM对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或者一类节点对象，可 以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使 我们的页面看起来有动态的效果，后期结合事件使用，就能让我们的页面在特定时机、特定的事件下执 行特定的变换。

4.3.2.1 获取节点

• 在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过 Document对象提供的方法，查找、定位某个对象（也就是我们说的节点）。

• 注意：a标签正常会执行跳转的操作，设置href=“javascript:void(0)” 表示伪协议 将不会跳转

  操作 dom 必须等节点初始化完毕后，才能执行。

​ 处理方式两种:

把 script 调用标签移到html末尾即可； 

使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。
window.onload = function () { //预加载 html 后执行}; 1

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

	<body>
		<p id="p1" class="para">这是一个段落<span>文本span>p>
		<p id="p1" class="para">这又是一个段落p>
		<input type="text" name="txt" />
		<input type="checkbox" name="hobby" value="游泳" />游泳
		<input type="checkbox" name="hobby" value="篮球" />篮球
		<input type="checkbox" name="hobby" value="足球" />足球
		<hr />
		
		<a href="javascript:testById()">按照id获取a>
		<a href="javascript:void(0)" onclick="testByName()">按照name获取a>
		<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取a>
		<a href="javascript:void(0);" onclick="testByClass();">按照class获取a>
		
		<script type="text/javascript">
			//加载事件
			/* window.onload = function(){
				var p = document.getElementById("p1");
				console.log(p);
			} */
			
			//按照id获取
			function testById(){
				var p1 = document.getElementById("p1");
				console.log(p1);
			}
			
			//按照name获取
			function testByName(){
				var hobby = document.getElementsByName("hobby");
				console.log(hobby);
				
				//确定一个,可以后面加一个[0]
				var txt = document.getElementsByName("txt")[0];
				console.log(txt);
			}
			
			//按照标签名获取
			function testByTagName(){
				var input = document.getElementsByTagName("input");
				console.log(input);
			}
			
			//按照class获取
			function testByClass(){
				var para = document.getElementsByClassName("para");
				console.log(para);
			}
		script>
	body>

4.3.2.2 创建节点和插入节点

很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过

以下几种方式创建新节点。

• 创建节点

  • createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
  • createTextNode() 创建一个文本节点，可以传入文本内容
  • innerHTML 也能达到创建节点的效果，直接添加到指定位置了，需要的是文本字符串

• 插入节点

  • write() 将任意的字符串插入到文档中

  • appendChild() 向元素中添加新的子节点，作为最后一个子节点 ，如果追加的元素不存在，则添加新的；如果追加的元素存在，则会将原有的元素添加到新的位置（剪切），需要的是节点

  • insertBefore() 向指定的已有的节点之前插入新的节点，前面写需要插入的节点,后面写被插入节点
    parent.insertBefore(zjl,select);

    ​ newItem：要插入的节点
    ​ exsitingItem：参考节点 需要参考父节点

<body>
		<button onclick="addPara();">添加段落button>
		<button onclick="addImg();">添加图片button>
		<button onclick="addTxt();">添加文本框button>
		<button onclick="addOptions()">添加选项button>
		<select name="music">
			<option value="-1">你心内的一首歌option>
			<option value="0">南山南option>
			<option value="1">喜欢你option>
		select>
		<hr />
		<div id="container">div>
		
		
		<span>周杰伦span>
		<script type="text/javascript">
			
			//获取需要添加节点的位置
			var div = document.getElementById("container");
			//添加段落,设置内容   
			function addPara(){
				//方式一
				//创建元素节点
				/* var p = document.createElement("p");
				//创建文本节点
				var text = document.createTextNode("段落标签");
				//将文本节点追加到元素节点的内部
				p.appendChild(text);
				console.log(p);
				//将元素追加到div的内部
				div.appendChild(p); */
				
				//方式二
				/* var p = document.createElement("p"); 
				p.innerHTML= "段落方式二";
				console.log(p);
				//将元素追加到div的内部
				div.appendChild(p); */
				
				//方式三
				var p = "
段落方式三
";
				//给div设置内容
				div.innerHTML += p;									
			}
			
			//添加图片,要设置属性
			function addImg(){
				//方式一
				//创建一个图片
				/* var img = document.createElement("img"); 
				//设置图片属性
				img.src = "img/11.png";
				img.width = "100";
				img.height = "100";
				//将图片追加到指定位置
				div.appendChild(img); */
				
				//方式二
				//创建一个图片
				/* var img = document.createElement("img"); 
				//设置图片属性
				img.setAttribute("src","img/11.png");
				img.setAttribute("width","100");
				img.setAttribute("height","100");
				//将图片追加到指定位置
				div.appendChild(img);
				 */
				//方式三
				var str = "";
				div.innerHTML += str;
			}
			
			//添加文本框,要设置属性
			function addTxt(){
				//方式一
				var input = document.createElement("input"); 
				input.type = 'text';
				input.name = 'uname';
				div.appendChild(input);
				
				
				//方式二
				// setAttribute设置属性
				/* input.setAttribute("type",'text');
				div.appendChild(input);
				 */
			}
			
			//添加选项
			function addOptions(){
				//用户输入歌曲名称
				var sname = prompt("请输入歌曲名称");
				
				//获取下拉框的节点
				var select = document.getElementsByName("music")[0];
				
				//方式一
				//创建下拉选项
				/* var option = document.createElement("option");
				//设置下拉选项的内容
				option.innerHTML = sname;
				//设置属性
				option.value = 2;
				//将下拉选项追加到下拉框中
				select.appendChild(option); */
				
				/* //方式二
				var options = select.options; //下拉框的所有下拉选项
				//创建下拉选项
				var newOption = document.createElement("option");
				newOption.innerHTML = sname;
				//将选项添加到下拉框数组中
				options.add(newOption); */
				
				//方式三
				/* var options = select.options; //下拉框的所有下拉选项
				//创建下拉选项
				var newOption = new Option();//生成了一个标签
				console.log(newOption);
				newOption.innerHTML = sname;
				//将选项添加到下拉框数组中
				options.add(newOption); */
			}
			
			//将任意的字符串插入到文档中
			// document.write("到爱打架欧艾斯");
			
			//insertBefore
			//获取目标位置
			var select = document.getElementsByName("music")[0];
			//获取需要移动的元素节点
			var zjl = document.getElementsByTagName("span")[0];
			//参考父节点   
			var parent = select.parentElement;
			//前面写需要插入的节点,后面写被插入节点
			parent.insertBefore(zjl,select);
			
		script>
	body>

4.3.2.3 间接查找节点

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

<body>
		<div id="div1">
			<span>span 1号span><span>span 2号span>
			<div>块级元素div>
		div><span>兄弟节点span>
		
		<script type="text/javascript">
			var div1 = document.getElementById("div1");
			//childNodes
			var childNodes = div1.childNodes;
			console.log(childNodes);//NodeList(6) [text, span, span, text, div, text]
			//firstChild
			console.log(div1.firstChild);//#text
			//lastChild
			console.log(div1.lastChild);//#text
			//nextSibling
			console.log(div1.nextSibling);//span,span下来就是#text
			//parentNode
			console.log(div1.parentNode);//body
			//previousSibling
			console.log(div1.previousSibling);//#text
		script>
	body>

4.3.2.4 删除节点

• removeChild() 从元素中移除子节点
• 目标节点.父节点.removeChild(目标节点);

<body>
		<div>div元素div>
		<button type="button" onclick="fun()">删除divbutton>
		<script type="text/javascript">
			function fun(){
				//获取目标节点
				var div = document.getElementsByTagName("div")[0];
				//删除
				div.parentElement.removeChild(div);
			}
		script>
	body>

4.4 表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我

们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验

度。

4.4.1 获取表单

会第一个就行

• document.表单名称
• document.getElementById(表单 id);
• document.forms[表单名称]
• 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.表单名称
			var myform = document.myform;
			console.log(myform);
			
			//document.getElementById(表单 id);
			var myform2 = document.getElementById("myform2");
			console.log(myform2);
			
			//document.forms[表单名称],不写[]是全部表单
			var myform3 = document.forms["myform"];
			console.log(myform3);
			
			//document.forms[索引]; //从 0 开始
			console.log(document.forms[1]);
		script>
	body>

4.4.2 元素分类

• 表单元素
  元素节点.value 取值
  元素节点.value = 值 设置值/内容
• 非表单元素
  元素节点.innerHTML = 值 设置值/内容
  元素节点.innerHTML 取值/内容

4.4.3 获取input元素

如 text password hidden textarea等，前两种常用。

• 通过 id 获取：document.getElementById(元素 id);
• 通过 form.名称形式获取: myform.元素名称; name属性值
• 通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
• 通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] // 从0开始

<body>
		<form id='myform' name="myform" action="" method="get">
			姓名:<input type="text" id="uname" name="uname" value="zs" /><br />
			密码:<input type="password" id="upwd" name="upwd" value="1234" /><br />
			<input type="hidden" id="uno" name="uno" value="隐藏域" />
			个人说明:<textarea name="intro">textarea>
			<button type="button" onclick="getTxt();">获取元素内容button>
		form>
		
		<script type="text/javascript">
			//获取元素内容
			function getTxt(){
				//通过 id 获取：document.getElementById(元素 id);
				var name = document.getElementById("uname");
				console.log(name);
				
				//通过 form.名称形式获取: myform.元素名称;    name属性值
				var form = document.myform;
				console.log(form.upwd);
				console.log(form.upwd.value);//1234
				
				//通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
				var uno = document.getElementsByName("uno")[0];
				console.log(uno.value);//隐藏域
				
				//通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
				var inputs = document.getElementsByTagName("input");
				console.log(inputs[1].value);//1234
			}
		script>

4.4.4 获取单选按钮

• 前提：将一组单选按钮设置相同的name属性值
• 属性值为true表示被选中，否则未被选中
  选中状态设定： checked=‘checked’ 或 checked=‘true’ 或 checked
  未选中状态设定： 没有checked属性 或 checked=‘false’

<body>
		<form action="" name="myform">
			<input type="text" name="inputName" value="aaa" />
			<input type="radio" name="rad" value="1" />	1
			<input type="radio" name="rad" value="2"  /> 2
			<button type="button" onclick="getRadio();">获取元素内容button>
		form>
		
		<script type="text/javascript">
			//获取单选按钮选中项
			function getRadio(){
				var radios = document.getElementsByName("rad");
				//必选第一个
				//radios[0].checked = 'checked'
				for(var i = 0; i < radios.length; i++){
					if(radios[i].checked){
						console.log(radios[i].value);
					}
				}
			}
		script>
	body>

4.4.5 获取多选按钮

操作方式与单选同理，不同之处在于可以多选

<body>
		
		<form action="" name="myform">
			<input type="text" name="inputName" value="aaa" />
			<input type="checkbox" name="hobby" value="1" />	1
			<input type="checkbox" name="hobby" value="2"  /> 2
			<input type="checkbox" name="hobby" value="3"  /> 2
			<button type="button" onclick="getCheckbox();">获取多选选中项button>
		form>
		
		
		<script type="text/javascript">
			
			//获取多选按钮选中项
			function getCheckbox(){
				var hobbys = document.getElementsByName("hobby");
				var str = '';
				for(var i = 0; i < hobbys.length; i++){
					if(hobbys[i].checked){
						str += hobbys[i].value + ',';
					}
				}
				console.log(str.substring(0,str.length-1));
			}
			
		script>
	body>

4.4.6 获取下拉选项

• 获取 select 对象

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

• 获取选中项的索引：

  var idx = ufrom.selectedIndex;
  

• 获取选中项的索引

  var val = ufrom.options[idx].value;
  

  注意：当通过options获取选中项的value属性值时，

  若没有value属性，则取option标签的内容

  若存在value属性，则取value属性的值

• 获取选中项

  var txt = ufrom.options[idx].text;
  

• 选中状态设定：selected=‘selected’、selected=true、selected

  未选中状态设定：不设selected属性

<body>	
		<form id='myform' name="myform" action="" method="">		
			来自:
			<select id="ufrom" name="ufrom">
				<option value="-1" >请选择option>
				<option value="0" selected="selected">北京option>
				<option value="1">上海option>
			select><br />
			<button type="button" id="sub" name="sub">提交button>
		form>
		
		<script type="text/javascript">
			
			//获取下拉选项
			document.getElementById("sub").onclick = function(){
				//获取下拉框
				var select = document.getElementById("ufrom");
				//获取下拉框的选项数组
				var options = select.options;
				//获取选中项的索引
				var index = select.selectedIndex;
				//获取选中项
				var selectedOp1 = options[index].text;//获取值
				var selectedOp2 = select.value;  //通过下拉框对象获取选中项的value
				console.log(selectedOp1);//北京
				console.log(selectedOp2);//0
			}
		script>
	body>

4.4.7 提交表单

• 使用普通button按钮+onclick事件+事件中编写代码:
  获取表单.submit();
• 使用submit按钮 + οnclick=“return 函数()” +函数编写代码:
  最后必须返回：return true|false;
• 使用submit按钮/图片提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:
  最后必须返回：return true|false;

<body>
		
		<form id='myform1' name="myform2" action="http://baidu.com" method="get">	
			<input  name="test"  id="uname"/>  <span id="msg">span><br />
			
			<input type="button" onclick="sub();" value="提交表单1" />
		form>
		
		<form id='myform1' name="myform3" action="http://baidu.com" method="get">
			<input  name="test"  id="uname2"/>  <span id="msg2">span><br />
			
			<input type="submit" onclick="return sub2()" value="提交表单2" />
		form>
		
		<form id='myform1' name="myform4" action="http://baidu.com" onsubmit="return sub4()" method="get">
			<input  name="test"  id="uname4"/>  <span id="msg4">span><br />
			
			<input type="submit" value="提交表单3" />
		form>
		
		<script type="text/javascript">
			//使用普通button按钮+onclick事件+事件中编写代码:
			function sub(){
				//获取表单对象
				var myform2 = document.myform2;
				//获取用户输入的数据
				var uname = document.getElementById("uname").value;
				if(uname == undefined || uname.trim() == ""){
					//提醒用户理由
					document.getElementById("msg").innerHTML = "用户名不能为空";
					document.getElementById("msg").style.color = "red";
					//不能提交，阻止代码运行
					return;
				}
				
				//手动提交表单
				myform2.submit();
			}
		
			//使用submit按钮 + οnclick="return 函数()" +函数编写代码: 
			function sub2(){
				//获取表单对象
				var myform3 = document.myform3;
				//获取用户输入的数据
				var uname = document.getElementById("uname2").value;
				if(uname == undefined || uname.trim() == ""){
					//提醒用户理由
					document.getElementById("msg2").innerHTML = "用户名不能为空";
					document.getElementById("msg2").style.color = "red";
					//不能提交，阻止代码运行
					return false;
				}
				return true;
			}
		
			//使用submit按钮 + οnclick="return 函数()" +函数编写代码:
			function sub4(){
				//获取表单对象
				var myform4 = document.myform4;
				//获取用户输入的数据
				var uname = document.getElementById("uname4").value;
				if(uname == undefined || uname.trim() == ""){
					//提醒用户理由
					document.getElementById("msg4").innerHTML = "用户名不能为空";
					document.getElementById("msg4").style.color = "red";
					//不能提交，阻止代码运行
					return false;
				}
				return true;
			}
		script>
	body>