007-访问表单控件

最新推荐文章于 2020-06-13 22:06:57 发布

编码的三叔

最新推荐文章于 2020-06-13 22:06:57 发布

阅读量277

点赞数

分类专栏： DOM详解 DOM详解文章标签： HTML访问表单控件访问select form input

本文链接：https://blog.csdn.net/ppwwp/article/details/88343195

版权

DOM详解同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

表单在DOM中由HTMLFormELement对象表示，该对象除了可调用前面介绍的基本属性和方法之外，还拥有如下几个常用属性。

action：返回该表单的action属性值，该属性用于指定表单的提交地址。读写属性。
elements：返回表单内全部表单控件所组成的数组。使用该数组可以访问该表单内的任何表单控件。只读属性。
length：返回表单内表单域的个数，该属性等于elements.length的值。只读属性。
method：返回该变淡的method属性，该属性通常有GET和POST两个值。默认采用GET方式。该属性用于确定表单发送请求的方式。读写属性。
target：用于确定提交表单时的结果窗口，可以使_self、_parent、_top、_blank等值。读写属性。

除此之外，HTMLFormElement对象还有如下两个常用方法。

reset(): 重设表单，将所有变淡域的值设置为初始值。
submit()：提交表单

因为HTMLFormELement提供了elements属性返回表单内的全部表单控件，因此可通过该属性访问表单里的表单控件。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html"/>
		<title>访问表单控件</title>
		
	</head>
	<body>
		<form id="d" action="" method="get">
			<input type="text" name="user" id="" value="" /><br>
			<input type="text" name="pass" id="" value="" /><br>
			<select name="color">
				<option value ="red">红色</option>
				<option value ="blue">蓝色</option>
			</select><br>
			<input type="button" name="" id="" value="第一个" onclick="alert(document.getElementById('d').elements[0].value);"/>
			<input type="button" name="" id="" value="第二个" onclick="alert(document.getElementById('d').elements['pass'].value);"/>
			<input type="button" name="" id="" value="第三个" onclick="alert(document.getElementById('d').color.value);"/>
			<!-- <input type="submit" value=""/> -->
		</form>
	</body>
</html>

在这里插入图片描述

上面代码可以看出来DOM先访问页面的表单元素，再使用表单元素的elements属性来访问该表单内的表单控件，例如document.getElementById('d').elements[0].value即表示访问该表单内的第一个表单控件。

实际上HTMLFormElement的elements属性值并不是一个普通的数组，而是一个HTMLCollection对象，该对象既可以当成普通数组使用用（即通过数字索引访问元素），也可以通过关联数组来访问（即通过字符串索引来访问元素）。因此上面的代码可以通过elements['pass']即表单里的name或id属性值为pass的表单控件来访问–如果表单内有多个表单控件的name或id属性值为pass，则elements[‘pass’]将再次返回一个HTMLCollection对象。

不仅HTMLFormElement的elements属性值是HTMLCollection对象。实际上，HTML元素中许多可能返回对象数组的方法，属性值得到的都是一个HTMLCollection对象，例如前面介绍的Node所提供的childNodes等。

根据上面代码不难看出，HTMLFormElement访问表单控件有如下3中语法。

formObj.elements[index]:返回表单中第index个表单控件。
formObj.elements[‘elementName’]：返回表单中id或name为elementName的表单控件
formobj.elementName:返回标单中id或name为elementName的表单控件

上面方法中的后2个方法也根据表单控件的id或name属性来访问表单控件，如果根据name访问返回值为多个也就是数组的话，就继续使用id或者index进行下一步访问，直到获取想要的元素为止。

编码的三叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
007-访问表单控件

表单在DOM中由HTMLFormELement对象表示，该对象除了可调用前面介绍的基本属性和方法之外，还拥有如下几个常用属性。action：返回该表单的action属性值，该属性用于指定表单的提交地址。读写属性。elements：返回表单内全部表单控件所组成的数组。使用该数组可以访问该表单内的任何表单控件。只读属性。length：返回表单内表单域的个数，该属性等于elements.leng...
复制链接

扫一扫