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

Question

对于<input type="text" id="vegs" name="fruits"> ，可以使用document.getElementbyId('vegs').value来获取文本框的输入。
但是，有没有一种方法可以使用<input>标记的name属性来获取输入？
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都使用相同的字符串。