Question

如何使用纯/本机Javascript获取或扫描不同输入标记名称的元素？这里有第一个，中间名和姓，地址和生日的5个输入。但我只想获得特定的输入标签，并使用alert或msgbox显示它。见下文......

这里是html标签：

<form name="test">
<tr>
        <td bgcolor="#e9e9e9"><input type="text" name="FIELD_01_01_FIRSTNAME" size="15" maxlength="60"></td>
        <td bgcolor="#e9e9e9"><input type="text" name="FIELD_01_02_MIDDLENAME" size="15" maxlength="60"></td>
        <td align="left" bgcolor="#e9e9e9"><input type="text" name="FIELD_01_03_LASTNAME" size="15" maxlength="60"></td>
      </tr>
      <tr>
        <td colspan="3" bgcolor="#e9e9e9"><input type="text" name="FIELD_01_07_ADDRESS1" size="50" value="" maxlength="200"></td>
        <td align="left" bgcolor="#e9e9e9"><input name="FIELD_01_04_BDAY" type="text" size="15" maxlength="15"></td>
      </tr>
       </form>

Answer 1

有几种方式：

var list = document.querySelector("input");
var list = document.querySelectorAll("input")[0];
var list = document.getElementsByTagName("input")[0];

附录...

querySelector更灵活，因为它可以使用任何有效的css选择器（很像jQuery）。如果您需要获取具有特定名称的输入元素，这非常方便：

var firstName = document.querySelector("input[name='firstName']");

var namedInputs = document.querySelectorAll("input[name]");

第二次编辑......

如果您不想输入太多内容，可以为querySelector创建别名：

window.get = document.querySelector.bind(document);

var firstname = get("[name='FIELD_01_01_FIRSTNAME']").value;
var lastname = get("[name='FIELD_01_02_MIDDLENAME']").value;
//etc...

第3次编辑......

如果你的元素在<form>中，你可以使用表格的名称+ dom导航的输入名称：

HTML
<form name='test">
    <input type="text" name="firstName" value="James" />
</form>


//javascript
alert( test.firstName.value );

因此，通过这种方式，您也可以像这样访问您的输入：

var fname = test.FIELD_01_01_FIRSTNAME.value;
var lname = test.FIELD_01_02_MIDDLENAME.value;
//etc....

如果你想看一个这种方法的演示，试试这个小提琴： http://jsfiddle.net/axj6vrwb/1/

这里需要注意的是，您没有名为test的局部变量。如果您想明确引用全球test，则可以改为使用window.test。

Answer 2

很多答案都在看标签，但这是另一种方法。如果元素是一个表单，它们也可以作为表单的命名属性和 elements 集合中的元素，例如。

<form id="f0">
  <table>
    <tr>
      <td><input type="text" name="FIELD_01_01_FIRSTNAME"></td>
      <td><input type="text" name="FIELD_01_02_MIDDLENAME"></td>
      <td><input type="text" name="FIELD_01_03_LASTNAME"></td>
    </tr>
    <tr>
      <td><input type="text" name="FIELD_01_07_ADDRESS1"></td>
      <td><input name="FIELD_01_04_BDAY" type="text"></td>
    </tr>
  </table>
</form>

然后你可以通过首先获取表单来获得表单中的所有控件（以下每个都是等效的）：

var form = document.getElementById('f0');  // or
var form = document.forms[0];              // or
var form = document.forms.f0;

然后按名称获取控件：

var firstName = form.FIELD_01_01_FIRSTNAME.value;    // or
var firstName = form['FIELD_01_01_FIRSTNAME'].value;

请注意，如果两个或多个控件具有相同的名称，则上述控件将返回HTMLCollection个控件。

使用元素：

var allControls = form.elements;

Answer 3

document.getElementsByTagName('YOUR_NAME_HERE')[0]

应该能够为你获取元素。

Answer 4

这个问题确实可以使用如此重新措辞/更多解释为什么要做。

document.querySelectorAll('input[name]');

这将选择具有name属性的所有输入元素，然后可以迭代它。

或

 document.getElementsByTagName('input')[0].getAttribute('name');

会为您提供特定输入元素的标记名称。

但如上所述，不理解这个问题，我不确定这有什么帮助。

Answer 5

将所有输入的CSS选择器放在以逗号分隔的字符串中并运行querySelectorAll：

document.querySelectorAll('[name="FIELD_01_01_FIRSTNAME"], [name="FIELD_01_02_MIDDLENAME"]');

等

Answer 6

var elements = document.getElementsByTagName(name);

返回具有给定标记名称的元素的HTMLCollection。搜索完整文档，包括根节点。返回的HTMLCollection是实时的，这意味着它会自动更新以与DOM树保持同步，而无需再次调用document.getElementsByTagName（）。

有关详细信息，请访问：document.getElementsByTagName (developer.mozilla.org)

Answer 7

var elements = document.getElementsByTagName(TagName);

如何使用纯/本机javascript按名称html标签获取元素？

7 个答案:

附录...

第二次编辑......

第3次编辑......