javascript对form表单的DOM操作

本文介绍了HTML中Form对象、Select对象及Option对象的基本概念、属性、方法等内容。包括表单元素的提交、重置、事件处理等操作,以及如何使用Select对象进行选项管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[color=indigo][b]一、Form对象[/b][/color]
[b]DOM继承关系:Node —— Element —— HMTLElement —— Form[/b]

[b]1、Form对象的属性[/b]
[color=red].elements[/color] [color=blue]//[/color][color=green]表单中所有元素的数组[/color]
[color=red].length [/color][color=blue]//[/color][color=green]表单中元素的数目,与elements.length的值一致[/color]
除这两个属性,其它的就是<form>标签中的属性
[color=red]注:[/color]还有一种特殊的属性——如果表单元素设置了name的值,则这个值就成了表单的一个属性,可以通过form.name来直接访问这个元素。

[b]2、Form对象的方法[/b]
[color=red].submit() [/color][color=blue]//[/color][color=green]提交表单[/color]
[color=red].reset() [/color] [color=blue]//[/color][color=green]重置表单[/color]

[b]3、事件句柄[/b]
[color=red].onsubmit = function()[/color] [color=blue]// [/color][color=green]指定在提交表单之前调用的函数[/color]
[color=red].onreset = function() [/color] [color=blue]//[/color][color=green]指定在重置表单前之调用的函数[/color]


[color=indigo][b]二、Select的对象:[/b][/color]
[b]DOM继承关系:Node —— Element —— HTMLElement —— Select[/b]

[b]1、Select对象的属性[/b]
[color=red].form [/color][color=blue]// [/color][color=green]包含本元素的form对象[/color]
[color=red].length[/color] [color=blue]//[/color][color=green]包含<option>元素的个数[/color]
[color=red].options[/color] [color=blue]//[/color] [color=green]Option对象的数组[/color]
[color=red].selectindex [/color][color=blue]// [/color][color=green]选项被选中的下标,如果无选中项,返回-1;如果有多个选中项,则返回第一个选中项的下标[/color]

[b]2、Select对象的方法[/b]
[color=red].add( option )[/color] [color=blue]//[/color] [color=green]添加一个option对象[/color]
[color=red].remove( option ) [/color][color=red]//[/color] [color=green]删除一个option对象[/color]


[color=indigo][b]三、Option继承关系:[/b][/color]
[b]DOM继承关系:Node —— Element —— HTMLElement —— HTMLOptionElement[/b]

[b]1、Option对象的属性:[/b]
[color=red].form [/color][color=blue]//[/color] [color=green]包含这个option的form对象引用[/color]
[color=red].index [/color][color=blue]//[/color][color=green]本option的位置[/color]
[color=darkred].text [/color][color=blue]//[/color][color=green]本option的文本内容[/color]
[color=red].value [/color][color=blue]//[/color][color=green]本option的值[/color]
[color=red].selected [/color][color=blue]// [/color][color=green]该选项的状态,返回true表示被选中[/color]

[b]2、构造方法[/b]
[color=red]new Option(text,value) [/color][color=blue]// [/color][color=green]生成一个Option对象,可以让select.add()来添加[/color]

[color=brown]注:上面对象除了本身所具有的属性和方法之外,还继承了它们的上面的三个父类的属性和方法,继承的这些属性和方法是DOM的核心,具体可查看我的文章[url]http://han2000lei.iteye.com/admin/blogs/518083[/url][/color]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值