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

【问题标题】：JavaScript: Distinguish between a Form Property and a Form FieldJavaScript：区分表单属性和表单字段
【发布时间】：2017-06-22 23:47:58
【问题描述】：

给定一个简单的形式：

<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 用于实际属性。

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

补充一下，如果我有一个与属性名称相同的表单字段（例如上面的id），哪个优先？

【问题讨论】：

data['action'] 和 data.action 完全一样
不清楚您要确定和实现的目标是什么？
@guest271314 在 JavaScript 中如何判断 form['item'] 是字段还是另一个属性？
item 不是 form 或 input 元素的属性。给定问题的html，data.info 和data.id 通过name 属性设置在name 属性html 选择元素。
“表单域”是指 HTML 中的属性吗？它们是独立的事物，并非所有属性值在更改时都会反映在属性中。使用点或方括号表示法访问属性将始终返回属性值。要获取属性值，请使用getAttribute('value')。

标签： javascript html forms properties field

【解决方案1】：

好的，我有答案了。

对于data['id'] 或data.id，表单字段优先于表单属性。这可能会有问题，因此使用form.getAttribute('id') 可能更安全。
由于混淆，最好始终使用data.elements。 only 包含表单的元素，所以这很简单。

【讨论】：

【解决方案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 树）

【讨论】：

【解决方案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
}

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

所以底线是始终为不与标准表单属性名称冲突的表单控件使用合理的名称，然后您可以从名称中判断它是表单属性还是控件名称。一种方案是始终使用驼峰式大小写和两个单词名称，因此不要使用“name”，而是使用“userName”或“employeeName”等。对于提交按钮，使用“submitButton”，对于重置，使用“resetButton”，虽然它是不常用来命名它们。

【讨论】：