form 表单提交的几种写法

首先,一个 form 的结构如下:

<form name="myForm" id="formId">
    <input type="text" id="inputId" name="inputName">
</form>
  1. document.getElementById('formId') 可以得到这个 form 元素。
  2. document.myForm 得到的是 HTMLCollection,如果只有一个 form 的话,得到的就是这个 form 元素,否则是一个集合。
  3. document.forms 得到的是 HTMLCollection,通过 document.forms[0] 可以得到第一个 form 元素。
  4. document.getElementById('formId').elements 得到一个 HTMLFormControlsCollection

简易写法

假设页面只有一个 form 元素,且 form 结构如文章开头所示,获得这个 input 最简单的写法是:

document.myForm.inputId
或者
document.myForm.inputName
------- 等同于 ----------
document.getElementById('formId').inputName
document.getElementById('formId').inputId
document.myForm.elements.inputName
document.getElementById('formId').elements.inputId
.....
但是如果有多个 name 相同的元素,直接通过 name 取到的是一个集合,这点要注意。

jsfiddle在线演示地址


参考资料:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本人做php的,最近发现JS真的是博大精深啊,比PHP难.在HTML中,表单是由form元素来表示的,但是在jav...
    linfree阅读 2,214评论 3 17
  • 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且定义了一种...
    mhy_web阅读 420评论 0 0
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,704评论 0 7
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,162评论 0 21
  • 二 松桦恋 一棵松树不顾世俗的白眼,和一棵桦走到了一起。从此,在长白山那片泥土上便多了一首诗,多了一道永恒的风景。...
    倚剑白云天阅读 197评论 0 0