本文详细介绍了JavaScript中的事件处理，包括事件类型、事件处理程序、DOM事件流和事件捕获与冒泡。此外，还讲解了BOM对象如window、history和location的使用，以及DOM对象模型，如何创建、插入、删除和获取节点，以及表单元素的交互。文章还涵盖了表单数据的获取、验证和提交方法。
JS事件和DOM对象和BOM对象以及表单
事件
事件(Event)是JavaScript应用跳动的心脏, 进行交互，使网页动起来。当我们与浏览器中Web页面
进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用JavaScript，你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。
作用
(1)验证用户输入的数据。
(2)增加页面的动感效果。
(3)增强用户的体验度
事件类型
JavaScript可以处理的事件类型为:鼠标事件、键盘事件、HTML事件。
Mouse事件:由鼠标或类似用户动作触发的事件
onload:当页面或图像加载完后立即触发
<body onload="loadWindow();">
</body>
<script>
function loadWindow(){
alert("加载窗体");
}
</script>
onfocus:元素获得焦点
onmouseover:鼠标移动到某个元素上
onclick:鼠标点击某个对象
onchange:用户改变域的内容
onblur:元素失去焦点
onmouseout:鼠标从某个元素上离开
Keyboard事件:键盘事件
onkeydown:某个键盘的键被按下
onkeyup:某个键盘的键被松开
Window事件属性:针对window对象触发的事件(应用到标签)
Form事件:由HTML表单内的动作触发的事件(应用到几乎所有HTML元素，但最常用在form元素中)
Media事件:由媒介(比如视频、图像和音频)触发的事件(适用于所有HTML元素，但常见于媒介元素中
BOM对象
BOM的核心对象是window,它表示浏览器的一个实例。
window对 象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parselnt()等方法。
如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中， 可以通过数值索引 (从0开始，从左至右，从上到下) 或者框架的名称来访问相应的window对象。
window对象
系统对话框
浏览器通过 (实际是window对 象的方法) alert()、 confirm()、 prompt() 方法可以调用系统对话框向用户显示消息。
(1) 消息框:alert， 常用。
alert()方法用于显示带有一条指定消息和一个OK按钮的警告框。
<button id="but1" onclick="alert('弹出消息框')">but1</button>
(2)输入框:prompt,返回提示框中的值。
prompt()方法用于显示可提示用户进行输入的对话框。
参数(可选) :
第一个参数:要在对话框中显示的纯文本。
第二个参数:默认的输入文本。
<script type="text/javascript">
function pro(){
var p = window.prompt("请输入","默认值");
if(p == 'admin'){
console.log("管理员");
}else{
console.log("普通用户");
}
}
</script>
<button id="but2" onclick="pro()">but2</button>
(3)确认框:confirm,返回true/false.
confirm()方法用于显示一个带有指定消息和OK及取消按钮的对话框。
<script type="text/javascript">
function com(){
a = confirm('是否确认');
if(a==true){
console.log("确认");
}else{
console.log("否")
}
}
</script>
<button id="but3" onclick="com()">but3</button>
打开窗口
window.open()方法既可以导航到一个特定的URL也可以用来打开-个新的窗口
<script type= "text/javascript">
function openBaidu() {
window. open( ' http:/ /www. baidu. com','- self'); //- self、 - blank等
}
// window . open(); //空白窗口
</script>
<input type=" button" name= ”open" value=" 百度”οnclick= ' openBaidu();' />
关闭窗口
window.close():关闭窗口。
例:点击按钮关闭当前窗口。
<button type="button" onclick="window.close()">close按钮</button>
时间函数
setTimeout()
setTimeout() :在指定的毫秒数后调用函数或计算表达式。返回一个唯一的标识; 也可以通过返回的标识
clearTimeout(id): 来清除指定函数的执行。
var id = setTimeout( function, times);
clearTimeout(id);
setInteval()
setInterval():可按照指定的周期(以毫秒计)来调用函数或计算表达式，也可根据返回的标识用来结
束。该方法会不停地调用函数，直到clearInterval)被调用或窗口被关闭。
var id = setInterval(function, times);
clearInterval(id);
function test(){
console.log.(.....");
}
// window是一个全局对象，通过全局对象调用setInterval()函数
window.setInterval(test,1000);
history对象
history对象是历史对象。包含用户(在浏览器窗口中)访问过的URL。history 对象是window对象的
一部分， 可通过window.history属性对其进行访问。
history对象的属性: length, 返回浏览器历史列表中的URL数量。
history对象的方法: (以下方法必须在页面有跳转后才能使用)
forward():加载历史列表中的下一个URL。当页面第一次访问时， 还没有下一个url。
back():加载history列表中的前一个URL。
go(number|URL): URL参数使用的是要访问的URL。而number参数使用的是要访问的URL在History的URL列表中的相对位置。比如 go(2) 就是向前前进2的页面
go(-1), 到上一个页面
<body>
<!--
history
属性
length 获取用户访问窗口的个数
方法
back(); 后退
forward(); 前进
go(i); i如果为正数则是前进，负数为后退 向某个方向执行i个页面的跳转
-->
<h1>1号页面</h1>
<a href="05-history对象-2.html">跳转到2号页面</a>
<button type="button" onclick="fun1()">前进</button>
<button type="button" onclick="fun2()">前进2个</button>
<script type="text/javascript">
console.log(window.history.length);
function fun1(){
window.history.forward();
}
function fun2(){
window.history.go("www.baidu.com");
}
</script>
</body>
<body>
<h1>2号页面</h1>
<a href="05-history对象-3.html">跳转到3号页面</a>
<button type="button" onclick="fun1()">前进</button>
<script type="text/javascript">
console.log(window.history.length);
function fun1(){
window.history.forward();
}
</script>
</body>
<body>
<h1>3号页面</h1>
<button type="button" onclick="fun1()">后退</button>
<button type="button" onclick="fun2()">后退2个</button>
<script type="text/javascript">
console.log(window.history.length);
function fun1(){
window.history.back();
}
function fun2(){
window.history.go(-2);
}
</script>
</body>
location对象
location对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过window.location属性来访问。
location对象的属性href: 设置或返回完整的URL
location对象的方法
reload():重新加载当前文档。
replace():用新的文档替换当前文档。(替换的后的文档不能返回)
<body>
<!--
location 对象
window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过 window.location 属性来访问。
属性
href：设置或返回完整的 URL
方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。
-->
<button type="button" onclick="fun1()">设置href属性值:百度</button>
<button type="button" onclick="fun2()">重新加载</button>
<button type="button" onclick="fun3()">替换</button>
<script type="text/javascript">
//设置当前页面的地址
function fun1(){
window.location.href = "http://www.baidu.com";
}
//重新加载
function fun2(){
window.location.reload();
}
//用新的页面替换当前页面（没有后退功能）
function fun3(){
window.location.replace("http://www.baidu.com");
}
</script>
</body>
DOM事件流
我们的事件最后都有一个特定的事件源，暂且将事件源看做是HTML的某个元素，那么当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程称为DOM事件流。
这个顺序分为：1. 事件捕获 2. 事件冒泡
事件捕获
Netscape提出的一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
在事件捕获过程中，document 对象首先接收到click事件,然后沿DOM树依次向下，一直传播到事件的实际目标，即
元素。那么单击
元素就会按下列顺序触发click事件:
沿DOM树依次 向下
document --> html --> body --> div元素
沿DOM树依次 向下
document --> html --> body --> div元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
虽然事件捕获是Netscape唯⼀⽀持的事件流模式，但很多主流浏览器⽬前也都⽀持这种事件流模型。 尽管“DOM2级事件”规范要求事件应该从document对象开始时传播，但这些浏览器都是从window对象开始捕获的。
事件冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节 点（⽂档）。例如下面的：
click 事件首先在 div 元素上发生，而这个元素就是我们单击的元素。然后，click 事件沿 DOM 树向上传播，在每⼀级节点上都会发⽣，直到传播到document对象。如果点击了页面中的元素，那么这个click事件会按照如下顺序传播:
沿DOM树依次向上
div 元素 --> body --> html --> document
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
所有现代浏览器都⽀持事件冒泡，但在具体实现上还是有⼀些差别。
DOM2级事件
规定的事件流包括三个阶段: 事件捕获阶段、处于目标阶段 和 事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
事件处理程序
事件就是用户或浏览器自身执行的某种动作。例如click、load 和mouseover都是事件的名字，而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick,为事件指定处理程序的方式有好几种。
第一种处理程序：HTML事件处理程序
某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码:
<input type="button" value="Press me" onclick=" alert('thanks');" />
这样做有一些缺点，例如耦合度过高，还可能存在时差问题(当 用户点击按钮时，处理函数还未加载到，此时处理函数是单独写的一段js代码)， 而且在不同的浏览器上可能会有不同的效果。
第二种处理程序：DOM0级事件处理程序
通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己的事件处理程序属性，这些属性通常全都小写，例如onclick, 然后将这种属性的值设为一个函数，就可以指定事件处理程序了。例如:
<body>
<button id="myBtn">按钮</button>
<script type="text/javascript">
var btn = document.getElementById('myBtn');
btn.onclick = function(){
console.log('you click a button');
}
</script>
</body>
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序(覆盖)。
<body>
<button id="myBtn">按钮</button>
<script type="text/javascript">
var btn = document.getElementById('myBtn');
btn.onclick = function(){
console.log('you click a button');
}
//这里会覆盖上面的function，所以只有下面的函数有效
btn.onclick = function(){
console.log('you click a button222');
}
</script>
</body>
也可以通过删除DOM0级方法指定的事件处理程序，只要将属性值设为null即可:
btn.onclick = null;
第三种处理程序：DOM2 级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作: addEventListener() 和removeEventListener()。
所有DOM节点都包含这两个方法，并且他们都接受3个参数: 要处理的事件名、作为事件处理程序的函数和一个布尔值。
最后这个布尔值参数如果是true,则表示在捕获阶段调用事件处理程序;如果是false则表示在冒泡阶段调用事件处理程序。
这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数,注意,在删除的时候，不能删除匿名处理函数。
<body>
<button id="myBtn">按钮</button>
<script type="text/javascript">
var btn = document.getElementById('myBtn')
//匿名方式添加第一个监听事件
btn.addEventListener('click',function(){
alert('you add a eventListener by DOM2')
},false)
//匿名方式再添加第二个监听事件
btn.addEventListener('click',function(){
alert('you add a eventListener by DOM2 again')
},false)
//函数声明的方式添加第三个监听事件
function thread(){
alert('you add a eventListener by DOM2 第三次')
}
btn.addEventListener('click',thread,false)
//删除监听事件，只能删除有函数名的监听事件，所以只能删除第三个
btn.removeEventListener('click',thread,false)
</script>
</body>
DOM对象
DOM: Document Object Model文档对象模型
要实现页面的动态交互效果，bom 操作远远不够，需要操作html才是核心。如何操作html,就是
DOM。简单的说，dom 提供了用程序动态控制html接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。 dom处于javascript的核心地位上。
每个载入浏览器的HTML文档都会成为Document对象。Document 对象使我们可以从脚本中对HTML页面中的所有元素进行访问。Document 对象是Window对象的一部分，可通过window.document属性对其进行访问。
节点
加载 HTML 页面时，Web 浏览器生成⼀个树型结构，⽤来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成⼀个节点树。对于页面中的元素，可以解析成以下几种类型的节点：
| 节点类型 | HTML内容 | 例如 |
|---|---|---|
| 文档节点 | 文档本身 | 整个文档 document |
| 元素节点 | 所有的HTML元素 | |
| 属性节点 | HTML元素内的属性 | id、href、name、class |
| 文本节点 | 元素内的文本 | hello |
| 注释节点 | HTML中的注释 |
html->文档节点
div–>元素节点
title - >属性节点
测试Div ->文本节点
<html>
<head>
<title>树!树!到处都是树!</title>
</head>
<body>
<div title=" 属性节点">测试Div</div>
</body>
</html>
创建节点和插入节点
创建节点
| 方法 | 描述 |
|---|---|
| createElement() | 创建⼀个新的节点，需要传入节点的标签名称，返回创建的元素对象 |
| createTextNode() | 创建⼀个文本节点，可以传入文本内容 |
| innerHTML | 也能达到创建节点的效果，直接添加到指定位置了 |
插入节点
| 方法 | 描述 |
|---|---|
| write() | 将任意的字符串插入到文档中 |
| appendChild() | 向元素中添加新的子节点，作为最后⼀个子节点 |
| insertBefore() | 向指定的已有的节点之前插入新的节点newItem：要插入的节点exsitingItem：参考节点 需要参考父节点 |
<body>
<!--
创建节点
createElement()创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()创建一个文本节点，可以传入文本内容
innerHTML 也能达到创建节点的效果，直接添加到指定位置了
插入节点
write() 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点，作为最后一个子节点
insertBefore() 向指定的已有的节点之前插入新的节点newItem：要插入的节点exsitingItem：
参考节点 需要参考父节点
-->
<button onclick="addPara();">添加段落</button>
<button onclick="addImg();">添加图片</button>
<button onclick="addTxt();">添加文本框</button>
<button onclick="addOptions()">添加选项</button>
<span id="uzi">UZI</span>
<span id="pdd">PDD</span>
<hr />
<div id = "container"></div>
<select name="music">
<option value="-1">你心内的一首歌</option>
<option value="0">南山南</option>
<option value="1">喜欢你</option>
</select>
<script type="text/javascript">
//添加段落
function addPara(){
//获取插入元素节点
var div = document.getElementById("container");
/* 第一种 */
//1. 创建段落节点
var p = document.createElement("p");
//2. 创建文本节点
var txt = document.createTextNode("这是一个P标签");
//3. 将文本节点追加到p标签中
p.appendChild(txt);
// 上面的2和3可以用下面代替
// p.innerHTML = "这是一个P标签";
//4. 将p标签追加到div中
div.appendChild(p)
/* 第二种 */
div.innerHTML += "<p>这是一个P标签</p>";
}
//添加图片
function addImg(){
//获取插入元素节点
var div = document.getElementById("container");
//第一种
//创建图片标签
var img = document.createElement("img");
//设置图片标签中的属性
img.src = "img/aa.jpg";
img.width = 200;
img.title = "aa";
//追加到指定位置
div.appendChild(img);
//第二种
//创建图片标签
var img = document.createElement("img");
//设置图片标签属性
img.setAttribute("src","img/lbw.jpg");
img.setAttribute("width","200");
//追加到指定位置
div.appendChild(img);
//第三种
div.innerHTML += "<img src='img/lbw.jpg' width='100' />";
}
//添加文本框
function addTxt(){
//获取插入元素节点
var div = document.getElementById("container");
//第一种
//创建文本框节点
var input = document.createElement("input");
//设置属性
input.type = "text";
input.value = "admin";
div.appendChild(input);
//第二种
//创建文本框标签
var input = document.createElement("input");
//设置文本标签属性
input.setAttribute("type","text");
input.setAttribute("value","admin");
//追加到指定位置
div.appendChild(input);
}
//添加选项
function addOptions(){
//获取到指定位置的元素节点
var select = document.getElementsByName("music")[0];
//获取用户输入内容
var str = prompt("请输入");
//第一种
//创建选项
var option = document.createElement("option");
var txt = document.createTextNode(str);
option.appendChild(txt);
//option.innerHTML = str; 上面两行可以用这句代替
//设置选项属性
option.value = 2;
//将选项追加到下拉框中
select.appendChild(option);
//第二种
//获取到下拉框的列表，这是个数组
var options = select.options;
//创建新的节点对象，并添加文本str
var option = document.createElement("option");
option.innerHTML = str;
//将新数据添加到下拉框的数组中
options.add(option);
//第三种
//获取到下拉框的列表，这是个数组
var options = select.options;
//创建option选项对象
//Option()构造函数接受两个参数：文本(text)和值(value);第二个参数可选.
var newOption = new Option(str,options.length+1);
//将对象追加到下拉框列表数组中
options.add(newOption);
// 第四种⽅式: 添加下拉项
var sel = document.getElementsByTagName("select")[0];
sel.innerHTML += "<option value = '2'>英雄</option>" ;
}
//write() 将任意的字符串插入到文档中
// document.write("想写的内容");
// 把pdd节点 移动到 uzi节点之前
//insertBefore()向指定的已有的节点之前插入新的节点
//获取到需要移动的元素
var pdd = document.getElementById("pdd");
//获取参考位置的节点
var uzi = document.getElementById("uzi");
//获取父节点
var body = document.getElementsByTagName("body")[0];
//参数 1.移动节点 2.参考位置节点
body.insertBefore(pdd,uzi);
</script>
</body>
删除节点 （需要用到父元素去删除自己）
| 方法属性 | 描述 |
|---|---|
| removeChild() | 从元素中移除⼦节点 |
<body>
<!--
removeChild()
从元素中移除子节点 需要参考父节点对象
需要删除的节点.parentElement.removeChild(需要删除的节点);
-->
<div>
即将被删除的div
</div>
<button type="button" onclick="fun1()">删除</button>
<script type="text/javascript">
function fun1(){
//获取需要删除的节点
var div = document.getElementsByTagName("div")[0];
div.parentElement.removeChild(div);
}
</script>
</body>
获取节点：
注意:操作dom必须等节点初始化完毕后，才能执行。
处理方式两种:
(1)把script调用标签移到html末尾即可;
(2)使用onload事件 来处理JS,等待html加载完毕再加载onload事件里的JS。如下
<script type="text/javascript">
window.onload = function () {
//预加载html后执行
};
</script>
获取方式如下： (除了getElementById() ，其他拿到的都是数组)
| ⽅法 | 描述 |
|---|---|
| getElementById() | 根据id获取dom对象，如果id重复，那么以第⼀个为准 |
| getElementsByTagName() | 根据标签名获取dom对象数组 |
| getElementsByClassName() | 根据样式名获取dom对象数组 |
| getElementsByName() | 根据name属性值获取dom对象数组，常⽤于多选获取值 |
<body>
<!--
getElementById() 根据id获取dom对象，如果id重复，那么以第一个为准
getElementsByTagName() 根据标签名获取dom对象数组
getElementsByClassName() 根据样式名获取dom对象数组
getElementsByName() 根据name属性值获取dom对象数组，常用于多选获取值
a标签点击跳转调用 href属性，设置属性javascript:void(0) 伪协议，不执行跳转
注意：操作 dom 必须等节点初始化完毕后，才能执行。
处理方式两种:
（1）把 script 调用标签移到html末尾即可；
（2）使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。
-->
<p id="p1" class="para">这是一个段落<span>文本</span></p>
<p id="p1" class="para">这又是一个段落</p>
<input type="text" name="txt" class="para"/>
<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">
//通过id属性获取元素节点
function testById(){
var p = document.getElementById("p1");
console.log(p);
}
//通过name属性获取元素节点
function testByName(){
var hobbys = document.getElementsByName("hobby");
console.log(hobbys[1]);
}
//按照标签名获取
function testByTagName(){
var inputs = document.getElementsByTagName("input");
console.log(inputs);
}
//根据样式名获取dom对象数组
function testByClass(){
var clsz = document.getElementsByClassName("para");
console.log(clsz);
}
</script>
</body>
间接查找节点：
间接查找节点
| ⽅法属性 | 描述 |
|---|---|
| childNodes | 返回元素的⼀个⼦节点的数组 |
| firstChild | 返回元素的第⼀个⼦节点 |
| lastChild | 返回元素的最后⼀个⼦节点 |
| nextSibling | 返回元素的下⼀个兄弟节点 |
| parentNode | 返回元素的⽗节点 |
| previousSibling | 返回元素的上⼀个兄弟节点 |
<body>
<!--
childNodes 返回元素的一个子节点的数组
children 返回元素的子元素节点的数组
firstChild 返回元素的第一个子节点
lastChild 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点
-->
<div id="div1">
<span>span 1号</span><span>span 2号</span>
<div>块级元素</div>
</div>
<span>兄弟节点</span>
<script type="text/javascript">
var div = document.getElementById("div1");
//childNodes 返回元素的一个子节点的数组
var nodes = div.childNodes;
console.log(nodes);
var nodes = div.children;
console.log(nodes);
//firstChild 返回元素的第一个子节点
var firstChild = div.firstChild;
console.log(firstChild);
// lastChild 返回元素的最后一个子节点
var lastChild = div.lastChild;
console.log(lastChild);
//nextSibling 返回元素的下一个兄弟节点
console.log(div.nextSibling);
console.log(div.nextElementSibling);
// parentNode 返回元素的父节点
console.log(div.parentNode);
console.log(div.parentElement);
// previousSibling 返回元素的上一个兄弟节点
console.log(div.previousSibling);
console.log(div.previousElementSibling);
</script>
</body>
表单
获取表单
前两种常用
1、document .表单名称
2、document . getElementById(表单id) ;
3、document . forms [表单名称]
4、document . forms [索引]; //从 0开始
<body>
<!--
获取表单
1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始
-->
<form id='myform' name="myform" action="" method="post"></form>
<form id='myform2' name="myform2" action="" method="post"></form>
<script type="text/javascript">
//document.表单名称
var form = document.myform;
console.log(form);
//document.getElementById(表单 id);
var myform2 = document.getElementById("myform2");
console.log(myform2);
//3、document.forms[表单名称]
var forms = document.forms;
console.log(forms);
console.log(forms['myform2']);
//4、document.forms[索引]; //从 0 开始
console.log(forms[0]);
</script>
</body>
获取表单元素
获取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开始
获取单选按钮
前提:将一组单选按钮设置相同的name属性值
(1)获取单选按钮组:
document.getElementsByName("name属性值");
(2)遍历每个单选按钮，并查看单选按钮元素的checked属性
若属性值为true表示被选中，否则未被选中
选中状态设定: checked='checked' 或checked='true' 或checked
未选中状态设定:没有 checked属性或checked=' false'
获取多选按钮
操作方式与单选同理，不同之处在于可以多选
获取下拉选项
(1)获取select对象: .
var ufrom = document.getElementById("ufrom");
(2)获取选中项的索引:
var idx = ufrom.selectedIndex ;
(3)获取选中项options的value属性值:
var val = ufrom.options[idx].value;
注意:当通过options获取选中项的value属性值时,
若没有value属性,则取option标签 的内容
若存在value属性,则取value属性的值
(4)获取选中项options的text:
var txt = ufrom.options[idx].text;
选中状态设定: selected='selected'.selected=true、selected
未选中状态设定:不设selected属性
<body>
<!--
获取元素的值
获取表单元素的值
表单元素节点.value; 取值
表单元素节点.value = "值"; 设置值
文本框，密码框，单选，多选
获取非表单元素的内容
元素节点.innerHtml = "值"; 设置值
元素节点.innerHtml; 设置值
获取input元素
1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称; name属性值
3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
获取单选按钮
前提：将一组单选按钮设置相同的name属性值
(1)获取单选按钮组：
document.getElementsByName("name属性值");
(2)遍历每个单选按钮，并查看单选按钮元素的checked属性
若属性值为true表示被选中，否则未被选中
选中状态设定： checked='checked' 或 checked='true' 或 checked
未选中状态设定： 没有checked属性 或 checked='false'
多选框
前提：设置一组多选框为相同name属性值
(1)获取多选按钮组：
document.getElementsByName("name属性值");
(2)遍历每个多选按钮，并查看多选按钮元素的checked属性
若属性值为true表示被选中，否则未被选中
选中状态设定： checked='checked' 或 checked='true' 或 checked
未选中状态设定： 没有checked属性 或 checked='false'
获取下拉选项
1）获取 select 对象：
var ufrom = document.getElementById("ufrom");
2）获取选中项的索引：
var idx = ufrom.selectedIndex;
3）获取选中项 options 的 value属性值：
var val = ufrom.options[idx].value;
注意：当通过options获取选中项的value属性值时，
若没有value属性，则取option标签的内容
若存在value属性，则取value属性的值
4）获取选中项 options 的 text：
var txt = ufrom.options[idx].text;
选中状态设定：selected='selected'、selected=true、selected
未选中状态设定：不设selected属性
-->
<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>
<br><br>
<!-- 操作单选 -->
<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>
<br><br>
<!-- 操作多选 -->
<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" /> 3
<button type="button" onclick="getCheckbox();" >获取多选内容</button>
</form>
<!-- 获取下拉框 -->
<form id='myform' name="myform9" 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" onclick="getSelect();" >获取多选内容</button>
</form>
<script type="text/javascript">
//获取元素内容
function getTxt(){
// 通过 id 获取：document.getElementById(元素 id);
var uname = document.getElementById("uname");
console.log(uname.value);
//通过 form.名称形式获取: myform.元素名称; 因为form表单里name属性值为myform
var upwd = document.myform.upwd;
console.log(upwd);
console.log(upwd.value);
//3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
var hid = document.getElementsByName("uno")[0];
console.log(hid.value);
// 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
var texta = document.getElementsByTagName("textarea")[0];
console.log(texta.value);
}
//获取单选按钮中选中项
function getRadio(){
//获取所有单选
var rads = document.getElementsByName("rad");
//遍历每个单选
for(var i = 0; i < rads.length; i++){
if(rads[i].checked){
console.log(rads[i].value);
}
}
}
//获取多选按钮中选中项
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));
}
//获取下拉选项
function getSelect(){
//获取下拉框
var select = document.getElementsByName("ufrom")[0];
//获取下拉框的选项
var options = select.options;
//获取下拉框选中项的索引
var index = select.selectedIndex;
//获取选中项
console.log(options[index]);
//获取选中项的值
console.log(select.value);
}
</script>
</body>
表单提交
(1)使用普通button按钮+onclick事件+事件中编写代码:
获取表单.submit();
(2)使用submit按 钮+ οnclick=“return函数()” +函数编写代码:
最后必须返回: return truelfalse;
(3)使用submit按 钮/图片提交按钮+表单οnsubmit=“return函数();” +函数编写代码:
最后必须返回: return truelfalse;
<body>
<!--
（1）使用普通button按钮+onclick事件+事件中编写代码:
获取表单.submit();
（2）使用submit按钮 + οnclick="return 函数()" +函数编写代码:
最后必须返回：return true|false;
（3）使用submit按钮/图片提交按钮 + 表单οnsubmit="return 函数();" +函数编写代码:
最后必须返回：return true|false;
-->
<form id='myform1' name="myform2" action="http://www.baidu.com" method="get">
姓名：<input type="text" name="test" id="uname"/> <span id="msg" style="color: red;"></span><br />
<!--通过js事件：sub()提交表单-->
<input type="button" onclick="sub();" value="提交表单1" />
</form>
<form id='myform2' name="myform2" action="http://www.baidu.com" method="get">
姓名：<input type="text" name="test" id="uname2"/> <span id="msg2" style="color: red;"></span><br />
<!--通过js事件：sub()提交表单-->
<input type="submit" onclick="return sub2();" value="提交表单1" />
</form>
<form id='myform3' name="myform2" action="http://www.baidu.com" method="get" onsubmit="return sub3()">
姓名：<input type="text" name="test" id="uname3"/> <span id="msg3" style="color: red;"></span><br />
<!--通过js事件：sub()提交表单-->
<input type="submit" value="提交表单1" />
</form>
<script type="text/javascript">
//使用普通button按钮+onclick事件+事件中编写代码:
function sub(){
//校验数据合法性
var uname = document.getElementById("uname").value;
if(uname == null || uname.trim() == ""){
//提示用户用户名不能为空
document.getElementById("msg").innerHTML = "用户名不能为空";
return;
}
//手动提交表单
document.getElementById("myform1").submit();
}
//使用submit按钮 + οnclick="return 函数()" +函数编写代码:
function sub2(){
//校验数据合法性
var uname2 = document.getElementById("uname2").value;
//数据非空判断
if(uname2 == null || uname2.trim() == ""){
//提示用户用户名不能为空
document.getElementById("msg2").innerHTML = "用户名不能为空";
return false;
}
return true;
}
// 使用submit按钮/图片提交按钮 + 表单οnsubmit="return 函数();" +函数编写代码:
function sub3(){
//校验数据合法性
var uname3 = document.getElementById("uname3").value;
//数据非空判断
if(uname3 == null || uname3.trim() == ""){
//提示用户用户名不能为空
document.getElementById("msg3").innerHTML = "用户名不能为空";
return false;
}
return true;
}
</script>
</body>
ype=“text” name=“test” id=“uname3”/>
<script type="text/javascript">
//使用普通button按钮+onclick事件+事件中编写代码:
function sub(){
//校验数据合法性
var uname = document.getElementById("uname").value;
if(uname == null || uname.trim() == ""){
//提示用户用户名不能为空
document.getElementById("msg").innerHTML = "用户名不能为空";
return;
}
//手动提交表单
document.getElementById("myform1").submit();
}
//使用submit按钮 + onclick="return 函数()" +函数编写代码:
function sub2(){
//校验数据合法性
var uname2 = document.getElementById("uname2").value;
//数据非空判断
if(uname2 == null || uname2.trim() == ""){
//提示用户用户名不能为空
document.getElementById("msg2").innerHTML = "用户名不能为空";
return false;
}
return true;
}
// 使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数();" +函数编写代码:
function sub3(){
//校验数据合法性
var uname3 = document.getElementById("uname3").value;
//数据非空判断
if(uname3 == null || uname3.trim() == ""){
//提示用户用户名不能为空
document.getElementById("msg3").innerHTML = "用户名不能为空";
return false;
}
return true;
}
</script>
扫一扫
796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
