JS事件、BOM对象和DOM对象

1、主要内容

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" id="tex1" />
			<input type="button" name="提交" value="提交" onclick="btn()"/>
		</p>
		请选择编程语言：
		<select id="sel">
			<option selected>请选择程序</option>
			<option>javascript</option>
			<option>java</option>
			<option>Python</option>
		</select>
		<div id="div1">
			我是一个粉刷匠！
		</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 id="myDiv">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级事件流规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会，然后是实际的目标接收到事件。最后一个是冒泡阶段，可以在这个阶段对事件作出响应。

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 属性对其进行访问。

4.1 节点

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

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

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 id="red">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 id="pro">程序猿</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 id="form1" name="form1" method="get" action=""></form>
		<form id="form2" name="form2" method="get" action=""></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" id="uname" name="uname" value="zs" /><br />
			 password：<input type="password" id="upwd" name="upwd" value="1234"/><br />
			 <input type="hidden" id="uno" name="uno" value="隐藏域" />
			 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 id="ufrom" name="uform">
			<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 id="myform" name="myform" method="get" action="http://www.baidu.com">
			姓名：<input name="test" id="uname" />
			<input type="button" value="提交表单" onclick="submitForm()"/>
		</form>
		<!--  -->
		<form id="myform2" name="myform2" method="get" action="http://www.baidu.com">
			姓名：<input name="test" id="uname2" />
			<input type="submit" value="提交表单" onclick="return submitForm2()"/>
		</form>
		<!--  -->
		<form id="myform3" name="myform3" method="get" action="http://www.baidu.com" onsubmit="return submitForm3()">
			姓名：<input name="test" id="uname3" />
			<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>

验证表单

相关阅读:
一万字详解 Redis Cluster Gossip 协议
 Java使用多线程异步执行批量更新操作
 闲鱼是如何实践一套完整的埋点自动化验证方案的？
OSS 阿里云存储操作实例以及错误案例
 OSS 阿里云存储操作实例以及错误案例
 Java知识体系总结（2021版）
倪文迪陪你学蓝桥杯2021寒假每日一题：1.11日（2017省赛A第9题）
七分之一在线评论都有假，人工智能救一把？
太委屈！曾一举击败英伟达，却因坚持研发背负骂名的国际 IT 大佬
 SpringBoot四大核心之自动装配——源码解析
原文地址：https://www.cnblogs.com/aspiration/p/15391454.html