Javascript：查找所有“输入”在表中

Question

有没有更短的方法在 JavaScript 中编写这个？

    var data = [];
    var table = document.getElementById( 'address' );
    var rows = table.getElementsByTagName( 'tr' );
    for ( var x = 0; x < rows.length; x++ ) {
        var td = rows[x].getElementsByTagName( 'td' );
        for ( var y = 0; y < td.length; y++ ) {
            var input = td[y].getElementsByTagName( 'input' );
            for ( var z = 0; z < input.length; z++ ) {
                data.push( input[z].id );
            }
        }
    }

Answer 1

element.getElementsByTagName< /a> 查找所有后代，而不仅仅是子代，因此：

<script type="text/javascript> 

    var data = []; 
    var table = document.getElementById( 'address' ); 
    var input = table.getElementsByTagName( 'input' ); 
    for ( var z = 0; z < input.length; z++ ) { 
        data.push( input[z].id ); 
    } 

</script> 

Answer 2

是的。

var data = [],
    inputs = document.getElementById('address').getElementsByTagName('input');

for (var z=0; z < inputs.length; z++)
  data.push(inputs[z].id);

请注意，即使在具有三个循环的较长版本中，您也可以说：

var rows = table.rows;
// instead of
var rows = table.getElementsByTagName('tr');

// and, noting that it returns <th> cells as well as <td> cells,
// which in many cases doesn't matter:
var tds = rows[x].cells;
// instead of
var tds = rows[x].getElementsByTagName('td');

Answer 3

对于现代浏览器:)

var table, inputs, arr;

table = document.getElementById( 'test' );
inputs = table.querySelectorAll( 'input' );
arr = [].slice.call( inputs ).map(function ( node ) { return node.id; });

现场演示： http://jsfiddle. net/HHaGg/

因此，我使用了 map 方法，而不是 for 循环 - 每个数组元素（每个 INPUT 节点）都替换为其 ID价值。

另请注意，`inputs.map(... 不起作用，因为 inputs 是一个 NodeList 元素 - 它是一个类似数组的对象，但不是标准数组。要仍然使用 map 方法，我们只需将其转换为一个数组，这就是 [].slice.call(inputs )对我们来说。