childNodes方法找不到我的字段名称 [英] childNodes method cannot find my field names

问题描述

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

我试图在我的项目中实现这个扩展窗体函数。但是无法找到字段名称（控制台日志返回undefined），直到我将输入字段放在div之外并直接放在父span标记下。我不确定字段名称是如何定位和命名的，因为我打算保留div。

HTML：

 < span id =readrootstyle =display：none> 
 onclick =this.parentNode.parentNode.removeChild（this.parentNode）;> 
< input class =btn btn-defaulttype =buttonvalue =Remove review 
< br>< br> 
< div class =row> 
< div class =col-lg-3> 
< div class =form-group required> 
< label for =Student1Age>年龄< / label> 
< input name =ageclass =form-controlplaceholder =Age
 maxlength =11type =textid =Student1Agerequired =required> 
< / div> 
< / div> 
< div class =col-lg-3> 
< div class =form-group required> 
< label for =Student1Grade>年级< / label> 
 < option value =>请选择< / option> 
< option value =1> Grade 1< / option> 
< option value =2> 2级< / option> 
< / select> 
< / div> 
< / div> 
< / div> 
< / span> 
< span id =writeroot>< / span> 
< input class =btn btn-defaulttype =buttononclick =moreFields（）
 value =给我更多字段！> 
  
 Javascript：
  var counter = 0; 
函数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）; 
 
  
 
 
解决方案 
  childNodes 只返回直接的孩子。它只能在顶部级别找到名称属性的元素。要想找到所有具有名称的后代元素，请尝试 
 
 
  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 的变量，它是 
 
 
http://www.quirksmode.org/dom/domform.html


I am trying to implement this extend form function in my project. But the field names cannot be located (the console log returns "undefined"), until I place an input field out of the divs and directly under the parent span tag. I'm not sure how the field names can be located and named accordingly as I intend to keep the divs.

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

解决方案
childNodes returns only direct children. It will find only elements with name attributes at the top level.  To find all descendant elements with names as you want, try
var newField = newFields.querySelectorAll('[name]');
Minor points: 

Although in this case you don't need to use either, you should use .children instead of .childNodes. The latter will visit white-space nodes, which won't hurt anything but isn't what you want.
You are missing brackets around the body of the if (theName) statement, meaning the console.log is being executed each time through the loop, even when a white-space node is being visited. To avoid such problems, set up your editor to indent property, and/or run a linter across your code.
if (theName) {
    newField[i].name = "data[Student][" + counter + "][" + theName + "]";
    console.log(newField[i].name);
}

I'd suggest naming your variables a bit more clearly. You have a variable named newFields which is a single span, and you have a variable called newField which is a collection of fields.


                        
这篇关于childNodes方法找不到我的字段名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    

                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.