消除神秘<；TextNode textContent="\"&燃气轮机；使用javaScript

我有一个有两个孩子的部门，一个是

，一个是

我的问题是，当我检查div的.length时，通过执行

document.getElementById（'wrap'）.childNodes.length

，我得到的是5而不是2。如果我在

childNodes

上运行

console.log

，我会得到以下结果：

[<TextNode textContent="\n ">, h2, <TextNode textContent="\n ">, ul, <TextNode textContent="\n ">]

[，h2，ul，]

我的HTML如下所示：

<div id="wrap">
    <h2>Lorem</h2>
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
    </ul>
</div>

洛勒姆

洛勒姆
Ipsum

缩进我的代码以前从未影响过子节点的长度

如果我在一行中键入所有内容（作为一个长单词），我将去掉所有

，它将按应计为2，而不是5

我不知道出了什么问题，但我想我需要删除所有的空文本节点。 哪种方法最好

谢谢你

---

另外，这些

在文档中随处可见，因此我需要将它们全部删除，而不仅仅是在这个特定的分区中。

您不必删除任何额外的文本节点（尽管出于性能原因，有时您应该删除）。查看属性ChildNodes时，应始终检查节点类型

这里有一个链接应该会有所帮助：

编辑：

下面是一个包含一些原型代码的页面，这些代码应该会有所帮助：

以下是上面链接中的代码：

Object.prototype.nextObject = function() {
    var n = this;
    do n = n.nextSibling;
    while (n && n.nodeType != 1);
    return n;
}

Object.prototype.previousObject = function() {
    var p = this;
    do p = p.previousSibling;
    while (p && p.nodeType != 1);
    return p;
}

---

火狐，对吧。除了它们周围的代码之外，您对此无能为力。或者，你可以完全去掉所有的空白，但我打赌这不是一个选择。这就是为什么写网页如此，呃，有趣的一部分：-）

使用简单的旧js，这将是

    function removeEmptyTextNodes(elem){
        var children = elem.childNodes;
        var child;
        var len = children.length;
        var i = 0;
        var whitespace = /^\s*$/;
        for(; i < len; i++){
            child = children[i];
            if(child.nodeType == 3){
                if(whitespace.test(child.nodeValue)){
                    elem.removeChild(child);
                    i--;
                    len--;
                }
            }else if(child.nodeType == 1){
                removeEmptyTextNodes(child);
            }
        }
    }

    removeEmptyTextNodes(document.body);

函数removemptytextnodes（elem）{
var children=elem.childNodes；
var-child；
var len=children.length；
var i=0；
变量空白=/^\s*$/；
对于（；i

我希望它能帮助：

var listOfNodes=document.getElementById（'parentNodeId'）；
nodeCount=0
for（i=0；i
childNodes
将包括文本节点，尤其是空节点

我总是使用
children
数组，因为它只计算元素，而不计算文本节点。
没什么问题。这正是应该发生的事情。但之前（我检查了另外两个脚本），如果我有一个像这样的div，我会得到两个孩子，当我使用.lastChild时，我会得到'ul'而不是'textnode'…要到达ul，我现在必须键入.childNodes[3]嗯，我以前使用过.lastChild，没有任何问题，现在，突然之间，它没有返回实际的最后一个孩子，而是给了我一个空的textnode？因此，没有像我一直这样使用.childNodes，你是说我现在也应该检查节点类型吗？这感觉很糟糕，因为childNodes在我和e和ff。现在我必须检查它的ff或ie类型：-/检查我提供的第二个链接。它包含的代码在对象上添加了一个函数，允许您按类型筛选节点。@Isabell:这不是最近发生的变化。这种行为已经在多个浏览器中出现很长时间了，并且完全有效e spec.@meow：“嗯，我以前使用过.lastChild，没有任何问题，现在，突然之间，它没有返回实际的最后一个孩子，而是给了我一个空的textnode”文本节点（它不是空的）是实际的最后一个孩子。我测试了firefox和safari，它们都是相同的=计数5 ie=2。你可能会认为，即使它将它们视为文本节点，它们也不应该被视为实际的子节点，而应该被忽略。至少某种程度上的一致性是很好的。通常，我会避免说“使用X框架”，但它们可以帮助抚平这些奇怪的皱纹。如果这是一个大问题，请尝试jQuery、prototype、moo或其他大问题。否则，一点节点类型检查应该会让你重新排序。不仅仅是Firefox。它基本上是IE以外的所有浏览器（Chrome、Firefox、Opera、Safari、Konqueror、Epiphany等）。在您最喜欢的浏览器中试用：看到IE9仍能做到这一点，令人震惊，即使它提供了现代的doctype。