JavaScript：区分表单属性和表单字段

Question

给出一个简单的形式：

<form id="data" action="">
    <input type="text" name="id">
    <input type="text" name="info">
    <button type="submit" name="ok">
</form>

我可以读取属性和表单字段，如下所示：

var data=document.querySelector['form#data'];
alert(data.action);
alert(data['action']);
alert(data.info);
alert(data['info']);
alert(data['id']);
alert(data.id);

现在，在大多数情况下， form['info']是form.info的替代form.info 。 但是我更喜欢将form['info']用于表单字段，并将form.info用于实际属性。

问题是：在JavaScript中，如何确定form['info'] （或form.info ）是表单字段还是表单属性？ 我从上面的表格知道它，但是在不知道特定表格的情况下我怎么知道？

作为补充，如果我有一个与属性相同的表单字段（例如上面的id ），则优先使用？

Answer 1

好，我有答案。

1. 对于data['id']或data.id ，form字段优先于form属性。 这可能会出现问题，因此使用form.getAttribute('id')可能更安全。

2. 由于混淆，最好始终使用data.elements 。 只包含窗体的元素，所以这是很容易。

Answer 2

我将根据对您问题的理解回答该问题。

在您提供的代码中：

<form id="data" action="">
    <input type="text" name="id">
    <input type="text" name="info">
    <button type="submit" name="ok">
</form>

如果您执行查询选择器data=document.querySelector('form#data');

然后，如果您尝试访问data.id

您的问题是

• 输出将是“表单的id属性”还是“名为id的子节点/对象”

• 哪一个优先

输出将是名为“ id”的节点/对象，而不是表单的ID属性。 DOM的目的是遍历对象模型树，因此节点优先于属性/属性。

要知道返回的输出是否是属性：

• 属性返回一个文本。 那是终点。
• HTML元素返回一个对象（可以再次用于遍历DOM树）

Answer 3

我想我理解您的问题：如何确定表单属性是引用HTML表单元素的标准属性还是表单控件，例如：

<form name="formName">
  <input name="inputName">

以便：

form.name

是将返回字符串的形式的属性，而：

form.inputName

是将返回表单控件元素（或单选按钮的NodeList）的属性。

简短的答案是您不能仅仅使用名称，因为表单属性可以被同名的表单控件所掩盖，例如

<input type="submit" name="submit">

意味着您不能调用form.submit()因为现在form.submit引用了提交按钮，而不是方法。

您可能会考虑鸭嘴式，因此：

var thing = form.blah;
if (typeof thing == 'string' || typeof thing == 'function') {
   // probably a property of the form itself

} else if {thing == form[thing.name]) {
  // probably a form control
}

等等。 但是用javascript通常不是一个好主意，要查找要使用的功能（如果可用）就更好了。 假设您想获得价值：

if (form.blah && typeof form.blah.value == 'string') {
  // do stuff with form.blah.value
}

但是通常您对表单的属性了解得足够多（例如，通过对控件和属性使用适当的命名约定，并避免使用已知的标准表单属性，例如“提交”，“重置”，“动作”，“名称”等），不必这样做那。

因此，对于与标准表单属性名称不冲突的表单控件，最重要的是始终使用明智的名称，然后您可以从名称中分辨出它是表单属性还是控件名称。 一种方案是始终使用驼峰式大小写和两个单词名称，因此，不是“名称”，而是“ userName”或“ employeeName”等。对于提交按钮，请使用“ submitButton”，对于重置，请使用“ resetButton”，尽管命名它们并不常见。