Question

对于<input type="text" id="vegs" name="fruits">，可以使用document.getElementbyId('vegs').value来获取文本框的输入。
但是，有没有一种方法可以使用name标签的<input>属性来获取输入？
document.getElementsbyName('fruits').value似乎无效。

Answer 1

document.getElementsByName返回一个NodeList（就像一个数组），因此您需要选择第一项。

可能有多个带有水果名称的输入。如果是这种情况，请像遍历数组一样遍历NodeList。

我为您制作了一个片段：

document.getElementById("button").addEventListener("click", () => {
  console.log(document.getElementsByName("fruits")[0].value);
});

<input type="text" id="vegs" name="fruits">
<button id="button">Click</button>

如果要使用多个具有相同名称的输入，可以使用下面的代码段。

这使用一个.forEach()循环来遍历Fruits数组（我知道它是一个NodeList，但可以将其视为一个数组。它具有非常相似的功能，并且将使这种方式的生活变得更加轻松）。

var fruits;

document.getElementById("button").addEventListener("click", () => {
  fruits = document.getElementsByName("fruits"); //fruits is now a NodeList
  fruits.forEach(element => {
    console.log(element.value);
  });
});

<input type="text" id="vegs" name="fruits">
<input type="text" id="vegs" name="fruits">
<input type="text" id="vegs" name="fruits">
<input type="text" id="vegs" name="fruits">
<button id="button">Click</button>

Answer 2

MDN:

getElementsByName（）：Document对象的方法返回文档中具有给定名称的元素的NodeList集合

您可以使用[0]

访问第一个元素

function change(){
  console.log(document.getElementsByName('fruits')[0].value)
}

<input type="text" onchange="change()" id="vegs" name="fruits">

Answer 3

这会做..

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

getElementsByName返回具有name =水果的元素数组。 [0]返回第一个元素，在您的情况下，这是唯一具有name = fruits的元素。

Answer 4

您也可以使用document.querySelector()。

function show_value() {
  var ret = document.querySelector("input[name='fruits']").value;
  console.log(ret);
}

<input type="text" id="vegs" name="fruits">
<button onclick="show_value()">Click</button>

使用getElementsByName时，请注意IE10及以下版本的行为。

getElementsByName方法在IE10及以下版本中的工作方式有所不同。在那里，getElementsByName（）还返回具有具有指定值的id属性的元素。请注意不要同时使用名称和ID相同的字符串。

通过使用名称而不是javascript中的ID获取输入类型文本的值

4 个答案: