JavaScript 按名称获取元素答案

【问题标题】：JavaScript get element by nameJavaScript 按名称获取元素
【发布时间】：2012-05-05 13:47:46
【问题描述】：

考虑这个函数：

function validate()
{
  var acc = document.getElementsByName('acc').value;
  var pass = document.getElementsByName('pass').value;

  alert (acc);
}

还有这个 HTML 部分：

<table border="0" cellpadding="2" cellspacing="0" valign="top">
    <tr>
        <td class="td1">Account</td>
        <td class="td2"><input type="text" name="acc" /></td>
    </tr>
    <tr class="td1">
        <td>Password</td>
        <td class="td2"><input type="password" name="pass" /></td>
    </tr>
</table>
<div><button onClick="validate()" class="cupid-greenx">Login now</button></div>

警告框正在显示，但它显示“未定义”。

【问题讨论】：

如果您可以完全更改它，我建议您在两个输入字段中添加一个字段“id”，并使用document.getElementById，它只返回一个值。
更好的是：var inputs = document.getElementsByTagName('input')，返回一个节点列表，您可以从中提取两个元素，如下所示：var pass = inputs.item('pass')。只是一个提示，如果你正在处理一个大 DOM，这可以加快速度，因为 getElementById 每次都会搜索整个树，而节点列表不会，所以它更快......
确实是小可爱XD

标签： javascript html dom

【解决方案1】：

您看到该错误的原因是 document.getElementsByName 返回了 NodeList 的元素。并且 NodeList 的元素没有 .value 属性。

改用这个：

document.getElementsByName("acc")[0].value

【讨论】：

【解决方案2】：

你想要这个：

function validate() {
    var acc = document.getElementsByName('acc')[0].value;
    var pass = document.getElementsByName('pass')[0].value;

    alert (acc);
}

【讨论】：

感谢您在回答中使用 OP 的示例。
@KrisBoyd，不同之处在于我从getElementsByName 返回的数组中获取第一个元素。也许我应该说得更清楚——如果你愿意，可以随意编辑。
我给你一个补充 :) 在 OP 中没有一个更高的答案以相同的格式形成

【解决方案3】：

document.getElementsByName("myInput")[0].value;

【讨论】：

明确一点：这是从 NodeList 中获取一个元素。 :)

【解决方案4】：

注意这个方法中的复数：

document.getElementsByName()

返回一个元素数组，所以使用 [0] 来获取第一次出现，例如

document.getElementsByName()[0]

【讨论】：

它不是一个数组，它是一个 NodeList :-)
@FlorianMargaine - 实际上是HTMLCollection ;)
@j08691 nope :) 但很容易混淆 :p
数组的定义是什么，这有什么不同？ NodeList 只是一个包裹在 HTMLElements 数组中的对象，带有一些方便的方法。无论如何，用外行的话来说，我说的是一个数组。
数组比 NodeList 有更多的方法。 NodeList 从数组中获取一些方法/属性，例如 length 属性，但它也缺少很多方法，例如 map、forEach 等。这就解释了为什么我们需要使用：Array.prototype.forEach.call( NodeList, fn ).

【解决方案5】：

方法 document.getElementsByName 返回一个元素数组。例如，您应该先选择。

document.getElementsByName('acc')[0].value

【讨论】：

它不是一个数组，它是一个 NodeList :-)

【解决方案6】：

这里的所有答案似乎都已过时。请立即使用：

document.querySelector("[name='acc']");
document.querySelector("[name='pass']")

【讨论】：

【解决方案7】：

为了完整起见，阅读本文的其他人对安全网有很好的了解，尤其是在无法保证获得所需元素的情况下，您可以测试缺失值，使用 null 合并来设置默认值：

const accElements = document.getElementsByName('acc');
const accElement = accElements[0] ?? null; // Or some other value
if (!accElement) {
    // handle the problem
}

当它是连接对象时使用Optional chaining（而不是返回数组/节点）：

const acc = document.getElementById('acc')?.value ?? null; // Or some other value

另外，虽然name 属性有时是所有可用的属性，但请尽量使用id，因为它们更有可能是独一无二的。假设您想要的元素在结果索引 0 ([0]) 中通常是安全的，但最好检查并确定。只需几行代码（可能还有一些日志记录），您就可以为您的最终用户避免出现问题的麻烦。

【讨论】：