6

如何仅使用javascript获取名称属性以特定值结尾的输入元素?

我发现这个$('input[name$="value"]')方法在jQuery中可用。

javascript中是否有类似的功能?由于某种原因,我不能使用 jQuery。

4

4 回答 4

24

我很惊讶没有人提到这一点。你有没有尝试过:

var elements = document.querySelectorAll('input[name$="value"]');

这仅在浏览器支持该querySelectorAll方法时才有效,但如果找到支持,它就是 jQuery 在下面使用的。

下表列出了该方法的浏览器支持:

什么时候可以使用 querySelector/querySelectorAll?

于 2012-04-26T14:16:54.727 回答
3

你可以这样做:

console.log(document.getElementsByName("value")[0]);

或者,如果您想查找input名称中包含“值”的第一个元素:

var searchString = "value";
var elems = document.getElementsByTagName('input'), wantedElem;

for(var i = 0, len = elems.length; i < len; i++) {
    if(elems[i].name.lastIndexOf(searchString) == elems[i].name.length-searchString.length) {
        wantedElem = elems[i];
        break;
    }
}

console.log(wantedElem);
于 2012-04-26T14:13:51.880 回答
3

我将假设您已将这些<input>元素放置在它们所属的位置(在<form>元素中)。

通过 DOM API 遍历表单控件的最简单方法是通过. 它允许命名遍历,这对于特定元素非常方便。HTMLFormElement::elements HTMLCollection

例如,考虑以下标记:

<form action="./" method="post" name="test"
    onsubmit="return false;">
    <fieldset>
        <legend>Test Controls</legend>
        <input name="control_one" type="text"
            value="One">
        <input name="control_two" type="text"
            value="Two">
        <input name="control_three" type="text"
            value="Three">
    </fieldset>
</form>

之后,需要一些简单的文档树遍历。这是它的全部内容:

var test = document.forms.test,
    controls = test.elements;

function traverseControl(control)
{
    var patt = /one$/,
        match = patt.test(control.name);
    if (match) {
        // do something
        console.log(control);
    }
}

function traverseControls(nodes)
{
    var index;
    if (typeof nodes === "object" &&
        nodes.length) {
        index = nodes.length - 1;
        while (index > -1) {
            traverseControl(
                nodes[index]
            );
            index -= 1;
        }
    }
}

traverseControls(controls);

正如你所看到的,这真的不是太难。使用HTMLCollections 的结果是支持新旧浏览器。由于HTMLCollections 是在 DOM 0 中实现的,因此它们得到了广泛的支持。

将来,我建议使用不那么模糊的遍历。如果您控制正在遍历的文档树(即您编写了标记),您应该已经知道name控件的 s。否则,必须使用像前面这样的模糊方法。

工作示例:http: //jsbin.com/epusow

更多内容,可以细读这篇文章。

于 2012-04-26T18:18:02.767 回答
-1

此方法返回一个元素数组

var elements = document.getElementsByName("value");
于 2012-04-26T14:13:44.883 回答