JS 事件、Bom 对象和 Dom 对象
次要内容
事件
事件 (Event) 是 JavaScript 利用跳动的心脏，进行交互，使网页动起来。当咱们与浏览器中 Web 页面进行某些类型的交互时，事件就产生了。事件可能是用户在某些内容上的点击、鼠标通过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中产生的事件，比如说某个 Web 页面加载实现，或者是用户滚动窗口或扭转窗口大小。
通过应用 JavaScript，你能够监听特定事件的产生，并规定让某些事件产生以对这些事件做出响应。
作用
（1）验证用户输出的数据。（2）减少页面的动感成果。（3）加强用户的体验度 事件中的几个名词
事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事件，谁监督？事件处理: 产生了怎么办 例如
闯红灯 事件源: 车 ; 事件名: 闯红灯; 监听：摄像头、交警 ; 解决: 扣分罚款
单击按钮 事件源: 按钮; 事件名: 单击; 监听: 窗口 ; 解决: 执行函数 当咱们用户在页面中进行的点击动作，鼠标挪动的动作，网页页面加载实现的动作等，都能够称之为事件名称，即：click、mousemove、load 等都是事件名称，具体的执行代码解决，响应某个事件的函数。
<body onload="loadWindow();"></body>
<script> function loadWindow(){alert("加载窗体");
} </script> 事件类型
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：元素失去焦点
onfocus：元素取得焦点
onclick：鼠标点击某个对象
onchange：用户扭转域的内容
onmouseover：鼠标挪动到某个元素上
onmouseout：鼠标从某个元素上来到
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下 事件流和事件模型
咱们的事件最初都有一个特定的事件源，暂且将事件源看做是 HTML 的某个元素，那么当一个 HTML 元素产生一个事件时，该事件会在元素节点与根节点之间按特定的程序流传，门路所通过的节点都会受到该事件，这个流传过程称为 DOM 事件流。
事件程序有两种类型： 事件捕捉 和 事件冒泡 。
冒泡和捕捉其实都是事件流的不同体现，这两者的产生是因为 IE 和 Netscape 两个大公司齐全不同的事件流概念产生的。（事件流：是指页面承受事件的程序）IE 的事件流是事件冒泡，Netscape 的事件流是事件捕捉流。
事件冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素承受，而后逐级向上流传到较为不具体的节点（文档）。例如上面的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html> 如果点击了页面中的
元素，那么这个 click 事件会依照如下程序流传：
1、
2、
3、
4、document
也就是说，click 事件首先在 div 元素上产生，而这个元素就是咱们单击的元素。而后，click 事件沿 DOM 树向上流传，在每一级节点上都会产生，直到流传到 document 对象。
所有古代浏览器都反对事件冒泡，但在具体实现上还是有一些差异。
事件捕捉
Netscape 提出的另一种事件流叫做事件捕捉，事件捕捉的思维是不太具体的节点应该更早接管到事件，而最具体的节点应该最初接管到事件。事件捕捉的用意在于在事件达到预约指标之前捕捉它。还以后面的例子为例。那么单击
元素就会按下列程序触发 click 事件：
1、document
2、
3、
4、
在事件捕捉过程中，document 对象首先接管到 click 事件，而后沿 DOM 树顺次向下，始终流传到事件的理论指标，即
元素。
尽管事件捕捉是 Netscape 惟一反对的事件流模式，但很多支流浏览器目前也都反对这种事件流模型。只管“DOM2 级事件”标准要求事件应该从 document 对象开始时流传，但这些浏览器都是从 window 对象开始捕捉的。
DOM 事件流
“DOM2 级事件”规定的事件流包含三个阶段：事件捕捉阶段、处于指标阶段和事件冒泡阶段。首先产生的是事件捕捉阶段，为截获事件提供了机会。而后是理论的指标接管到事件。最初一个阶段是冒泡阶段，能够在这个阶段对事件做出响应。
[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-hlMv6tEq-1605853002883)(/ 图片 1dfgh.png)]
事件处理程序
事件就是用户或浏览器本身执行的某种动作。例如 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> 以这种形式增加的事件处理程序会在事件流的冒泡阶段被解决。而且，只能为同一个元素的同一个事件设定一个处理程序（笼罩），也能够通过删除 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> 这种形式能够为同一个元素的同一个事件增加多个处理函数。还可删除事件处理函数，留神，在删除的时候，不能删除匿名处理函数。
本节作业
1. 罕用的几种事件
2. 绑定事件的几种形式 BOM 对象
BOM 的外围对象是 window，它示意浏览器的一个实例。window 对象有双重角色，它既是通过 JavaScript 拜访浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因而有权拜访 parseInt() 等办法。如果页面中蕴含框架，则每个框架都领有本人的 window 对象，并且保留在 frames 汇合中。在 frames 汇合中，能够通过数值索引（从 0 开始，从左至右，从上到下）或者框架的名称来拜访相应的 window 对象。
Window 对象办法
零碎对话框
浏览器通过（理论是 window 对象的办法）alert()、confirm()、prompt() 办法能够调用零碎对话框向用户显示音讯。
（1）音讯框:alert，罕用。alert() 办法用于显示带有一条指定音讯和一个 OK 按钮的正告框。（2）输入框:prompt，返回提示框中的值。prompt() 办法用于显示可提醒用户进行输出的对话框。参数（可选）：第一个参数：要在对话框中显示的纯文本。第二个参数：默认的输出文本。（3）确认框:confirm，返回 true/false.
confirm() 办法用于显示一个带有指定音讯和 OK 及勾销按钮的对话框。<style type="text/css"> #aa{
border: 1px solid red;
height: 100px;
} </style>
<body>
<div id="aa">
This is a div
</div>
<button onclick="testAlert();"> 正告 </button>
<button onclick="testComfirm();"> 批改 </button>
<button onclick="testPrompt();"> 输出 </button>
<script type="text/javascript"> // 1. 正告框
function testAlert(){alert('正告框！！！');
}
/*
2. 输入框
返回值：输出的内容
* */
function testPrompt(){var item = prompt('请输出年龄'); // item 失去输出的值
// console.log(item)
// alert(prompt('请输出年龄',18)); // 将输出的值输入
}
/*
3. 确认框
返回值：boolean（true|false）* */
function testComfirm(){var result = confirm('真的要改吗？');
if(result){var ele = document.getElementById("aa");
ele.style.color="red";
ele.innerHTML="<span>fdsfsd</span>";
}else{alert("没事别瞎点。。。");
}
} </script>
</body> 关上窗口
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="百度" onclick='openBaidu();' /> 敞开窗口
window.close()：敞开窗口。
例：点击按钮敞开以后窗口。
<input type="button" value="敞开窗口" onclick="window.close();" /> 工夫函数
setTimeout()
setTimeout() : 在指定的毫秒数后调用函数或计算表达式。返回一个惟一的标识；也能够通过返回的标识 cliearTimeout(id)：来革除指定函数的执行。
var id = setTimeout(function,times); clearTimeout(id); 示例：
<script type="text/javascript"> // 提早 3 秒后呈现 alert
function hello() {alert("对不起, 要你久候");
}
setTimeout("hello()", 3000);
// 工夫显示器
var timeout;
function init(){
// 拿到以后工夫
var date = new Date();
var time = date.toLocaleString();
// 拿到相应对象
var h1 = document.getElementById('h1');
// 依据需要增加款式
if(0==date.getSeconds()){ // 当工夫的秒数变成 0 时，显示红色字体
h1.innerHTML = '<span >' + time + '</span>';
} else {h1.innerHTML = time;}
/*
* 定时操作，只执行一次
第一个参数：执行的办法；第二个参数：定时，单位是毫秒
* */
setTimeout(init,1000); // 等多少工夫来执行
}
// window.setTimeout(init,1000);// 只执行一次
// 进行操作
function stopShow () {clearTimeout(timeout);
} </script>
<body onload="init();">
<h1 id="h1"></h1>
<button onclick="stopShow()"> 工夫进行 </button>
</body> 在 times 毫秒后执行 function 指定的办法，执行之前也能够勾销
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 对象的办法：
back()：加载 history 列表中的前一个 URL。
forward()：加载历史列表中的下一个 URL。当页面第一次拜访时，还没有下一个 url。
go(number|URL): URL 参数应用的是要拜访的 URL。而 number 参数应用的是要拜访的 URL 在 History 的 URL 列表中的绝对地位。go(-1)，到上一个页面
013-history.html
<body>
<a href="013-history-a.html">013-history-a.html</a>
<h1> 我是第一个页面 </h1>
<input type="button" value="后退" onclick="window.history.forward();" />
<script> console.log(window.history); </script>
</body> 013-history-a.html
<body>
<a href="013-history-b.html">013-history-b.html</a>
<h1> 我是 A 页面 </h1>
<input type="button" value="后退" onclick="window.history.back();"/>
</body> 013-history-b.html
<body>
<h1> 我是 B 页面 </h1>
<input type="button" value="第一个页面" onclick="window.history.go(-2);"/>
<input type="button" value="后退" onclick="window.history.back();"/>
</body> location 对象
location 对象是 window 对象之一，提供了与以后窗口中加载的文档无关的信息，还提供了一些导航性能。也可通过 window.location 属性来拜访。
location 对象的属性 href：设置或返回残缺的 URL
location 对象的办法
reload()：从新加载以后文档。
replace()：用新的文档替换以后文档。
<script type="text/javascript"> function openBaidu(){
// 没有历史记录, 用新的文档替换以后文档
// window.location.replace("http://www.baidu.com");
// console.log(window.location.href); // 获取残缺的 url
window.location.href = "http://www.baidu.com";
} </script>
<body>
<input type="text" value="" />
<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" value="百度" onclick="openBaidu();" />
</body> 本节作业
- 实现工夫计时性能
- JS 的跳转形式
DOM 对象
DOM：Document Object Model 文档对象模型
要实现页面的动静交互成果，bom 操作远远不够，须要操作 html 才是外围。如何操作 htm，就是 DOM。简略的说，dom 提供了用程序动态控制 html 接口。DOM 即文档对象模型描述了一个层次化的节点树，运行开发人员增加、移除和批改页面的某一部分。dom 处于 javascript 的外围位置上。
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使咱们能够从脚本中对 HTML 页面中的所有元素进行拜访。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行拜访。
[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-Htrz0W8v-1605853002891)(/ 图片 1trj.png)]
节点
加载 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> [外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-UnSf9e8Q-1605853002898)(/ 图片 1fdgfh.png)]
操作元素的节点
当 HTML 文档在被解析为一颗 DOM 树当前，外面的每一个节点都能够看做是一个一个的对象，咱们称为 DOM 对象，对于这些对象，咱们能够进行各式各样的操作，查找到某一个或者一类节点对象，能够创立某种节点对象，能够在某个地位增加节点对象，甚至能够动静地删除节点对象，这些操作能够使咱们的页面看起来有动静的成果，前期联合事件应用，就能让咱们的页面在特定机会、特定的事件下执行特定的变换。
获取节点
在进行增、删、改的操作时，都须要指定到一个地位，或者找到一个指标，此时咱们就能够通过 Document 对象提供的办法，查找、定位某个对象（也就是咱们说的节点）。
留神：操作 dom 必须等节点初始化结束后，能力执行。
解决形式两种:
（1）把 script 调用标签移到 html 开端即可；
（2）应用 onload 事件来解决 JS，期待 html 加载结束再加载 onload 事件里的 JS。
window.onload = function () { // 预加载 html 后执行}; 获取形式如下：
办法
形容
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:void(0)" onclick="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>
</body> 阐明：href=“javascript:void(0)”：伪协定，示意不执行跳转，而执行指定的点击事件。
<script type="text/javascript"> // 依照 id 获取元素
function testById() {
// 返回单个对象
var p = document.getElementById("p1");
console.log(p);
// 示意获取元素开始标签和完结标签之间的 html 构造
console.log(p.innerHTML);
console.log(p.innerText); // 示意获取标签之间的一般文本
}
// 依照 name 获取元素
function testByName() {
// 对象数组
var ho = document.getElementsByName("hobby");
console.log(ho);
for(var i = 0; i <= ho.length - 1; i++) {console.log(ho[i].value);
}
}
// 依照标签名获取元素
function testByTagName() {
// 对象数组
var inputArr = document.getElementsByTagName("input");
for(var i = 0; i < inputArr.length; i++) {if(inputArr[i].type == "text") {console.log("text 类型");
} else if(inputArr[i].type == "checkbox") {if(inputArr[i].checked) {console.log(inputArr[i].value);
}
}
}
}
// 依照 class 属性获取元素
function testByClass() {
// 对象数组
var ps = document.getElementsByClassName("para");
console.log(ps[0].innerHTML);
ps[0].innerHTML += "这是一段新的文本";
} </script> 创立节点和插入节点
很多时候咱们想要在某个地位插入一个新的节点，此时咱们首先须要有一个节点存在，能够通过以下几种形式创立新节点。
创立节点
办法
形容
createElement()
创立一个新的节点，须要传入节点的标签名称，返回创立的元素对象
createTextNode()
创立一个文本节点，能够传入文本内容
innerHTML
也能达到创立节点的成果，间接增加到指定地位了
插入节点
办法
形容
write()
将任意的字符串插入到文档中
appendChild()
向元素中增加新的子节点，作为最初一个子节点
insertBefore()
向指定的已有的节点之前插入新的节点 newItem：要插入的节点 exsitingItem：参考节点 须要参考父节点
<button onclick="add()"> 增加段落 </button>
<div id="container"></div>
<script type="text/javascript"> function add(){var container = document.getElementById('container')
var paragraph = document.createElement('p');
var txt = document.createTextNode('hello')
paragraph.appendChild(txt)
container.appendChild(paragraph)
} </script> 增加“段落、图片、文本框、选项”
<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>
</body> <script type="text/javascript"> // 增加 p 节点
function addPara(){
// 获取容器
var container =document.getElementById("container");
// 创立段落 <p></p>
var p =document.createElement('p');
// 第一种形式
// 创立文本节点
var txt=document.createTextNode("当前的你会感激当初致力的你");
// 将 txt 节点追加到 p 节点中
p.appendChild(txt);
// 将 p 节点追加到 container 节点中
container.appendChild(p);
/*
// 第二种形式
// 向 p 节点中增加内容
p.innerHTML = "当前的你会感激当初致力的你";
// 将 p 节点追加到 container 节点中
container.appendChild(p);
*/
/*
// 第三种形式
// 将字符串类型的 p 标签内容增加到 container 中，不会增加屡次
var str = "<p> 当前的你会感激当初致力的你 </p>";
container.innerHTML = str;
*/
}
// 增加图片
function addImg(){
// 创立图片
var img = document.createElement("img") ;
/*
// 设置属性第一种形式
// 设置 img 标签的 src 属性
// img.src ="http://www.baidu.com/img/bd_logo1.png";
*/
// 设置属性第二种形式
// setAttribute() 办法增加指定的属性，并为其赋指定的值。// 设置 img 的 src 属性
img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
img.style.width = '300px';
img.style.height = '200px';
// 获取容器
var container =document.getElementById("container");
// 将 img 节点追加到 container 中。container.appendChild(img);
}
// 增加文本框
function addTxt(){
// 创立文本框
var txt =document.createElement("input");
/*
// 设置类型第一种形式
txt.type = "text";
txt.value = "增加胜利";
*/
// 设置类型第二种形式
txt.setAttribute('type', 'text');
txt.setAttribute('value', '增加胜利');
/*
* txt.type = 'password'
* txt.value = '123'
*/
// 获取容器
var container =document.getElementById("container");
// 将 txt 节点追加到 container 中。container.appendChild(txt);
}
// 增加下拉框的选项
function addOptions(){
// 第一种形式
/*
// 创立下拉项
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "油菜花" ;
// 获取下拉框
var sel = document.getElementsByTagName("select")[0];
// 增加 下拉项
sel.appendChild(option);
*/
// 第二种形式:
var option = document.createElement("option") ;
option.value = "2" ;
option.text = "不该" ;
// 获取下拉框
var sel = document.getElementsByTagName("select")[0];
// 增加下拉项
sel.options.add(option);
// 第三种形式: 增加下拉项
var sel = document.getElementsByTagName("select")[0];
sel.innerHTML += "<option value ='2'> 英雄 </option>" ;
} </script> 间接查找节点
办法 | 属性
形容
childNodes
返回元素的一个子节点的数组
firstChild
返回元素的第一个子节点
lastChild
返回元素的最初一个子节点
nextSibling
返回元素的下一个兄弟节点
parentNode
返回元素的父节点
previousSibling
返回元素的上一个兄弟节点
删除节点
办法 | 属性
形容
removeChild()
从元素中移除子节点
<script type="text/javascript"> function delNode(){var programmer =document.getElementById("programmer");
// 从父元素中删除节点，获取要删除对象的父元素，而后从父元素中删除该对象
programmer.parentNode.removeChild(programmer);
} </script>
<body>
<span id="programmer"> 程序猿 </span>
<a href="javascript:void(0)" onclick="delNode();"> 删除 </a>
</body> 表单
表单是咱们页面向后盾传输数据的一种十分常见的形式，在进行数据发送（申请收回）之前，咱们应该当初页面进行一系列数据合法性的验证，节俭不必要的谬误数据的传输，以及进步用户的体验度。
获取表单
前两种罕用
1、document. 表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; // 从 0 开始 例如：
<body>
<form id='myform' name="myform" action=""method="post"></form>
<form id='myform2' name="myform2" action=""method="post"></form>
</body>
<script> // 四种形式
var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form); </script> 获取表单元素
获取 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 开始 <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>
</body>
<script> function getTxt(){var uno = document.getElementById("uno");
var uname = myform.uname;
console.log(uname + "--------");
var upwd = document.getElementsByTagName('input')[1] ;
var intro = document.getElementsByName("intro")[0];
console.log(uno.value +"，"+ uname.value +"，"+ upwd.value +"，"+ intro.value);
} </script> 获取单选按钮
前提：将一组单选按钮设置雷同的 name 属性值
(1) 获取单选按钮组：
document.getElementsByName("name 属性值"); (2) 遍历每个单选按钮，并查看单选按钮元素的 checked 属性 若属性值为 true 示意被选中，否则未被选中
选中状态设定：checked=‘checked’或 checked=‘true’或 checked
未选中状态设定：没有 checked 属性 或 checked=‘false’
<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
</form>
<script type="text/javascript"> var radios = document.getElementsByName('rad');
//radios[0].checked = 'checked'
for(var i = 0; i<radios.length; i++){console.log(radios[i].checked + '---' + radios[i].value)
} </script> 获取多选按钮
操作形式与单选同理，不同之处在于能够多选
var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0;i < ufav.length; i++){if(ufav[i].checked){favstr += ufav[i].value+",";
}
}
favstr = favstr.substr(0,favstr.length-1); 获取下拉选项
（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 onload="init()">
<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>
</body>
<script> function init () {var sub = document.getElementById("sub");
sub.onclick = function () {
// 获取 select 对象
var ufrom = document.getElementById("ufrom");
console.log("表单对象：" + ufrom);
// 获取选中的索引
var idx = ufrom.selectedIndex;
console.log("选中项的索引值：" + idx);
// 获取选中项的 value 值
var val = ufrom.options[idx].value;
console.log("选中项的 value 属性值：" + val);
// 获取选中项的 text
var txt = ufrom.options[idx].text;
console.log("选中项的 text：" + txt);
}
} </script> 提交表单
（1）应用一般 button 按钮 +onclick 事件 + 事件中编写代码:
获取表单.submit();（2）应用 submit 按钮 + onclick="return 函数 ()" + 函数编写代码: 最初必须返回：return true|false;
（3）应用 submit 按钮 / 图片提交按钮 + 表单 onsubmit="return 函数 ();" + 函数编写代码: 最初必须返回：return true|false;
<form id='myform1' name="myform2" action="#" method="get" onsubmit="return onsub();">
<input name="test" id="uname"/><span id="msg"></span><br />
<!-- 通过 js 事件：sub() 提交表单 -->
<input type="button" onclick="sub();" value="提交表单 1" />
<input type="submit" onclick="return sub2();" value="提交表单 2" />
<input type="submit" value="提交 onsubmit" /><br />
<input type="image" src="img/u=71331624,2965806045&fm=23&gp=0.jpg"
width="60px" height="40px" />
</form>
<script type="text/javascript"> // input 的 type=button，调用 submit() 办法提交
function sub(){document.myform2.submit();
}
// 进行校验，返回值为 true 能力提交
function sub2(){var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){return true; // 提交}
document.getElementById("msg").innerHTML = "不能空着啊！！！";
document.getElementById("msg").style.color="red";
return false; // 不提交
}
// onsubmit 事件提交
function onsub () {var uname = document.getElementById("uname");
var val = uname.value;
if(val.length>0){return true; // 提交}
document.getElementById("msg").innerHTML = "填写点儿货色呗！(ˉ▽~～) 切~~";
document.getElementById("msg").style.color="red";
return false; // 不提交
} </script> 表单校验
<form id='myform' name="myform">
姓名:<input type="text" id="uname" name="uname" /><br />
明码:<input type="password" id="upwd" name="upwd" /><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/> 小屁孩
<input type="radio" name="uage" value="1"/> 你懂得 <br />
喜好:<input type="checkbox" name="ufav" value="篮球"/> 篮球
<input type="checkbox" name="ufav" value="爬床"/> 爬床
<input type="checkbox" name="ufav" value="代码"/> 代码 <br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected"> 请抉择 </option>
<option value="0"> 北京 </option>
<option value="1"> 上海 </option>
</select><br />
<div id="validate" style="color: red;"></div>
<button type="submit" onclick="return checkForm();"> 提交 </button>
<button type="reset" onclick="resetForm();"> 重置 </button>
</form> /**
要求：1、验证用户名
1) 不能为空
2) 长度为 6-12 位
2、验证明码
1) 不能为空 *
2) 长度为 6-12 位
3) 不能蕴含用户名
3、年龄: 必须抉择 你懂得
4、喜好: 必须抉择一项
5、来自: 必须抉择一项
满足以上条件
1、弹出所有的内容
2、提交表单
否则
1、阐明谬误起因
2、不能提交表单
*/ // 通过 id 属性值得到 dom 对象
function $(id) {return document.getElementById(id);
}
// 重置表单所有元素 留神函数不能命名为 clear reset 等
function resetForm(){
// 获取阐明 div
var validate =$('validate');
validate.innerHTML ="";
}
// 表单校验
function checkForm () {
var flag =true;
// 获取阐明 div
var validate = $('validate');
validate.innerHTML ="";
// 1、验证用户名
// 1)、获取用户名的值
var uname = $('uname').value;
// 1) 不能为空 --> 前期正则解决
// 2) 长度为 6-12 位
if("" === uname || uname.length == 0){
validate.innerHTML += "* 用户名不能为空 </br>";
flag = false;
}else if(uname.length < 6 || uname.length > 12){
validate.innerHTML += "* 用户名长度在 6-12 位 </br>";
flag = false;
}
// 2、验证明码
var upwd = $('upwd').value;
// 1) 不能为空
// 2) 长度为 6-12 位
// 3) 不能蕴含用户名
if("" === upwd || upwd.length == 0){
validate.innerHTML += "* 明码不能为空 </br>";
flag = false;
} else if(upwd.length < 6 ||upwd.length > 12){
validate.innerHTML += "* 明码长度在 6-12 位 </br>";
flag = false;
} else if(uname.length > 0 && upwd.indexOf(uname) >= 0){
validate.innerHTML += "* 明码中不能呈现用户名 </br>";
flag = false;
}
// 3、年龄: 必须抉择 你懂得
var ageGroup = document.getElementsByName("uage");
var age ;
for (var i = 0; i < ageGroup.length; i++) {if(ageGroup[i].checked){age = ageGroup[i].value;
}
}
if(age == 0){
flag = false;
validate.innerHTML += "* 小屁孩，妈妈喊你回家 </br>";
}
// 4、喜好: 必须抉择一项
var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0;i < ufav.length; i++){if(ufav[i].checked){favstr += ufav[i].value + ",";
}
}
favstr = favstr.substr(0,favstr.length-1);
if(favstr.length < 1){
flag = false;
validate.innerHTML += "* 人生真无趣 </br>";
}
// 5、来自
var ufrom = $('ufrom');
var idx = ufrom.selectedIndex ;
var val = ufrom.options[idx].value;
var valTxt = ufrom.options[idx].text;
if(-1 == val){
flag = false;
validate.innerHTML += "* 你来自火星吗?</br>";
}
// 满足以上条件 弹出内容
if(flag){
var str = "";
str += "您的姓名是:" + uname + "n";
str += "您的明码是:" + upwd + "n";
str += "您的年龄是:" + "能够赢取白富美了" + "n";
str += "您的喜好是:" + favstr + "n";
str += "您来自于:" + valTxt + "n";
alert(str);
// 设置表单提交的地址
myform.action="http://www.baidu.com";
// 提交表单
myform.submit();
return false;
} else {return false;} }
}
if(age == 0){
flag = false;
validate.innerHTML += "* 小屁孩，妈妈喊你回家 </br>";
}
// 4、喜好: 必须抉择一项
var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0;i < ufav.length; i++){if(ufav[i].checked){favstr += ufav[i].value + ",";
}
}
favstr = favstr.substr(0,favstr.length-1);
if(favstr.length < 1){
flag = false;
validate.innerHTML += "* 人生真无趣 </br>";
}
// 5、来自
var ufrom = $('ufrom');
var idx = ufrom.selectedIndex ;
var val = ufrom.options[idx].value;
var valTxt = ufrom.options[idx].text;
if(-1 == val){
flag = false;
validate.innerHTML += "* 你来自火星吗?</br>";
}
// 满足以上条件 弹出内容
if(flag){
var str = "";
str += "您的姓名是:" + uname + "n";
str += "您的明码是:" + upwd + "n";
str += "您的年龄是:" + "能够赢取白富美了" + "n";
str += "您的喜好是:" + favstr + "n";
str += "您来自于:" + valTxt + "n";
alert(str);
// 设置表单提交的地址
myform.action="http://www.baidu.com";
// 提交表单
myform.submit();
return false;
} else {return false;}