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

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

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

Answer 1

好的，我有答案。

对于data['id']或data.id，表单字段优先于表单属性。这可能会有问题，因此使用form.getAttribute('id')安全可能会更安全。
由于混淆，最好始终使用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

你的问题是

输出是否为表格＆＃34; id的属性？或者＆＃34;孩子节点/对象名为id＆＃34;
哪一个优先

输出将是名为＆＃34; id＆＃34;的节点/对象。而不是表单的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 引用了提交按钮，而不是方法。

您可以考虑使用ducktyping，所以：

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
}

但通常你对表单的属性有足够的了解（例如，通过对控件和属性使用合适的命名约定，并避免使用已知的标准表单属性，例如＆＃34;提交＆＃34;，＆＃34;重置＆＃34 ;，＆＃34;行动＆＃34;，＆＃34;名称＆＃34;等）不必这样做。

因此，底线始终使用不与标准表单属性名称冲突的表单控件的合理名称，然后您可以从名称中判断它是表单属性还是控件名称。一种方案是始终使用驼峰案例和两个单词名称，而不是＆＃34; name＆＃34;，使用＆＃34; userName＆＃34;或者＆＃34; employeeName＆＃34;等。对于提交按钮，使用＆＃34; submitButton＆＃34;，进行重置，使用＆＃34; resetButton＆＃34;，尽管命名它们并不常见

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

3 个答案: