Question

我有一个包含多个文本输入字段和子表单的表单。有没有办法根据它在DOM树中的显示方式访问所有内容？

换句话说，如果我有

<div id="formContent">
    <input type="text" value="some stuff" />
    <ul>
        <li>
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
        </li>
    </ul>
    <input type="text" value="some stuff" />
    <ul>
        <li>
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
        </li>
    </ul>
    <input type="text" value="some stuff" />
    <ul>
        <li>
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
        </li>
    </ul>
</div>

我可以按照它们出现的顺序访问它们并为它们分配值吗？

编辑：我问的原因是因为我将允许人们添加和删除主要和子表单，因此我无法为其分配ID。我也不知道每个表格会有多少个子选项。

Answer 1

假设它们包含在<form>标记中（我们无法在此处看到），您可以通过elements[]数组访问它们。当您没有id属性通过getElementById()

工作时，这可以胜任

// Supply the correct index - 0 assumes this is the first form on the page...
var yourForm = document.forms[0];

// Loop over the form elements
for (var i=0; i < yourForm.elements.length; i++) {
  yourForm.elements[i].value = "some new value";
}

这里有效：http://jsfiddle.net/DLrCY/

Answer 2

是的，您可以获取ID为div的{{1}}元素的子列表，然后遍历该数组。

formContent

请注意，这将返回div的所有直接子节点（包括列表），因此您需要执行一些额外的处理和一些额外的遍历来处理这些并获取其中包含的输入元素。

Answer 3

如果您需要JQuery中的解决方案，那就是这样。

$('div > input[type=text]').each(function(){
  this.value = "some new value";
});

修改

如果您需要简单JS中的解决方案，那么您将会这样做。

var yourForm = document.forms[0]; // Loop over the form elements for (var i=0; i < yourForm.elements.length; i++) { if( /^text/.test( els[j].type ) ){// check for text boxes yourForm.elements.value = "new Value"; } }

Answer 4

var get_div = document.getElementsByTagName("*");

 for( var i=0; i<get_div.length; i++ )// total no of child including all node ex:text,element
  {
 var child_length=get_div[i].childNodes.length;    // to get child of particular node. 
 for( j=0; j<child_length; j++ )
     {
       some code;;;
     }
  }

Javascript - 访问元素值？ DOM树？

4 个答案: