`
han2000lei
  • 浏览: 276294 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

javascript对form表单的DOM操作

阅读更多
一、Form对象
DOM继承关系:Node —— Element —— HMTLElement —— Form

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

2、Form对象的方法
.submit() //提交表单
.reset() //重置表单

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


二、Select的对象:
DOM继承关系:Node —— Element —— HTMLElement —— Select

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

2、Select对象的方法
.add( option ) // 添加一个option对象
.remove( option ) // 删除一个option对象


三、Option继承关系:
DOM继承关系:Node —— Element —— HTMLElement —— HTMLOptionElement

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

2、构造方法
new Option(text,value) // 生成一个Option对象,可以让select.add()来添加

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

相关推荐

    javascript弹出层表单提交代码

    综上所述,实现"javascript弹出层表单提交代码"涉及到了JavaScript的基础知识,如DOM操作、事件处理、异步通信,以及一些高级技巧,如使用第三方库提高开发效率。同时,良好的用户体验和数据验证也是不可忽视的部分...

    vue获取form表单的值示例

    本文档中将分享一个如何在Vue.js中获取form表单值的示例,使用的是Element-ui组件库以及axios库来发送HTTP请求。下面将详细介绍这些知识点。 ### Vue.js中的表单数据绑定 Vue.js提供了一种简单的方式来实现数据的...

    form表单美化插件

    为了提升用户体验和网站美观度,"form表单美化插件"应运而生。这个插件专门针对这一问题,旨在通过简单的方式将普通的HTML表单元素转化为更为现代、优雅的样式。 该插件基于jQuery库,这意味着它能够无缝集成到使用...

    jsp页面js调用form表单的值的方法

    本篇文章主要介绍如何在 JSP 页面中通过 JavaScript 来获取表单元素的值,并对其进行验证,确保用户输入的信息符合特定的要求。 #### 1. 基础知识 在正式开始之前,我们需要了解几个基础概念: - **HTML 表单**:...

    jquery获取form表单input元素值的简单实例

    在本篇内容中,我们将详细探讨如何使用jQuery来获取form表单中input元素的值,包括文本框、复选框、单选按钮等不同类型input元素的值获取方法。通过jQuery提供的val()方法和attr()方法,我们可以轻松获取或设置input...

    用Javascript将form所有内容序列化和反序列化的例子。

    在Web开发中,JavaScript是一种必不可少的前端编程语言,它提供了丰富的功能来操作DOM(文档对象模型)和处理用户交互。在HTML表单(form)数据处理方面,JavaScript也扮演着重要角色。本文将深入探讨如何使用...

    基于jQuery和layui的form表单自定义js动态生成

    jQuery是一个强大的JavaScript库,它简化了DOM操作,事件处理,动画效果以及Ajax交互。而layui是一款优秀的前端UI框架,提供了丰富的组件和美观的样式,使得前端页面的构建更加便捷。 一、jQuery基础 jQuery的核心...

    Form表单模拟美化插件.zip

    "Form表单模拟美化插件"正是为了解决这一问题而设计的,它通过JavaScript和CSS技术对基本表单元素进行深度美化,以提供更加美观、友好的用户体验。 这款插件特别关注了"select"下拉框的美化,因为在实际应用中,...

    form表单中的onblur事件

    在网页开发中,表单(Form)是用户与页面交互的重要元素,用于收集用户输入的信息。在HTML中,我们可以利用各种事件来控制表单元素的行为,`onblur`事件就是其中之一。`onblur`事件是当用户焦点离开某个元素,比如...

    使用FormValidation进行表单验证

    集成`jQuery`可以让`FormValidation`利用其强大的DOM操作和事件处理功能。`jQuery`简化了JavaScript代码,使得绑定验证事件、获取和修改DOM元素变得轻松。通过`$(document).ready()`函数,可以在页面加载完成后初始...

    ajax提交form表单

    在IT领域,特别是Web开发中,使用Ajax(Asynchronous JavaScript and XML)进行form表单的无刷新提交是一项关键技能。这种技术允许网页在不重新加载整个页面的情况下与服务器交互,从而提高了用户体验。以下是对给定...

    JavaScript动态创建form表单并提交的实现方法

    而JavaScript作为一种客户端脚本语言,提供了一种便捷的方式在不重新加载页面的情况下,根据程序的需要动态地创建和操作表单,从而提升用户体验。 在介绍JavaScript动态创建表单之前,需要理解HTML表单的基本结构和...

    JavaScript Validation API with DOM.zip

    JavaScript Validation API与DOM是Web开发中的重要组成部分,用于在客户端实现数据验证,提高用户体验并减轻服务器负担。在本文中,我们将深入探讨JavaScript Validation API以及它如何与DOM(文档对象模型)协同...

    form表单验证板模板

    在网页开发中,表单(Form)是收集用户数据的重要工具,而表单验证则是确保用户输入的数据符合预期格式和规则的关键步骤。本教程将详细讲解如何使用HTML、JavaScript中的`onfocus()`和`onblur()`事件来实现邮箱注册...

    用 Javascript 验证表单(form)中的单选(radio)值

    在JavaScript中,我们可以通过DOM(文档对象模型)操作来获取和设置单选按钮的值。在进行验证之前,我们需要先获取到单选按钮的DOM元素。通常情况下,可以使用document.getElementById()、document....

    form表单验证.rar

    对于开发者来说,深入研究这些代码可以提升对JavaScript事件处理、DOM操作、CSS选择器和动画的理解。你可以尝试修改规则,观察不同验证效果,或者将这些验证方法应用到自己的项目中。 7. **最佳实践**: 良好的...

    javascript验证form表单数据的案例详解

    通过以上介绍,我们可以看到,使用JavaScript验证表单数据并不复杂,但需要关注表单元素的name属性、数据的提交行为,以及如何通过JavaScript操作DOM元素来实现逻辑验证。此外,对于实际开发中可能遇到的其他表单...

    javascript 表单日期选择

    这通常涉及到HTML5中的`&lt;input type="date"&gt;`元素,以及JavaScript的DOM操作和事件处理来增强用户体验。本篇文章将深入探讨如何使用JavaScript进行表单日期选择,并提供相关实践示例。 1. HTML5日期输入类型: ...

    javascript 清空form表单中某种元素的值

    方法一明确地针对特定的表单进行操作,适用于表单元素具有明确组织结构时使用,例如表单被放置在一个`&lt;form&gt;`标签内,且页面上只有一个表单。这种方法的优点是针对性强,执行效率较高。方法二则更加灵活,适用于页面...

    清空表单标签js

    总结,清空表单标签的JavaScript方法主要涉及HTML表单元素、DOM操作以及事件监听。开发者可以根据需求选择使用内置的`reset()`方法,或者编写自定义的清空逻辑来实现更灵活的功能。同时,理解这些基础概念对于进行...

Global site tag (gtag.js) - Google Analytics