1、主要内容

JS事件、BOM对象和DOM对象
JS事件、BOM对象和DOM对象
1、主要内容
2、事件
3、BOM对象
4、DOM对象
5.表单

2、事件

事件可以让用户和浏览器交互，使网页动起来。当我们与浏览器中web页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是web浏览器中发生的事情，比如说某个web页面加载完成，或者是用户滚动窗口或改变。

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

2.1 事件作用

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

2.2 事件中的几个名词

事件源：谁触发的事件

事件名：触发了什么事件

事件监听：谁管这个事情，谁监听

事件处理：发生了怎么办

例如：

闯红灯

事件源:车; 事件名:闯红灯; 监听:摄像头、交警﹔处理:扣分罚款
单击按钮

事件源:按钮; 事件名:单击; 监听:窗口; 处理:执行函数

当我们用户在页面中进行的点击动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即:cick、mousemove、load等都是事件名称，具体的执行代码处理，响应某个事件的函数。

<head>
    <meta charset="utf-8">
    <title>事件</title>
    <!-- load加载事件:当页面加载完毕后执行的事件-->
	</head>
	<body onload="loadWindows()">
	</body>
	<script type="text/javascript">
		function loadWindows(){
			console.log("加载完毕！")
		}
	</script>

2.3.事件类型

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

Window事件属性: 针对window对象触发的事件(应用到<body>标签)
Form事件: 由HTML表单内的动作触发的事件(应用到几乎所有HTML元素，但最常用在form元素中)
Keyboard事件: 键盘事件
Mouse事件: 由鼠标或类似用户动作触发的事件
Media事件任由媒介(比如视频、图像和音频)触发的事件(适用于所有HTML元素,但常见于媒介元素
中，比如<audio>、<embed>、 <img>、 <object> 以及<video>

几个常用的事件:

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 
	 onload  当页面或图像加载完后立即触发
	 -->
	<body>
		<p>
			<label for="tex1">姓名：</label>
			<input type="text"  />
			<input type="button" name="提交" value="提交" onclick="btn()"/>
		</p>
		请选择编程语言：
		<select >
			<option selected>请选择程序</option>
			<option>javascript</option>
			<option>java</option>
			<option>Python</option>
		</select>
		<div >
			我是一个粉刷匠！
		</div>
	</body>
	<script type="text/javascript">
		// onload  当页面或图像加载完后立即触发；window对象或者body标签
		window.onload = function(){
			console.log("页面加载完毕")
		}
		var uname = document.getElementById('tex1');
		//绑定失去焦点事件
		uname.onblur = function(){
			// alert("请重新检查错误");
			console.log("文本框失去焦点了！");
		}
		//绑定获取焦点事件
		uname.onfocus = function(){
			console.log("文本框获得焦点");
		}
		// onclick:鼠标点击某个对象
		function btn(){
			alert("hhhhhh")
		}
		// onchange：用户改变域的内容
		document.getElementById('sel').addEventListener('change',function(){
			console.log("变心了变心了！");
		});
		// document.getElementById('sel').onchange = function(){
		// 	console.log("没变心没变心");
		// }
		// onmouseover:鼠标移动到某个元素上
		document.getElementById('div1').onmouseover = function(){
			document.getElementById('div1').textContent = "粉刷本领强"
		}
		// onmouseout:鼠标从某个元素上离开
		document.getElementById('div1').onmouseout = function(){
			document.getElementById("div1").textContent = "我要把那新房子，刷得更漂亮"
		}
		// onkeyup:某个键盘的键被松开
		uname.onkeyup = function(){
			console.log("雄起");
		}
		// onkeydown: 某个键盘的键被按下
		uname.onkeydown = function(){
			console.log("加油");
		}	
	</script>
</html>

2.4.事件流和事件模型

我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个HTML元素产生
一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件,这个传播
过程称为DOM事件流。

事件顺序有两种类型:事件捕获和事件冒泡。
冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为IE和Netscape两个大公司完全不同的事件流概
念产生的。(事件流: 是指页面接受事件的顺序) IE的事件流是事件冒泡，Netscape的事件流是事件捕获流。

2.4.1事件冒泡：从小到大

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点(文
档)。例如下面的

<!D0CTYPE htm1>
<htm1>
	<head>
		<meta charset="UTr8">
		<title>Javascript</tit1e>
	</head>
	<body>
		<div >Click me</div>
    </body>
</htm1>

<!-- 如果点击了页面中的<div>元素，那么这个click事件会按照如下顺序传播:
1、<div>
2、<body>
3、<htm1>
4、document
也就是说，click事件首先在div元素上发生.而这个元素就是我们单击的元素。然后, click事件沿DOM树向上-->

2.4.2 事件捕获：从大到小

Netscape提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，而最
具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。还以前面的例子为例。那
么单击<div>元素就会按下列顺序触发click事件:

1、document
2、<htm1>
3、<body>
4、<div>

在事件捕获过程中，document对象首先接收到click事件,然后沿DOM树依次向下，直传播到事件的实际目标，即<div>元素。
虽然事件捕获是Netscape唯一支持的事件流模式，但很多主流浏览器目前也都支持这种事件流模型。尽管"DOM2级事件'规范要求事件应该从document对象开始时传播，但这些浏览器都是从window对象开始捕获的。

2.4.3 DOM 事件流

DOM2级事件流规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会，然后是实际的目标接收到事件。最后一个是冒泡阶段，可以在这个阶段对事件作出响应。

JS事件、BOM对象和DOM对象
JS事件、BOM对象和DOM对象
1、主要内容
2、事件
3、BOM对象
4、DOM对象
5.表单

2.5.事件处理程序

事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字，而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以“on"开头,因此click事件的事件处理程序就是onclick,为事件指定处理程序的方式有好几种。

2.5.1. HTML事件处理程序

某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码:
<input type="button" value="Press me" onclick="alert(' thanks');"/>
这样做有一-些缺点，例如耦合度过高，还可能存在时差问题(当用户点击按钮时，处理函数还未加载到，此时处理函数是单独写的一段js代码)，而且在不同的浏览器上可能会有不同的效果。

2.5.2. DOM0级事件处理程序

通过JavaSript指定事件处理程序的传统方式，就是将一-个函数赋值给一个事件处理程序属性。这种方式被所
有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己的事件处理程序属性,
这些属性通常全都小写，例如onclick, 然后将这种属性的值设为一个函数,就可以指定事件处理程序了。例如:

<script type="text/javascript">
	function test(){
		console.log("富强")
	}
 
	var btn = document.getElementById('btn');
	console.log(btn)
	// 给按钮绑定事件
	btn.onclick = function(){
		console.log(" ")
	}
</script>

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序(覆盖) ,也可以通过删除DOM0级方法指定的事件处理程序，只要将属性值设为null即可。

注意：文档代码读取顺序

<script>
//加载事件，当页面上的标签和资源引入后才会执行的操作
window.onload = function(){
	var btn = document.getElementById('btn');
	console.log(btn)
	// 给按钮绑定事件
	btn.onclick = function(){
		console.log(" ");}
}
</script>

2.5.3. DOM2级事件处理程序

“DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作: addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且他们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,则表示在捕获阶段调用事件处理程序;如果是false则表示在冒泡阶段调用事件处理程序。

<script>
// DOM 2级事件
var btn2 = document.getElementById('btn2');
// 按钮绑定监听事件
btn2.addEventListener('click',function(){
	console.log("Dom 2级事件");
})
var fn = function(){
	console.log("HELLO WORLD")
}
		
btn2.addEventListener('click',fn);
// DOM 2 移除事件
btn2.removeEventListener('click',fn);//只能移除有名字的事件处理函数
</script>

3、BOM对象

BOM的核心对象是window，它表示浏览器的一个实例。window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象,因此有权访问parseInt()等方法。如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中, 可以通过数值索引(从0开始，从左至右,从上到下)或者框架的名称来访问相应的window对象。

3.1. Window对象方法

3.1.1 系统对话框

浏览器通过(实际是window对象的方法) alert()、 confirm()、 prompt()方法可以调用系统对话框向用户显示消息。

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

<body>
		<button type="button" onclick="testAlert()">消息框</button>
		<button type="button" onclick="testPrompt()">输入框</button>
		<button type="button" onclick="testConfirm()">确认框</button>
</body>
<script type="text/javascript">
    // 提示框
    function testAlert(){
        window.alert("警告：你将进入js高级");//alert会阻止后面代码的执行
        console.log("alert会阻止后面代码的执行");
    }
    // 输入框
    function testPrompt(){
        var food = window.prompt('今天晚上去哪里吃饭？','丁香吧！');
        console.log(food);
    }
    // 确认框
    function testConfirm(){
        window.confirm("5点去吃饭?");
    }
</script>

3.1.2.打开窗口

window.open()方法既可以导航到一个特定的URL也可以用来打开一个新的窗口

<script type="text/javascript">
function openSxt(){
    window.open('http://www.baidu.com','_self'); // _self, _blank等
	//window.open();//打开空白窗口
</script>
<input type = 'button' name ='open' value='百度' onclick='openSxt();'/>

3.1.3.关闭窗口

window.close():关闭窗口。

3.1.4 事件函数

3.1.4.1 setTimeout()

setTimeout()：在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识；也可以通过返回的标识

clearTimeout(id)：来清除指定函数的执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时间函数</title>
	</head>
	<body>
		<button type="button" onclick="dispatch()">3秒跳转</button>
		<button type="button" onclick="init()">开始</button>
		<button type="button" onclick="stop()">暂停</button><br/>
		<h2 id='time'></h2>
	</body>
	<script type="text/javascript">
		setTimeout(function(){
			console.log("3秒后打印！");
		},3000)
		
		var id;
		function init(){
			var time = new Date().toLocaleTimeString();
			//将时间赋值给h2标签
			document.getElementById('time').textContent = time;
			//每秒钟调用一次
			id = setTimeout(init,1000);
		}
		function stop(){
			clearTimeout(id);//清除指定函数的执行
		}
	</script>
</html>

3.1.4.2 setInteval()

setinterval();可按照指定的周期（以毫秒计）来调用或计算表达式，也可根据返回的标识用来结束。
该方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时间函数</title>
	</head>
	<body>
		<button type="button" onclick="learn()">开始学习</button>
		<button type="button" onclick="relax()">开始放松</button>	
	</body>
	<script type="text/javascript">
		var flag;
		function learn(){
			flag = setInterval(function(){
				console.log("学习ing...");
			},1000);
		}
		function relax(){
			clearInterval(flag);
		}
	</script>
</html>

3.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)到上一个页面

3.3.location对象

location对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过window.location属性来访问。

location对象的属性href:设置或返回完整的URLlocation对象的方法（可以后退）
reload():重新加载当前文档
replace():用新的文档替换当前文档。(不可后退)

4、DOM对象

DOM可以操作HTML，dom提供了应用程序动态控制HTML接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员的添加，删除和修改页面的某一部分。Dom处于JavaScript的核心地位上。

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

JS事件、BOM对象和DOM对象
JS事件、BOM对象和DOM对象
1、主要内容
2、事件
3、BOM对象
4、DOM对象
5.表单

4.1 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。
注释是注释节点。

JS事件、BOM对象和DOM对象
JS事件、BOM对象和DOM对象
1、主要内容
2、事件
3、BOM对象
4、DOM对象
5.表单

4.2 操作元素的节点

2.1.获取节点

在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找、定位某个对象（也就是我们说的节点)。
注意：操作dom必须等节点初始化完毕后，才能执行。处理方式两种：

把script调用标签移到html末尾即可;
使用onload事件来处理JS，等待html 加载完毕再加载 onload事件里的JS。

window.onload = function() { //预加载 htm1后执行};

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

<a href="javascript:void(0)" onclick="testByName()"></a>

表示不执行A标签的跳转功能，而是执行onclick点击事件

4.2.2 创建节点和插入节点

很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。

4.2.2.1 创建节点

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

添加段落：

方式一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="addPara();">添加段落</button>
		<div id = "container">		
		</div>
	</body>
	<script type="text/javascript">
		/* 添加段落 */
		function addPara(){
			// 创建标签
			var p = document.createElement('p');
			console.log(p);//<p></p>
			// 创建文本
			var q = document.createTextNode('我是一个粉刷匠');
			console.log(q);
			// p标签中追加文本
			p.appendChild(q);
			console.log(p);
			// 得到容器div
			var div = document.getElementById('container');
			div.appendChild(p);
		}
	</script>
</html>

方式二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="addPara();">添加段落</button>
		<div id = "container">		
		</div>
	</body>
	<script type="text/javascript">
		/* 添加段落 */
		function addPara(){
			var div = document.getElementById('container');
			var p = document.createElement('p');
            p.innerHTML = "粉刷本领强";
			div.appendChild(p);
		}
	</script>
</html>

方式三：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="addPara();">添加段落</button>
		<div id = "container">		
		</div>
	</body>
	<script type="text/javascript">
		/* 添加段落 */
		function addPara(){
			var p = '<p>今天是个好日子</p>';
			var div = document.getElementById('container');
			// div.innerHTML = p;//这样只会添加一个，本质上是替换div标签中的内容
			div.innerHTML += p;
		}
	</script>
</html>

插入图片

<script>
function addImg(){
	var div = document.getElementById('container');
	// 创建图片元素
	var img = document.createElement('img');
	console.log(typeof img);
	// 设置属性
	img.src = 'img1.png';
	img.width = 100;
	img.height = 100;
	console.log(img);
	//添加元素
	div.appendChild(img);
}
//方式二
    function addImg(){
		var div = document.getElementById('container');
		var img = document.createElement('img');
		img.setAttribute('src','img1.png');
		div.appendChild(img);
    }
    
//方式三
    function addImg(){
        var div = document.getElementById('container');
        var img = '<img src="img1.png" width="100" height="100">';
        div.innerHTML += img;
    	}
</script>

添加下拉框

<script>
function addoptions(){
	var music = document.getElementsByName('music')[0];
//方式一：	
	var opt = document.createElement('option');
	opt.value = 2;
	opt.text = "龙卷风";
	//添加
	music.appendChild(opt);
    
//方式二：
    console.log(music.options);
	var opt = document.createElement('option');
	opt.value = 3;
	opt.text = '逆战';
	music.options.add(opt);
}
</script>

4.4.2.2 插入节点

方法	描述
write()	将任意字符串插入到文档中
appendChild()	向元素中添加新的子节点，作为最后一个子节点
insertBefore()	向指定的已有的节点之前插入新的节点newItem，要插入新的节点exsitingItem；参考节点需要参考父节点（同级追加）

<script type="text/javascript">
    // document.write()将任意字符串，写入文档
    document.write('<h3>learning...</h3>')
    //insertBefore	向指定的已有的节点之前插入新的节点
    var li = document.createElement('li');
    var text = document.createTextNode('粉色');
    li.appendChild(text);
    // li.innerText = 'pink';
	//[父节点].insertBefore([新节点]，[同级节点])
    document.getElementById('red').parentElement.insertBefore(li,document.getElementById('red'));
		
	</script>

4.2.3.间接查找节点

方法/属性	描述
childNodes	返回元素的一个子节点的数组
firstChild	返回元素的第一个子节点
lastChild	返回元素的最后一个子节点
nextSibling	返回元素的下一个兄弟节点
parentNode	返回元素的父节点
previousSibling	返回元素的上一个兄弟节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li >red</li>
			<li>green</li>
		</ul>
	</body>
	<script type="text/javascript">
		var x = document.getElementsByTagName('ul')[0];
		console.log(x.childNodes);//返回元素，子节点	数组
		console.log(x.children);//返回元素，子元素	数组
		
		console.log(x.firstChild);//返回元素的第一个子节点:和html代码中的换行有关
		console.log(x.firstElementChild);//返回元素的第一个字元素
		console.log(x.lastChild);//
		console.log(x.lastElementChild);//
			console.log('=================');
		console.log(document.getElementById('red').nextSibling);
		console.log(document.getElementById('red').nextElementSibling);
		console.log(document.getElementById('red').previousSibling);
		console.log(document.getElementById('red').previousElementSibling);//nul
		
	</script>
</html>

4.2.4.删除节点

removeChild() 从元素中移除子节点，需要从父元素中删除对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span >程序猿</span>
		<a href="javascript:void(0)" onclick="deletNode()">删除</a>
	</body>
	<script type="text/javascript">
		function deletNode(){
			old = document.getElementById('pro');
			parent = old.parentElement;
			parent.removeChild(old);
		}
	</script>
</html>

5.表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

5.1.获取表单

前两种常用：

1、document .表单名称

2、document.getElementById(表单id)

3、document .forms [表单名称]

4、document.forms[索引;//从О开始

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取表单</title>
	</head>
	<body>
		<form ></form>
		<form ></form>
	</body>
	<script type="text/javascript">
		//document.表单名称
		var v1 = document.form1;
		console.log(v1);
		// 2. document.getElementById()
		var v2 = document.getElementById('form2');
		console.log(v2);
        //form是文档中所有表单的一个数组
		var forms = document.forms;
		console.log(forms);
		// 3、document .forms [表单名称]
		console.log(forms['form1']);
		// 4、document.forms[索引;//从О开始
		console.log(forms[1]);
		
	</script>
</html>

5.2.获取表单元素

5.2.1.获取input元素

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

1、通过id 获取:document.getElementById(元素id)

2、通过form.名称形式获取: myform.元素名称;name属性值

3、通过name 获取:document.getElementsByName(name属性值)[索引]//从0开始

4、通过tagName 数组:document.getElementsByTagName(' input ')[索引]//从0开始

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取</title>
	</head>
	<body>

		 <form id='myform' name="myform" action="" method="get">
			 name：<input type="text"  /><br />
			 password：<input type="password" /><br />
			 <input type="hidden"  />
			 person_about:<textarea name="intro"></textarea>
			 <button type="button" onclick="getTxt()">获取元素内容</button>
			 
		 </form>
	</body>
	<script type="text/javascript">
		function getTxt(){
			// 1、通过id 获取:document.getElementById(元素id)
			var uname = document.getElementById('uname').value;
			console.log(uname);
			// 2、通过form.名称形式获取: myform.元素名称;name属性值
			var form = document.getElementById('myform');
			var v1 = form.upwd.value;
			console.log(v1);
			// 3、通过name 获取:document.getE1ementsByName(name属性值)[索引]//从0开始
			var v2 = document.getElementsByName('intro');
			console.log(v2[0].value);
			// 4、通过tagName 数组:document.getElementsByTagName(' input ')[索引]//从0开始
			var v3 = document.getElementsByTagName('input')[2].value;
			console.log(v3);
		}
		
	</script>
</html>

5.2.2 获取单选按钮

前提：将一组单选按钮设置相同的name属性值

取单选按钮组:document.getElementsByName("name属性值");
遍历每个单选按钮，并查看单选按钮元素的checked属性

若属性值为true表示被选中，否则未被选中
- 选中状态设定:
  
  checked='checked'或checked='true'或checked
- 未选中状态设定:
  
  有checked属性或checked='false'

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取单选按钮</title>
	</head>
	<body>
		<input type="radio" name="gender" value="0" />0
		<input type="radio" name="gender" value="1" />1
		<button type="button" onclick="a()">获取</button>
	</body>
	<script type="text/javascript">
		function a(){
			//根据名称获取单选框组
			var v1 = document.getElementsByName('gender');
			//遍历
			for (var i = 0; i < v1.length; i++) {
				if(v1[i].checked){
					if(v1[i].value==1){
						console.log('您的选择是：男');
					} else{
						console.log('您的选择是：女')
					}
				} 
				
			}
		}
	</script>
</html>

5.2.3 获取多选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取多选按钮</title>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="唱" />唱
		<input type="checkbox" name="hobby" value="跳" />跳
		<input type="checkbox" name="hobby" value="rap" />rap
		<input type="checkbox" name="hobby" value="篮球" />篮球
		<button type="button" onclick="getCheck()">来！骗！</button>
		
	</body>
	<script type="text/javascript">
		var getCheck = function(){
			//获取元素列表
			var boxes = document.getElementsByName('hobby');
			var str = '';//需要赋值，如果没有会变成undefined和之后的字符串相加
			for (var i = 0; i < boxes.length; i++) {
				if(boxes[i].checked){
					str += boxes[i].value+';';
				}
			}
			str = str.substr(0,str.length-1);//sub到指定长度的子字
			console.log(str);
		}
	</script>
</html>

5.2.4 获取下拉选项

获取下拉选项：

获取下拉框（id属性，name属性值，class属性值，元素）
获取下拉框的所有下拉选项（下拉框对象.options)
获取下拉框被选中项的索引（下拉框对象.selectedindex)
获取被选中项的值
在获取被选中项的文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select >
			<option value="-1">请选择</option>
			<option value="西安" selected="selected">西安</option>
			<option value="上海">上海</option>
			<option value="2">芜湖</option>
			<option>起飞</option>
			
		</select><br />
		<button type="button" id='sub' onclick="a()">获取</button>
	</body>
	<script type="text/javascript">
		function a(){
			//1.获取下拉框（id属性，name属性值，class属性值，元素）
			var uform = document.getElementById('ufrom');
			//2.获取下拉框的所有下拉选项（下拉框对象.options)
			var selects = uform.options;
			console.log(selects);
			//3.获取下拉框被选中项的索引 （下拉框对象.selectedindex)
			var index = uform.selectedIndex;
			console.log(typeof index);
			console.log(index);
			//4.获取选中项的value值或者选中项的text
			// document.write(selects[index].value);//如果下拉项中并没有设置value属性，会转而获取其文本值
			
			//!获取下拉框中被选中的值
			var select = uform.value;
			console.log(select);
			//修改默认被选中的选项
			selects[3].selected = true;
		}
	</script>
</html>

5.3 提交表单

使用普通button按钮+onclick事件+事件中编写代码:获取表单.submit();【建议】
使用submit按钮+onclick="return函数()” +函数编写代码:最后必须返回: return true | false;
使用submit按钮/图片提交按钮＋表单onsubmit=""return 函数();"+函数编写代码:
最后必须返回: return true | false;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>提交表单</title>
	</head>
	<body>
		<!--  -->
		<form >
			姓名：<input name="test"  />
			<input type="button" value="提交表单" onclick="submitForm()"/>
		</form>
		<!--  -->
		<form >
			姓名：<input name="test"  />
			<input type="submit" value="提交表单" onclick="return submitForm2()"/>
		</form>
		<!--  -->
		<form >
			姓名：<input name="test"  />
			<input type="submit" value="提交表单" />
		</form>
	</body>
	<script type="text/javascript">
		/* 1. 使用普通button按钮+onclick事件+事件汇总编写代码：
				获取表单.submit()		 */
				function submitForm(){
					//获取姓名文本框
					var uname = document.getElementById('uname').value;
					if(uname == null || uname.trim() == ""){
						return;
					}
					document.getElementById('myform').submit();
				}
		/* 2.使用submit按钮 + onclick="return 函数()" + 函数编写代码
				最后必须返回： return true|false */
				function submitForm2(){
					var uname = document.getElementById('uname2').value;
					if(uname == null || uname.trim() == ""){
						return false;
					}
					return true;
					
				}
				
		/* 3.使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数(); + 函数编写代码" */
				function submitForm3(){
					var uname = document.getElementById('uname3').value;
					if(uname == null || uname.trim() == ""){
						return false;
					}
					return true;
				}
			
	</script>
</html>

验证表单

JS事件、BOM对象和DOM对象
JS事件、BOM对象和DOM对象
1、主要内容
2、事件
3、BOM对象
4、DOM对象
5.表单

JS事件、BOM对象和DOM对象 JS事件、BOM对象和DOM对象 1、主要内容 2、事件 3、BOM对象 4、DOM对象 5.表单

1、主要内容

2、事件

2.1 事件作用

2.2 事件中的几个名词

2.3.事件类型

2.4.事件流和事件模型

2.4.1事件冒泡：从小到大

2.4.2 事件捕获：从大到小

2.4.3 DOM 事件流

2.5.事件处理程序

2.5.1. HTML事件处理程序

2.5.2. DOM0级事件处理程序

2.5.3. DOM2级事件处理程序

3、BOM对象

3.1. Window对象方法

3.1.1 系统对话框

3.1.2.打开窗口

3.1.3.关闭窗口

3.1.4 事件函数

3.1.4.1 setTimeout()

3.1.4.2 setInteval()

3.2 history对象

3.3.location对象

4、DOM对象

4.1 节点

4.2 操作元素的节点

2.1.获取节点

4.2.2 创建节点和插入节点

4.2.2.1 创建节点

4.4.2.2 插入节点

4.2.3.间接查找节点

4.2.4.删除节点

5.表单

5.1.获取表单

5.2.获取表单元素

5.2.1.获取input元素

5.2.2 获取单选按钮

5.2.3 获取多选按钮

5.2.4 获取下拉选项

5.3 提交表单

相关推荐