最佳实践:通过HTML id或name属性访问表单元素?

2020/11/17 01:22 · javascript ·  · 0评论

正如任何经验丰富的JavaScript开发人员所知道的,有很多(太多)的方法可以完成相同的事情。例如,假设您有一个文本字段,如下所示:

<form name="myForm">  
    <input type="text" name="foo" id="foo" />

有很多方法可以使用JavaScript进行访问:

[1]  document.forms[0].elements[0];
[2]  document.myForm.foo;
[3]  document.getElementById('foo');
[4]  document.getElementById('myForm').foo;
     ... and so on ...

方法[1]和[3]在Mozilla Gecko文档中有详细记录,但都不理想。[1]太笼统而无用,[3]需要ID和名称(假设您将数据发布到服务器端语言)。理想情况下,最好只具有一个id属性或一个name属性(两者都有些多余,特别是如果id对于任何CSS都不是必需的,并且会增加输入错误的可能性等)。

[2]似乎是最直观的方法,并且似乎已被广泛使用,但是我没有在Gecko文档中看到它,而且我担心向前兼容性和跨浏览器兼容性(当然,我想成为尽可能符合标准)。

那么,这里的最佳实践是什么?任何人都可以指出DOM文档或W3C规范中可以解决此问题的内容吗?

请注意,我对非库解决方案(jQuery / Prototype)特别感兴趣。

仅给您的表单一个ID,并仅输入一个名称

<form id="myform">
  <input type="text" name="foo">

然后,最符合标准和最少问题的访问输入元素的方法是通过:

document.getElementById("myform").elements["foo"]

使用.elements["foo"]而不是just.foo是更可取的,因为后者可能返回名为“ foo”的形式的属性,而不是HTML元素!

[1] document.forms [0] .elements [0];

当我看到这种元素访问方法时,就会想到No-omg-never! ”。问题在于,它假定DOM是普通数据结构(例如:数组),其中元素顺序无论如何都是静态,一致或可靠的。我们知道有99.9999%的时间不是这种情况。在此代码中断的所有情况下,都对表单input内的元素元素进行重新排序form在有问题的表单之前在页面中添加另一个元素或移动有问题的表单。简短的故事:这非常脆弱。一旦添加或移动某些内容,它就会崩溃。

[2] document.myForm.foo;

我与有关的谢尔盖·伊林斯基Sergey ILinsky)

  • 通过引用任意元素的id属性来访问它们document.getElementById("myform");
  • 通过名称访问命名表单元素,相对于其父表单元素: document.getElementById("myform").foo;

我使用此方法的主要问题是,将name属性应用于表单时是无用的。该名称不会作为POST / GET的一部分传递给服务器,并且不适用于哈希样式书签。

[3] document.getElementById('foo');

我认为这是最可取的方法。直接访问是最简洁明了的方法。

[4] document.getElementById('myForm')。foo;

我认为这是可以接受的,但比必要的更为冗长。方法3是可取的。


我碰巧看了道格拉斯·克罗克福德(Douglas Crockford)视频,他就这个话题进行了探讨。兴趣点是在-12:00。总结一下:

  • 文档集合(document.anchor,document.form等)已过时且不相关(方法1)。
  • name属性用于命名事物,而不是访问它们。它用于命名窗口,输入字段和锚标记之类的东西。
  • “ ID是用来唯一标识元素以便可以访问它的东西。它们(名称和ID)以前是可以互换的,但现在不再可用。”

所以你有它。从语义上讲,这是最有意义的。

要访问放置在表单中的命名元素,优良作法是使用form对象本身。

要访问DOM树中有时可能在表单中找到的任意元素,请使用getElementById和元素的id

我非常喜欢第五种方法。也就是

[5]使用特殊的JavaScript标识符
将此表单或字段对象从事件处理程序传递给函数。

具体来说,对于表格:

<form id="form1" name="form1" onsubmit="return validateForm(this)">

// The form validation function takes the form object as the input parameter
function validateForm(thisForm) {
  if (thisform.fullname.value !=...

使用这种技术,函数将永远
不必
知道


-页面中定义表单的顺序

-表单ID或

-表单名称

同样,对于字段:

<input type="text" name="maxWeight">
...
<input type="text" name="item1Weight" onchange="return checkWeight(this)">
<input type="text" name="item2Weight" onchange="return checkWeight(this)">

function checkWeight(theField) {
  if (theField.value > theField.form.maxWeight.value) {
    alert ("The weight value " + theField.value + " is larger than the limit");
    return false;
  }
return true;
}

在这种情况下,尽管函数确实需要知道重量限制字段的名称,但它永远不必知道特定重量字段的名称或ID。

它并没有真正回答您的问题,而只是在这一部分上:

[3]同时需要一个id和一个名称...两者都有些多余

id无论如何,您很可能需要在每个表单字段上都有一个属性,以便可以将其<label>元素与其关联,如下所示:

<label for="foo">Foo:</label>
<input type="text" name="foo" id="foo" />

这是可访问性所必需的(即,如果您不与表单标签和控件相关联,那么为什么您那么讨厌盲人?)。

这有点多余,但是当您具有复选框/单选按钮(其中几个可以共享一个)时,则显得有些多余name最终,即使它们经常设置为相同的值,它们idname有不同的用途。

这有点旧,但是我想添加一个我认为相关的东西。

(我的意思是评论对上述一个或2个线程,但它似乎我需要的声誉50和我只有当时21我在写这一点。:))


只想说,有些时候它好得多的访问表单的元素按名称而不是ID。
我不是在谈论表格本身。表单,确定,您可以为其指定一个ID,然后通过它进行访问。但是,如果您在表单中有一个单选按钮,则将其作为单个对象使用(获取和设置其值)要容易得多,据我所知,只能按名称进行此操作。


例:

<form id="mainForm" name="mainForm">
    <input type="radio" name="R1" value="V1">choice 1<br/>
    <input type="radio" name="R1" value="V2">choice 2<br/>
    <input type="radio" name="R1" value="V3">choice 3
</form>

您可以通过使用

document.mainForm.R1.value




document.getElementById(“ mainForm”)。R1.value
来获取/设置单选按钮R1的整体检查值,


因此,如果要使用单一样式,可以希望始终使用此方法,而不管表单元素的类型如何。
我,我非常习惯按名称访问单选按钮,按ID访问文本框。

老式的我一直使用'document.myform.myvar'语法,但是最近我发现它在Chrome中失败(Firefox和IE中的OK)。这是一个Ajax页面(即加载到div的innerHTML属性中)。也许Chrome无法将表单识别为主要文档的元素。我改用了getElementById(不引用表单),它工作正常。

只是为了增加已经说过的内容,您可以使用最好使用Object形式属性来访问inputs ,因为如果没有它,您可能会获得名为“ foo”的形式的属性,而不是HTML元素。根据@Paul D. Waite的说法,同时具有名称和ID是完全可以的。nameidelements

var myForm = document.getElementById("myform")
console.log(myForm.foo.value) // hey
console.log(myForm.foo2.value) // hey
//preferable
console.log(myForm.elements.foo.value) // hey
console.log(myForm.elements.foo2.value) // hey
<form id="myform">
  <input type="text" name="foo" id="foo2" value="hey">
</form>

根据HTMLFormElement.elements页面上的MDN

HTMLFormElement属性元素返回一个HTMLFormControlsCollection,其中列出了该元素中包含的所有表单控件。独立地,您可以使用length属性仅获取表单控件的数量。

您可以使用索引或元素的名称id来访问返回的集合中的特定表单控件

name领域运作良好。它提供了对的引用elements

parent.children-将列出所有带有父级名称字段的元素。
parent.elements-仅列出form elements诸如input-text, text-area, etc

var form = document.getElementById('form-1');
console.log(form.children.firstname)
console.log(form.elements.firstname)
console.log(form.elements.progressBar); // undefined
console.log(form.children.progressBar);
console.log(form.elements.submit); // undefined
<form id="form-1">
  <input type="text" name="firstname" />
  <input type="file" name="file" />
  <progress name="progressBar" value="20" min="0" max="100" />
  <textarea name="address"></textarea>
  <input type="submit" name="submit" />
</form>

注意:.elements要正常工作,parent需要设置<form> tag而,.children将适用于HTML-element- <div>, <span>, etc

祝好运...

表格2可以,建议使用表格3。

名称和ID之间的冗余是由于需要保持兼容性而引起的,在html 5上,某些元素(如img,form,iframe等)将失去其“名称”属性,建议从现在开始仅使用其id来引用它们上 :)

为了补充其他答案,document.myForm.foo是所谓的DOM级别0,这是Netscape实施的方式,因此即使大多数浏览器都支持,它也不是一个开放标准。

签出此页面:https : //developer.mozilla.org/En/DOM/Document.getElementsByName

document.getElementsByName('foo')[0]; // returns you element.

它必须是“元素”,并且必须返回一个数组,因为多个元素可能具有相同的名称。

我的答案在确切的问题上会有所不同。如果我想专门访问某个元素,那么我将使用document.getElementById()。一个例子是计算一个人的全名,因为它基于多个字段,但这是一个可重复的公式。

如果我想作为功能结构(表单)的一部分访问元素,那么我将使用:

var frm = document.getElementById('frm_name');
for(var i = 0; i < frm.elements.length;i++){
   ..frm.elements[i]..

从业务的角度来看,这也是它的工作方式。循环内的更改与应用程序中的功能更改一起进行,因此有意义。我主要将其应用于用户友好的验证并防止网络调用检查错误的数据。我重复验证服务器端(并向其中添加更多内容),但是如果我可以帮助用户客户端,那么这对所有人都有益。

对于数据聚合(例如根据表单中的数据构建饼图),我使用配置文档和定制的Javascript对象。然后,相对于其上下文而言,该字段的确切含义很重要,我是否使用document.getElementById()。

我喜欢这个

document.forms['idOfTheForm'].nameOfTheInputFiled.value;

因为案例[2]document.myForm.foo是Internet Exploere的方言。因此,我宁愿选择document.forms.myForm.elements.foo还是代替document.forms["myForm"].elements["foo"]

本文地址:http://javascript.askforanswer.com/zuijiashijiantongguohtml-idhuonameshuxingfangwenbiaodanyuansu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!