Question

我需要一种通过形式和类名引用输入框来更改其值的方法。给定一个看起来像这样的表格：

<form name="foo">
<input type="text" class="bar" value="someval" />
</form>

有没有一线解决方案？我已经尝试过一些事情，例如：

document.foo.getElementsByClassName('bar')[0].setAttribute("value", "newvalue");

还有

document.forms['foo'].getElementsByClassName('bar')[0].setAttribute("value", "newvalue");

无济于事。一定有明显的我想念的东西，但是呢？

Answer 1

这正是.querySelector()旨在提供帮助的内容。您可以向其传递任何有效的CSS选择器，它会返回与查询匹配的第一个元素；如果找不到匹配项，则返回undefined。

don't use .getElementsByClassName()或document.forms（以前），因为它们都是古老的技术，它们引入了主要的性能问题，或者是非现代的方法，其性能不如今天的API。

// Find the input element with a class of "bar" that is a direct child of a form with a name attribute of "foo"
document.querySelector("form[name='foo'] > input.bar").value = "blah"

<form name="foo">
  <input type="text" class="bar" value="someval" />
</form>

Answer 2

您可以使用类似

    while (true) {            
        if (++min == 60) {
            min = 0;
            ++hour;
            hour %= 24;
        }

如果您有多种形式，只需遍历document.forms并按类名获取值，使用querySelector或按ID选择适合您的任何形式即可。

希望这会有所帮助。

Answer 3

尝试一下：

<form>
    <input type="text" class="bar" value="someval" />
</form>

<script>
    document.getElementsByClassName("bar")[0].value = "newvalue";
</script>

JavaScript通过指定表单和类名来更改输入值

3 个答案: