javascript - 如何通过 getElementsByName 访问多个文本框

Question

我在html中编写了以下代码：

<input type="text" id="id_1" name="text_1">
<input type="text" id="id_2" name="text_2">
<input type="text" id="id_3" name="text_3">

在这里，我必须在 id 以“id”开头的 javascript 函数的数组中获取所有文本框。所以，我可以得到一个数组中的两个文本框。

如何获取 id 以“id”开头的所有文本框？

Answer 1

var nodeList = document.querySelector("input[name^='text_'")

一个 nodeList 应该足够像一个数组来满足您的目的。

请注意，支持querySelector可能不足以满足您的目的（您需要getElementsByTagName在循环中过滤结果）。

或者，您可以使用提供自己的选择器引擎的库。在 YUI 3 中，您可以：

var listOfYUIObjects = Y.all("input[name^='text_'");

Mootools、Prototype、jQuery 和许多其他库提供了类似的功能。

Answer 2

var ele = document.getElementsByTagName("input");
var matchingEle = [];
var eleName = '';

for (var i = 0; i < ele.length; ++i) {
 el = ele[i];
 eleName = el.getAttribute("name");
 if (eleName && eleName.indexOf("text_") == 0) {
     matchingEle.push(el);
 }
}

Answer 3

var list = document.getElementsByTagName('input');  //Array containing all the input controls
var textBoxArray = [];                              //target Array
for (var i = 0; i < list.length; i++) 
{
    var node = list[i];

    if (node.getAttribute('type') == 'text' &&  node.getAttribute("id").substring(0, 1) == "id") 
    {
     /*
          insert matching textboxes into target array
     */
      textBoxArray.push(node);
    }
} 

Answer 4

您可以使用基于模式过滤元素列表的通用函数。如果您想在将来做类似的事情但对属性有不同的标准，这很有用。

http://jsfiddle.net/3ZKkh/

function filter(elements, pattern) {
    var i, j, match, e, f = [];

    for (i = 0; i < elements.length; i += 1) {
        e = elements[i];
        match = true;

        for (j in pattern) {
            if (pattern.hasOwnProperty(j)) {
                if (!(j in e && pattern[j](e[j]))) {
                    match = false;
                    break;
                }
            }
        }

        if (match) {
            f.push(e);
        }
    }

    return f;
}

var pattern = {
    'type': function (t) {
        return t.toLowerCase() === 'text';
    },
    'name': function (t) {
        return t.toLowerCase().search('text') === 0;
    }
};

console.log(filter(document.getElementsByTagName("input"), pattern));