dom对象详解--document对象(三)
form对象
form对象代表一个HTML表单，在HTML文档中<form>每出现一次，form对象就会被创建。从dom对象层次图看，document.forms对象是当前文档所有form对象的集合。
例，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function test() {
//如何取得所有的表单
var allforms = document.forms;
//window.alert(allforms.length); //可以通过allforms去访问指定表单
window.alert(allforms[0].username.value);
//window.alert(allforms[1].hobby2.value);
//window.alert(allforms.item(1).hobby2.value);
}
</script>
</head>
<body>
<h1>个人信息</h1>
<form action="">
u:<input type="text" name="username" /><br/>
p:<input type="password" name="pwd" /><br/>
<input type="submit" value="提交" />
</form> <h1>兴趣爱好</h1>
<form action="">
爱好1:<input type="text" name="hobby1" /><br/>
爱好2:<input type="text" name="hobby2" /><br/>
<input type="submit" value="提交" />
</form>
<input type="button" value="测试" onclick="test()" />
</body>
</html>
案例：用户注册。
代码如下：
用户注册.css：
.style1 {
width: 130px;
}
.td2 {
width: 300px;
}
.td1 {
width: 80px;
}
#span1,#span2,#span3 {
font-size: 10px;
color: red;
}
用户注册.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="用户注册.css">
<script type="text/javascript">
function checkinfo() {
span1.innerText = "";
span2.innerText = "";
span3.innerText = "";
//获取表单的用户名
//为什么报Cannot read property 'username' of undefined这个错误?(原来没用<form>表单包裹起来)
if(document.forms[0].username.value.length < 4 || document.forms[0].username.value.length > 6) {
span1.innerText = "用户名应在4~6位之间";
return false;
}
//判断密码是否ok
if(document.forms[0].pwd1.value.length <= 3) {
span2.innerText = "密码要求大于3位";
return false;
}
if(document.forms[0].pwd1.value != document.forms[0].pwd2.value) {
span3.innerText = "输入的两次密码不一样";
return false;
}
}
</script>
</head>
<body>
<h1>用户注册</h1>
<form action="" onsubmit="return checkinfo()"> <!-- 第一种方法验证表单(不要觉得惊奇) -->
<table border="0">
<tr>
<td class="td1">用户 名</td>
<td class="td2">
<input class="style1" type="text" name="username" />
<span id="span1"></span>
</td>
</tr>
<tr><td>密 码</td><td><input class="style1" type="password" name="pwd1" /><span id="span2"></span></td></tr>
<tr><td>确认密码</td><td><input class="style1" type="password" name="pwd2" /><span id="span3"></span></td></tr>
<tr><td>年 龄</td><td><input class="style1" type="text" name="age" /></td></tr>
<tr><td>电子邮件</td><td><input class="style1" type="text" name="email" /></td></tr>
<tr><td>电话号码</td><td><input class="style1" type="text" name="phone" /></td></tr>
<tr>
<td><input type="submit" value="注册新用户" /></td>
<!-- 第二种方法验证表单
<input type="submit" value="注册新用户" onclick="return checkinfo()" /> -->
<td><input type="reset" value="重新填写" /></td>
</tr>
</table>
</form>
</body>
</html>
第一次运行的时候，会报错误如下：Cannot read property 'username' of undefined，甚是头疼，最后一看，马丹，<table>原来没用<form>表单包裹起来。
用户注册验证也是像一坨狗屎。
images对象(集合)
images对象(集合)定义：Retrieves a collection,in source order,of img objects in the document，即按照img在文档中的顺序得到img对象，images对象集合中包括了当前文档的所有img对象。
讲images对象(集合)的目的其实是为了讲解img对象。
images常用的函数和属性可参考http://www.w3school.com.cn/jsref/dom_obj_image.asp。
例，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>domcument-images</title>
<script type="text/javascript">
function test1() {
myid.innerText = "no ok";
}
function test2() {
myid.innerText = "ok";
}
</script>
</head>
<body>
<img src="sun.jpg" onerror="test1()" onload="test2()" />
<span id="myid"></span>
</body>
</html>
links对象(集合)
links对象(集合)定义：Retrieves a collection of all a objects that specify the HREF property and all area objects in the document，检索所有指定的HREF属性的对象的集合和文档中的所有区域中的对象。讲links对象(集合)，就自然的引出了link对象。
link对象代表一个超链接，在HTML文档中<a>每出现一次，就会创建一个link对象。从dom对象层次图看document.links对象是当前文档所有link对象的集合。
link常用的属性可参考http://www.w3school.com.cn/jsref/dom_obj_link.asp。
all对象(集合)
Returns a reference to the collection of elements contained by the object，返回参考要素所包含的对象的集合。all对象(集合)，能得到当前文档的所有元素，一般在遍历文档的时候使用，在实际开发中用的不是很多。
例，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document-images</title>
<script type="text/javascript">
function test1() {
myid.innerText = "no ok";
}
function test2() {
myid.innerText = "ok";
}
function abc() {
var myall = document.all;
for (var i = 0; i < myall.length; i++) {
alert(myall[i].nodeType+" "+myall[i].nodeName);
}
}
</script>
</head>
<body>
<img src="sun.gif" onerror="test1()" onload="test2()" />
<span id="myid"></span>
<input type="button" value="测试" onclick="abc()" />
</body>
</html>
其它html dom对象
img对象对于images对象集合，link对象对应links对象集合，form对象对应forms对象集合，frame对象对应frames对象集合...实际上html元素还有很多，比如button/select/radio/text/option/table...这些也是html dom对象，它们的使用和image对象，link对象非常相似，相信大家可以举一反三。
table对象
鉴于table对象在web编程中的重要性，此处重点讲解table对象。table对象代表一个html表格。在HTML文档中<table>标签每出现一次，一个table对象就会被创建。
table对象常用的属性(对象集合)可参考http://www.w3school.com.cn/jsref/dom_obj_table.asp。
例，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function test() {
//取出所有行
//var myrows = mytab.rows;
//window.alert(myrows.length);
//window.alert(myrows[1].cells[2].innerText); //mytab.rows:表示所有行
for (var i = 0; i < mytab.rows.length; i++) {
//取出一行
//mytab.rows[i]:第i行
var eachRow = mytab.rows[i];
//对该行遍历
//eachRow.cells: 表示eachRow行所有列
for (var j = 0; j < eachRow.cells.length; j++) {
window.alert(eachRow.cells[j].innerText);
}
}
}
//演示删除一行
function test2() {
mytab.deleteRow(1);
}
//演示插入一行
function test3() {
var tableRow = mytab.insertRow(3);
tableRow.insertCell(0).innerText = "3";
tableRow.insertCell(1).innerText = "吴用";
tableRow.insertCell(2).innerText = "智多星";
}
</script>
</head>
<body>
<h3>水浒英雄排行榜</h3>
<table id="mytab" border="1px">
<tr><td>排名</td><td>姓名</td><td>外号</td></tr>
<tr><td>1</td><td>宋江</td><td>及时雨</td></tr>
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
</table>
<input type="button" onclick="test()" value="tesing" /><br/>
<input type="button" onclick="test2()" value="删除一行" /><br/>
<input type="button" onclick="test3()" value="插入一行" /><br/>
</body>
</html>
又如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function addHero() {
//遍历整个表格看看有么有重复的编号
for (var i = 0; i < mytab.rows.length; i++) {
var eachRow = mytab.rows[i];
if(eachRow.cells[0].innerText == no.value) {
window.alert("编号不能重复...");
return;
}
}
//获取用户输入的信息
var newTableRow = mytab.insertRow(mytab.rows.length);
newTableRow.insertCell(0).innerText = no.value;
newTableRow.insertCell(1).innerText = username.value;
newTableRow.insertCell(2).innerText = nickname.value;
}
</script>
</head>
<body>
<h3>水浒英雄排行榜</h3>
<table id="mytab" border="1px">
<tr><td>排名</td><td>姓名</td><td>外号</td></tr>
<tr><td>1</td><td>宋江</td><td>及时雨</td></tr>
<tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>
</table>
<h3>请输入新的好汉</h3>
编号<input type="text" id="no" /><br/>
名字<input type="text" id="username" /><br/>
外号<input type="text" id="nickname" /><br/>
<input type="button" value="添加" onclick="addHero()" />
</body>
</html>
dom对象详解--document对象(三)的更多相关文章
- dom对象详解--document对象(一)
document对象 Document对象代表整个html文档,可用来访问页面中的所有元素,是最复杂的一个dom对象,可以说是学习好dom编程的关键所在. Document对象是window对象的一 ...
- dom对象详解--document对象(二)
dom对象详解--style对象 style对象 style对象和document对象下的集合对象styleSheets有关系,styleSheets是文档中所有style对象的集合,这里讲解的 ...
- js对象详解(JavaScript对象深度剖析，深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- php开发面试题---php面向对象详解（对象的主要三个特性）
php开发面试题---php面向对象详解(对象的主要三个特性) 一.总结 一句话总结: 对象的行为:可以对 对象施加那些操作,开灯,关灯就是行为. 对象的形态:当施加那些方法是对象如何响应,颜色,尺寸 ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...
- Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697
详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...
- mvc-servlet---ServletConfig与ServletContext对象详解（转载）
ServletConfig与ServletContext对象详解 一.ServletConfig对象 在Servlet的配置文件中,可以使用一个或多个<init-param>标签为s ...
- JavaWeb学习----JSP内置对象详解
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- jQuery的deferred对象详解（一）
最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
随机推荐
- GoAhead 嵌入式web
https://embedthis.com/goahead/ 入手了一个360 4g wifi :使用jquery .goahead Goahead webserver编辑 GoAhead We ...
- 1 通过JNI混合使用Java和C++ -----> 操作字符串
JNI(Java Native Interface)是Java语言的一部分,可以访问非Java语言编写的程序,也可以用于在C++程序中执行Java代码. 步骤: 1> 编写带有native声明 ...
- jQuery 获取 select 值和文本
jQuery("#select1").val();是取得选中的值, jQuery("#select1").text();就是取得的文本.
- 使用NPOI完成导出Excel文件
参考网址:http://blog.csdn.net/tiemufeng1122/article/details/6732588 能够实现 点击按钮弹出下载框 的功能,如图: HTML代码: & ...
- As.net WebAPI CORS, 开启跨源访问,解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource
默认情况下ajax请求是有同源策略,限制了不同域请求的响应. 例子:http://localhost:23160/HtmlPage.html 请求不同源API http://localhost:228 ...
- 心情符号love
写点什么呢,先谢谢心情吧,算是第一个脚印了,想先把之前的一些笔记和心得迁移进来吧,以后每个月都要充实自己的知识.向大婶们看齐.走你们走过的脚印,看你们前行的身影.沿着你们留下的路,继续为后者拓宽道路. ...
- 1497: [NOI2006]最大获利 - BZOJ
Description 新的技术正冲击着手机通讯市场,对于各大运营商来说,这既是机遇,更是挑战.THU集团旗下的CS&T通讯公司在新一代通讯技术血战的前夜,需要做太多的准备工作,仅就站址选择一 ...
- 推荐系统之LFM
这里我想给大家介绍另外一种推荐系统,这种算法叫做潜在因子(Latent Factor)算法.这种算法是在NetFlix(没错,就是用大数据捧火<纸牌屋>的那家公司)的推荐算法竞赛中获奖的算 ...
- [haoi2010]订货 最小费用流
这道题oj上的标签是动态规划,但我想不出来动态规划怎么搞,空间不爆,时间也要爆的: 好的,不扯淡,此题正常做法是最小费用流: 这道题我写了两遍,为什么呢?原因是第一次写的时候,不会写费用流,又恰好没带 ...
- 操作集合的工具类Collections
1 操作集合的工具类Collections Java提供了一个操作Set.List和Map等集合的工具类:Collections,该工具类里提供了大量方法对集合元素进行排序.查询和修改等操 ...