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>
验证表单