JavaScript 按名称获取元素

IT技术 javascript html dom
2021-01-17 14:24:22

考虑这个函数：

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>

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

6个回答

您看到该错误的原因是document.getElementsByName返回 a NodeListof 元素。而 a NodeListof 元素没有.value属性。

改用这个：

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

请注意此方法中的复数形式：

document.getElementsByName()

这将返回一个元素数组，因此使用 [0] 来获取第一次出现，例如

document.getElementsByName()[0]
它不是一个数组，它是一个 NodeList :-)
2021-03-21 14:24:22
@FlorianMargaine - 实际上它是一个HTMLCollection ;)
2021-03-23 14:24:22
数组的定义是什么，这有什么不同？NodeList 只是一个用一些方便的方法包裹在 HTMLElements 数组周围的对象。无论如何，用通俗的话说就是OP，我说的是一个数组。
2021-03-25 14:24:22
一个数组比一个 NodeList 有更多的方法。的NodeList需要从阵列的一些方法/属性，如length财产，但它也缺少了很多的方法，比如map，forEach等这解释了为什么我们需要使用：Array.prototype.forEach.call( NodeList, fn )。
2021-03-26 14:24:22
@j08691不:) 但很容易混淆:p
2021-04-13 14:24:22

你要这个：

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

    alert (acc);
}
我正在给你一个补充:) 在 OP 中没有一个更高的答案以相同的格式形成它
2021-04-02 14:24:22
感谢您在回答中使用 OP 的示例。
2021-04-03 14:24:22
@KrisBoyd，不同之处在于我从getElementsByName. 也许我应该把它说得更清楚——如果你愿意，可以随意编辑。
2021-04-04 14:24:22

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

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

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

document.getElementsByName('acc')[0].value
它不是一个数组，它是一个 NodeList :-)
2021-03-22 14:24:22
其它你可能感兴趣的问题
上一篇JavaScript/jQuery 检查损坏的链接 下一篇sessionStorage 和 localStorage 的范围