使用javascript动态编辑多个相同的HTML表单

我正在建立一个小网页，它将用于控制一组带有预定义设置动作的RGB LED。要以图形方式配置操作，使用一个表单，其中包含开始和结束像素、相关颜色信息以及要使用的设置操作

（顺便说一句，表单是不提交的，因此如果另一种结构可以更好地工作，那么可以使用它。表单支持

name

，因此这至少对其中的一部分有所帮助。Javascript将表单中的数据解析为JSON文件，稍后随AJAX一起发送。我已经大致了解了这一点，但有些部分我要提出的问题是，试图以一种简单的方式一次读取所有表单中的数据会使事情变得复杂。）

每个表单都有一些操作（

onChange

选择该操作的下拉列表，或“删除”按钮），这些操作应该只影响该表单（或其中的一部分）。还应该有一种方法可以一次获取所有表单并提取要发送到服务器的数据（使用

name

可以很好地工作，因为数据安全地包含在表单可访问的元素中）

我也无法使用像JQuery这样的帮助程序库，因为没有Internet访问。所有代码都必须托管在服务器上，而且空间非常小（托管它的是一个嵌入式处理器）。我现在不想添加40KB的JQuery

我遇到的问题是，我需要更改标签文本，并根据选择的选项显示或隐藏元素

例如，一种颜色只需要一个颜色输入标记，而线性淡入需要两个。其他颜色不需要颜色，因为它们对现有的颜色模式执行操作

使用

表单

可以通过查找表单as_JS_var.elements.name来访问设置了

name

属性的内容。遗憾的是，这对原始HTML或

span

s或表单特定元素以外的任何内容都不起作用。我还发现

document.getElementById（）除了
文档
（如果到目前为止还不清楚，我对HTML和JS有点陌生）之外，我没有一个等价物。我一直希望做一些像.getElementById（“color1”）之类的事情（为了简单起见，我可以使用相同的标签，只要它们没有在每个表单中重复使用，但事后看来这有点愚蠢）。无论哪种方式，我都需要确保每个添加的表单都包含多个全局唯一ID，并且当受影响的项目和触发更改的项目处于同一表单时，以某种方式查找ID

我确实发现了
标签
标记，但它（出于某种莫名其妙的原因）绑定到ID而不是名称（使用JS设置确实很烦人，但那是另一回事）。因此，我仍然坚持使用从
文档
访问的全局唯一ID，而不是任何形式的本地方法

我想使用的HTML表单如下所示：

<form id="color_form_0" class="color_form">
  <fieldset>
    <legend id="legend_0">New Control Entry</legend>
    <label for="legend_0">Type: </label>
      <select name="type" id="type_0">
        <option value="rainbow">Rainbow Pattern</option>
        <option value="repeat">Clone Fill</option>
        <option value="fade">Linear Fade</option>
        <option value="fill">Single Color</option>
        <option value="rotate">Animation</option>
      </select>
    <label for="color1_0">Color 1: </label>
      <input type="color" name="color1" id="color1_0">
    <label for="color2_0">Color 2: </label>
      <input type="color" name="color2" id="color2_0">
    <br>
    <label for="range1_0">Range Start: </label>
      <input type="number" max="80" min="0" id="range1_0">
    <label for="range2_0">Range End: </label>
      <input type="number" max="80" min="0" id="range2_0">
  </fieldset>
</form>


新控制项
类型：
彩虹图案
克隆填充
线性衰减
单色
动画
颜色1：
颜色2：


范围开始：
范围结束：

注意，其中很多都需要唯一的ID（添加了#部分）。我必须有标签的GUID才能正确访问它们（没有ID会使标签无法访问，非唯一ID会使所有标签平等地绑定到具有该ID的每个项目（跨表单））。我还必须有一个ID才能更改图例标记的名称（应进行更改以匹配当前选定的类型

我希望能够做到的是：

<form>
  <button onclick="doStuff()">foo</button>
  <some_tag_here>
</form>


福

doStuff中的Javascript基本上是这样的（可能不精确；读作伪代码）：

函数doStuff（b）{
var par=b.parentNode；
var otherTag=par.somehowgetothertagperhapsbynonuniqueidorclassname可能也会工作（）；
otherTag.innerHtml=“成功！！！”；

相反，我可以通过
名称
访问某些项目，但不是我需要更改的全部内容，而且
标签
标记虽然一开始看起来非常适合，但无论如何都必须具有唯一的ID。
name
方法确实允许这种树遍历，但它并不完美。我的另一个想法是childNode，它是一个数组，我不确定如何搜索需要修改的一个（或多个）节点，并且可能假设其中已经有某种标识符……就像Id一样

TL；DR:

我正在尝试编辑按钮（或其他元素）触发功能的表单中的项目。有多个表单，我不想影响其他表单。我可以捕获
此
，并获取包含我要编辑的内容的按钮（基本上是表单）的父项

我不知道如何有效地或简单地更改表单中非表单特定元素的任何内容（即更改告诉用户某些内容的简单文本）。到目前为止，我找到的所有解决方案都需要进行全局范围的查找，这要求多个表单中的每个表单在每个元素或那些
标签
-ed上都有唯一的ID，并且当数据就在查找它的元素附近时，我会感到效率低下

后者假设document.getElementByX比假设的getParent.getChild类型的操作（这是我想要做的）更昂贵，但是为了避免在编码时遇到麻烦，即使不是这样，也最好使用更局部的方法。
使用
querySelector（）
方法，它可以应用于容器并在该容器内搜索


函数doStuff（b）{
var par=b.parentNode；
var otherTag=部分查询选择器（“div”）；
otherTag.innerHTML=“成功！！！”；
}

福
ID在应用程序中应该是唯一的
function doStuff(b){
  var par=b.parentNode;
  var otherTag=par.SomeHowGetOtherTagPerhapsByNonUniqueIdOrClassNameMightAlsoWork();
  otherTag.innerHtml="<blink>Success!!!</blink>";