javascript - jQuery 中 $('input[name$="value"]') 的 Javascript 等价物？

Question

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

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

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

Answer 1

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

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

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

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

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

Answer 2

你可以这样做：

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);

Answer 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

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

Answer 4

此方法返回一个元素数组

var elements = document.getElementsByName("value");