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">

这里我必须在javascript函数中将所有textBox放在一个数组中，其id以“id”开头。所以，我可以在数组中获得两个textBox。

如何获取id以“id”开头的所有textBox？

Answer 1

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

对于您的目的，nodeList应该足够像一个数组。

请注意support for 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));

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

4 个答案: