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

Question

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

我正在尝试在我的项目中实现这个扩展表单功能。但是无法找到字段名称(控制台日志返回“未定义”)，直到我将输入字段放在 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 仅返回直接子节点。它只会在 top 级别找到具有 name 属性的元素。要根据需要查找所有具有名称的后代元素，请尝试

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

要点:

1. 虽然在这种情况下您不需要使用任何一个，但您应该使用 .children 而不是 .childNodes。后者将访问空白节点，这不会造成任何伤害，但这不是您想要的。

2. 您在 if (theName) 语句的主体周围缺少括号，这意味着每次循环都会执行 console.log，即使是空白节点也是如此被访问。为避免此类问题，请将您的编辑器设置为缩进属性，和/或在您的代码中运行 linter。

   if (theName) {
       newField[i].name = "data[Student][" + counter + "][" + theName + "]";
       console.log(newField[i].name);
   }
   

3. 我建议您更清楚地命名您的变量。您有一个名为 newFields 的变量，它是一个跨度，还有一个名为 newField 的变量，它是一个字段集合。