Question

http://www.quirksmode.org/dom/domform.html

我正在尝试在我的项目中实现此扩展表单功能。但是无法找到字段名称（控制台日志返回＆＃34;未定义＆＃34;），直到我将输入字段放在div之外并直接放在父span标记之下。我不确定如何定位和命名字段名称，因为我打算保留div。

HTML：

<span id="readroot" style="display: none">
  <input class="btn btn-default" type="button" value="Remove review"
   onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
  <br><br>
  <div class="row">
    <div class="col-lg-3">
      <div class="form-group required">
        <label for="Student1Age">Age</label>
        <input name="age" class="form-control" placeholder="Age"
         maxlength="11" type="text" id="Student1Age" required="required">
      </div> 
    </div>
    <div class="col-lg-3">  
      <div class="form-group required">
        <label for="Student1Grade">Grade</label>
        <select name="grade" class="form-control" id="Student1Grade" required="required">
          <option value="">Please Select</option>
          <option value="1">Grade 1</option>
          <option value="2">Grade 2</option>
        </select>
      </div>  
    </div>
  </div>
</span>
<span id="writeroot"></span>
<input class="btn btn-default" type="button" onclick="moreFields()"
 value="Give me more fields!">

使用Javascript：

var counter = 0;
function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name;
        if (theName)
            newField[i].name = "data[Student][" + counter + "][" + theName + "]";
            console.log(newField[i].name);
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

Answer 1

childNodes仅返回直接子女。它只会在顶部级别找到name属性的元素。要查找具有所需名称的所有后代元素，请尝试

var newField = newFields.querySelectorAll('[name]');

小点：

虽然在这种情况下您不需要使用其中任何一种，但您应使用.children代替.childNodes。后者将访问白色空间节点，它不会伤害任何东西，但不是你想要的。
if (theName)语句的主体周围缺少括号，这意味着每次循环时都会执行console.log，即使正在访问空白节点。要避免此类问题，请将编辑器设置为缩进属性，和/或在代码中运行linter。
```
if (theName) {
    newField[i].name = "data[Student][" + counter + "][" + theName + "]";
    console.log(newField[i].name);
}
```
我建议更清楚地命名变量。你有一个名为newFields的变量，它是一个单独的跨度，你有一个名为newField的变量，它是一个字段的集合。

childNodes方法找不到我的字段名称

1 个答案: