JavaScript通过名称获取元素

Question

考虑以下函数：

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>

警告框弹出了，但它显示的是 "undefined"。

- Kheorke

---

如果你可以彻底更改它，我建议在你的两个输入字段中添加一个“id”字段，并使用document.getElementById，它会返回精确的一个元素。 - Odi

更好的方式是：var inputs = document.getElementsByTagName('input')，它返回一个节点列表，你可以从中提取元素，例如：var pass = inputs.item('pass')。这是一个提示，如果你处理的是一个大型DOM，使用此方法可以加快速度，因为getElementById每次都会搜索整个树，而节点列表则不会，所以速度更快。 - Elias Van Ootegem

真是个可爱的小代码，哈哈哈 XD - Guillermo Gutiérrez

Answer 1

你看到这个错误的原因是因为 document.getElementsByName 返回一个元素的 NodeList ，而一个元素的 NodeList 没有 .value 属性。

请使用以下代码：

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

- Aidanc

Answer 2

这里所有的回答似乎都已经过时了。请现在使用以下内容：

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

- user11543803

Answer 3

注意这个方法中的复数形式：

document.getElementsByName()

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

document.getElementsByName()[0]

- Ozzy

---

这不是一个数组，而是一个NodeList :-) - Florian Margaine

@FlorianMargaine - 实际上这是一个 HTMLCollection ;) - j08691

@j08691 不是 :) 但很容易让人感到困惑 :p - Florian Margaine

什么是数组的定义，它与其他有何不同？NodeList只是一个包装在HTMLElement数组周围的对象，带有一些方便的方法。无论如何，为了让OP易于理解，我说了一个数组。 - Ozzy

一个数组比NodeList有更多的方法。 NodeList从数组中获取一些方法/属性，例如length属性，但它也缺少很多方法，例如map，forEach等。这就解释了为什么我们需要使用：Array.prototype.forEach.call(NodeList, fn)。 - Florian Margaine

Answer 4

你想要这个：

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

    alert (acc);
}

- Elliot Bonneville

---

感谢您在答案中使用 OP 的示例。 - Kris Boyd

@KrisBoyd，区别在于我正在从getElementsByName返回的数组中获取第一个元素。也许我应该更清楚地表达这一点--如果您愿意，可以进行编辑。 - Elliot Bonneville

我在赞美您 :) 没有更高级的答案与原帖以相同的格式形成。 - Kris Boyd

Answer 5

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

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

- dalazx

---

这不是一个数组，而是一个节点列表（NodeList） :-) - Florian Margaine

Answer 6

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

- Sam Battat

---

只是为了明确：这是从NodeList中获取一个元素。 :) - Christian Neverdal

Answer 7

为了完整起见，特别是在没有保证得到所需元素的情况下，您可以测试缺失的值，使用null coalesce来设置默认值，以便其他读者了解安全网的概念：

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

当连接的对象（而不是返回数组/节点）时，使用可选链：

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

此外，虽然有时只能使用name属性，但尽可能使用id，因为它们更有可能是唯一的。假设您想要的元素在结果索引0（[0]）中通常是安全的，但最好检查并确保。通过几行代码（可能带有一些日志记录），您可以避免您的最终用户出现问题。

- James

Answer 8

如果您有许多输入，可以尝试这个方法：

<input type="text" name="unitOfAttachService">
<input type="text" name="unitOfAttachService">
<input type="text" name="unitOfAttachService">

这行代码用于获取标签input的所有值

let unitOfAttachService =document.getElementsByName("unitOfAttachService");

这是如何从列表中取出并使用它的方法

for (let k = 0; k < unitOfAttachService .length; k++) {
  unitOfAttachService[k].value;}

- TRIPLE T