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

最新推荐文章于 2022-04-24 20:40:05 发布

weixin_33845881

最新推荐文章于 2022-04-24 20:40:05 发布

阅读量106

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yerenyuan/p/5402011.html

版权

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="注册新用户" οnclick="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>

转载于:https://www.cnblogs.com/yerenyuan/p/5402011.html

weixin_33845881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom对象详解--document对象(三)

form对象 form对象代表一个HTML表单，在HTML文档中<form>每出现一次，form对象就会被创建。从dom对象层次图看，document.forms对象是当前文档所有form对象的集合。例，<!DOCTYPE html><html><head> <meta charset...
复制链接

扫一扫