JavaScript按名称获取元素


127

考虑以下功能:

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,它恰好返回一个值。
奥迪2012年

4
更好的是:var inputs = document.getElementsByTagName('input'),返回一个节点列表,您可以从中提取两个元素,如下所示:var pass = inputs.item('pass')。提示:如果您要处理大型DOM,这可以加快处理速度,getElementById每次都会搜索整棵树,而节点列表则不会,因此速度更快...
Elias Van Ootegem

可爱的小代码XD
GuillermoGutiérrez2014年

Answers:


246

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

使用此代替:

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

30

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

document.getElementsByName()

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

document.getElementsByName()[0]

8
这不是一个数组,而是一个NodeList :-)
Florian Margaine 2012年

1
@FlorianMargaine-实际上是HTMLCollection ;)
j08691 2012年

1
@ j08691 都能跟得上 :),但它可以很容易混淆:对
弗洛里安Margaine

数组的定义是什么?它有什么不同?NodeList只是一个对象,它通过一些便利的方法包裹在HTMLElements数组周围。无论如何,以OP的外行术语来说,我说了一个数组。
Ozzy 2012年

1
数组比NodeList具有更多的方法。的NodeList需要从阵列的一些方法/属性,如length财产,但它也缺少了很多的方法,比如mapforEach等这解释了为什么我们需要使用:Array.prototype.forEach.call( NodeList, fn )
Florian Margaine '04 -4-24

11

你要这个:

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

    alert (acc);
}

感谢您在回答中使用OP的示例。
克里斯·博伊德

@KrisBoyd,不同之处在于我正在从返回的数组中获取第一个元素getElementsByName。也许我应该说得更清楚-如果愿意,可以随时进行编辑。
Elliot Bonneville

我给您一个补充:)在OP中,没有一个更高的答案以相同的格式形成
Kris

6

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

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

4
这不是一个数组,而是一个NodeList :-)
Florian Margaine 2012年

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.