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

Question

我正在构建一个小的网页，该网页将用于通过预定义的设置操作来控制一组RGB led。为了以图形方式配置操作，将使用一个包含开始和结束像素，相关颜色信息以及要使用的设置操作的表单。（顺便说一句，不提交表单，因此，如果其他结构更好用，则可以改用它。Forms support name，因此至少可以帮助其中的一些。Javascript将表单中的数据解析为JSON文件与AJAX稍后发送的。我已经得到了那大多是想通了，但有一些地方我要去哪里的问题，弹出复杂的事情，试图读出所有形式的数据一次在一个简单方式。）每个表单都有一些动作（onChange选择该动作的下拉菜单或删除按钮）仅影响该表单（或其一部分）。还应该有一种一次性获取所有表单并提取数据以发送到服务器的方法（name由于THAT数据安全地包含在表单可访问元素中，因此可以很好地工作）。我也无法使用JQuery之类的帮助程序库，因为无法访问Internet。所有代码都必须托管在服务器上，而且空间极小（托管它的是嵌入式处理器）。我现在不想添加40KB的Jquery。我遇到的问题是我需要更改标签文本并根据选择的选项显示或隐藏元素。例如，一种颜色只需要一个颜色输入标签，而线性淡入淡出则需要两个颜色标签。其他人则不需要颜色，因为它们会对现有的颜色模式执行操作。使用aform可以name通过查找form_as_JS_var.elements.name来访问具有属性集的事物。遗憾的是，这不适用于原始HTML或spans或除特定于表单的元素以外的任何其他内容。我还发现，document.getElementById()除了document（如果到目前为止还不很清楚，我对HTML和JS有点陌生）以外，它没有其他等效项。我一直希望做类似.getElementById（“ color1”）之类的事情（它可能会让我使用相同的标签以简化操作，只要它们不会以每种形式重复使用，但事后看来有点愚蠢）。无论哪种方式，我都需要确保每个添加的表单都包含多个全局唯一的ID，并且 以某种方式 当受影响的物料和触发更改的物料具有相同的形式时，请查找ID！我确实发现了该label标签，但是它（出于某些无法解释的原因）绑定到ID而不是名称（并且很烦人，无法使用JS进行设置，但这是另一回事了）。因此，我仍然坚持使用从全局访问的全局ID，document而不是从任何形式的本地表单方法访问。我要使用的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>请注意，其中很多都需要唯一的ID（添加了_＃部分）。我必须具有GUID才能使标签正确访问它们（没有ID使得标签不可访问，非唯一ID使它们全部均等地绑定到具有该ID的每个项目（跨表格））。我还必须有一个ID才能更改图例标签的名称（应该更改为与当前选择的Type相匹配。

Answer 1

使用该querySelector()方法，可以将其应用于容器并在该容器内搜索。

function doStuff(b){

  var par=b.parentNode;

  var otherTag=par.querySelector("div");

  otherTag.innerHTML="<span style='color: red;'>Success!!!</span>";

}

<form>

  <button type="button" onclick="doStuff(this)">foo</button>

  <div></div>

</form>