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对象详解>阮一峰老师的文章,里面 ...

随机推荐

OpenStack:安装Glance
>安装Glance1. 安装# apt-get install glance python-glanceclient删除sqlite文件rm -f /var/lib/glance/glance. ...
[转]ubuntu 14.04 系统设置不见了
[转]ubuntu 14.04 系统设置不见了 http://blog.sina.com.cn/s/blog_6c9d65a10101i0i7.html 不知道删除什么了,系统设置不见了! 我在终端运 ...
P3384: [Usaco2004 Nov]Apple Catching 接苹果
一道DP题, f[i,j,k] 表示第 k 时刻由 1 位置变换 j 次到达当前 i 棵树注意也要维护变换 0 次的情况. var i,j,k,t,w,now:longint; tree ...
iTween基础之CameraFade(摄像机淡入淡出)
一.基础介绍:二.基础属性原文地址: http://blog.csdn.net/dingkun520wy/article/details/50896420 一.基础介绍 CameraTexture: ...
java中的匿名内部类总结（转）
源出处: java中的匿名内部类总结匿名内部类也就是没有名字的内部类正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接 ...
iptables规则表
1.iptables规则表 Filter(针对过滤系统):INPUT.FORWARD.OUTPUT NAT(针对地址转换系统):PREROUTING.POSTROUTING.INPUT.OUTPUT ...
mysql启动问题access denied for user 'root'@'localhost'(using password:YES)
安装Mysql后利用SQLyogEnt启动是提示“access denied for user 'root'@'localhost'(using password:YES)”,开始我还为是因为是密码问 ...
android 开发怎么让程序生成的图片文件不会被系统扫描到
我们在写应用的时候,可能会保存很多图片,大的小的,仅仅是我们的应用中会用到,处于种种原因不希望用户看到,我是觉着如果被用户看到了,就失去了我的应用的那一层神秘的面纱,用户是米有闲情逸致去打开你一层层的 ...
Netsharp FAQ
1.启动服务器时候不能监听端口,出现如下错误: 回答: 这种问题应该是在win7环境下才有,是没有权限,要以管理员身份运行Netsharp.Elephant.Q.exe. 2.启动服务器的时候,服务端 ...
mac上安装port
今天和大家分享下在mac os x 上安装port 本人在 OS X El Capitan 版本的操作系统上进行安装并测试. --------------------------------- 第 ...

dom对象详解--document对象(三)

dom对象详解--document对象(三)的更多相关文章

随机推荐

热门专题