在Javascript中获取子元素

Question

如何使用JavaScript获取HTML中的子元素？

程序:

$(function(){
  var child = document.getElementById("row");
  var i;
  $("#subpage").html(child.childNodes.length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<table>
  <tr id="row">
    <td> This is td </td>
    <td> This is td2 </td>
  </tr>
</table>

<div id="subpage"> </div>

我希望上面的程序将打印输出为"2".但它给出了"5".包含id为"row"的元素有2个元素,即td.但它给出了"5".那么如何打印"5"？

输出:

This is td  This is td2
5

Answer 1

你为什么不检查一下里面有什么child.childNodes？根据文档

元素内的空格被视为文本，文本被视为节点。评论也被视为节点。

这就是为什么您得到 5 个而不是 2 个的原因，因为有 3 个额外的文本节点，这是您没有预料到的。child.children代替使用。

$(function(){
  var row = document.querySelector('#row');
  var row_no_ws = document.querySelector('#row_no_ws');
  var subpage = document.querySelector('#subpage');
  subpage.innerHTML = 'Row childNodes: ' + row.childNodes.length + '<br>' +
      'Row using children: ' + row.children.length + '<br>' +
      'Row childNodes no whitespaces: ' + row_no_ws.childNodes.length
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<table>
  <tr id="row">
    <td> This is td </td>
    <td> This is td2 </td>
  </tr>
</table>

<table>
  <tr id="row_no_ws"><td> This is td </td><td> This is td2 </td></tr>
</table>

<div id="subpage"> </div>