时间戳

首页 > 解决方案 > JavaScript 通过指定表单和类名来更改输入值

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

问题描述

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

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

无济于事。一定有一些明显的东西我错过了，但是什么？

标签： javascripthtml

解决方案

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

并且，不要使用.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>

推荐阅读