Question

请您查看this jsFiddle example，并告诉我为什么数字'11'会被警告而不是'5'（<li>元素的数量）？

来自jsFiddle：

HTML

<ul id="list">
    <li>milk</li>
    <li>butter</li>
    <li>eggs</li>
    <li>orange juice</li>
    <li>bananas</li>
</ul>

的JavaScript

var list = document.getElementById('list');
var list_items = list.childNodes;
alert(list_items.length);

Answer 1

childNodes（取决于所使用的浏览器）将返回文本节点以及父节点的子标记。从技术上讲，<li>标记之间的空格也将计入childNodes。

为避免处理它们，您可以检查nodeType != 3。 Here is a list of node types.

var list = document.getElementById('list');
var list_items = list.childNodes;
var li_items = [];
for (var i=0; i<list_items.length; i++) {
  console.log(list_items[i].nodeType);

  // Add all the <li> nodes to an array, skip the text nodes
  if (list_items[i].nodeType != 3) {
    li_items.push(list_items[i]);
  }
}

Answer 2

那里有文本节点。

您可以在使用...

进行迭代时跳过它们

for (var i = 0, length = list_items.length; i < length; i++) {
    if (list_items[i].nodeType != 1) {
        continue;
    }
    // Any code here that accesses list_items[i] will sure to be an element.
}

jsFiddle

或者，你可以用更实用的方式来做...

list_items = Array.prototype.filter.call(list_items, function(element) { 
                 return element.nodeType == 1;
             });

jsFiddle

您必须使用将其转换为正确的数组才能使用filter()方法。 childNodes属性返回NodeList个对象。

Answer 3

正如其他人所指出的那样，childNode计数包括文本节点，由＆lt; li＆gt;之间的空格生成。元件。

<ul id="list"><li>milk</li><li>butter</li><li>eggs</li><li>orange juice</li><li>bananas</li></ul>

这将为您提供5个childNodes，因为它省略了空格。

Answer 4

文本节点包含在子节点计数中。要获得正确的值，您需要删除文本节点，或确保它们不在您的代码中。代码之间的任何空格都被视为空格和文本节点，因此您的计数是文本节点的总数。

Answer 5

我拼凑了一个我喜欢的解决方案。（我从this blog post得到了这个想法。）

1）首先，我使用以下方法获取子元素节点的数量：

nodeObject.childElementCount;

2）然后我编写了一个函数，它将按索引号返回任何子元素节点。我通过在for循环中使用firstElementChild和nextElementSibling来完成此操作。

function getElement(x, parentNode){
    var item = parentNode.firstElementChild
    for (i=0;i<x;i++){
         item = item.nextElementSibling;
    }
    return item;
}

这将返回我想要从中拉出的任何内容所需的子元素。它跳过了childNodes重新调整所有不同节点的问题，这些节点在尝试仅解析元素时没有帮助。我相信比我更有经验的人可以清理它。但我觉得这很有用，我不得不发布它。

Answer 6

改用obj.children。

job.setMapOutputKeyClass(ImmutableBytesWritable.class);
job.setMapOutputValueClass(Result.class);

这个children和childNodes之间的区别在于childNodes包含所有节点，包括文本节点和注释节点，而子节点只包含元素节点。来自w3schools。

为什么`childNodes`返回的数字大于我的预期？

HTML

的JavaScript

6 个答案: