在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”呢？

输出结果：

This is td  This is td2
5

- mohangraj

---

使用 document.getElementById("#row > td").length - Semi-Friends

仅使用纯JS，不使用jQuery？ - guradio

使用 children 属性代替 childNodes，并搜索两者之间的区别。 - Mohammad Usman

如果您正在使用jQurey，您也可以使用：https://api.jquery.com/children/ - Blady214

@guradio 正确，但没有提到将当前源代码转换为纯JavaScript。只是询问为什么输出结果不符预期。 - NewToJS

Answer 1

您得到了5，因为该行中有两个元素和三个文本节点，childNodes就是这样的：子节点。有多种类型的节点（主要是元素、文本节点和注释节点）。以下是该结构中的节点：

$(function(){
  console.log("nodeType 1 is Element, 3 is Text");
  var child = document.getElementById("row");
  var i;
  for (i = 0; i < child.childNodes.length; ++i) {
    
    console.log(i + ": nodeType = " + child.childNodes[i].nodeType);
  }
});

<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>

如果您只想获取子元素，可以使用DOM的children属性（现代浏览器都支持，但一些非常老旧的浏览器不支持）：

$(function(){
  console.log("nodeType 1 is Element, 3 is Text");
  var child = document.getElementById("row");
  var i;
  for (i = 0; i < child.children.length; ++i) {
    
    console.log(i + ": nodeType = " + child.children[i].nodeType);
  }
});

<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>

...或jQuery的children方法：

$(function(){
  console.log("nodeType 1 is Element, 3 is Text");
  var child = document.getElementById("row");
  var i;
  $(child).children().each(function(i) {
    console.log(i + ": nodeType = " + this.nodeType);
  });
});

<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>

- T.J. Crowder

Answer 2

为什么不检查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>

- Kamil Latosinski

---

你引用的是哪些文档？请提供链接或引用。 - Bergi

这并不是官方文档（至少我在w3.org上没有找到），但你可以在这里和那里找到一些相关信息：https://dom.spec.whatwg.org/#introduction-to-the-dom http://www.w3schools.com/jsref/prop_node_childnodes.asp https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM - Kamil Latosinski

Answer 3

如果您使用控制台日志console.log(child.childNodes)

它还包括元素之前和之间的空格，.childNodes 也将这些空格视为子元素。如果使用 child.childrens.length，它将忽略空格并将计数作为2。

- Code Warrior

Answer 4

你可以简单地使用jQuery的children()方法。

$(function(){
  $("#subpage").html($("#row").children().length);
  /* you could also use 
  $("#subpage").html($("#row").children("td").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>

- user2560539

Answer 5

你可以使用jQuery只需执行$("#row td")，就可以获取嵌套在#row中的td

$(function(){
  var child = $("#row td");
  $("#subpage").html(child.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>

- sa77

Answer 6

参考w3schools - HTML DOM childNodes Property，

注意：元素内的空格被视为文本，文本被视为节点。注释也被视为节点。

因此，

<tr id ="row">
   newline
   <td>
   newline
   <td>
   newline
</tr>

So, it has 5 child Nodes.

在您的情况下，如果HTML结构是<tr id="row"><td></td><td></td></tr>，那么它将是2。

- Manikandan

Answer 7

$("#subpage").html($('#row td').length);

- Himanshu Patel

---

这不是 OP 寻找的内容。 - Rajesh

Answer 8

试试这个：

var c = document.getElementById("subpage").children.length;

- user3387978

---

OP不是在寻找这个。他在问为什么返回的长度是5。 - Rajesh