Question

我有一个有两个孩子的div，一个<h2>和一个<ul>。

我的问题是，当我检查我的div的.length时，通过document.getElementById('wrap').childNodes.length，我得到5而不是2.如果我在console.log上运行childNodes，我会得到：

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

我的HTML看起来像这样：

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

缩进我的代码之前从未影响过childNodes的长度。

如果我在一行中键入所有内容（作为一个长词），我将删除所有<TextNode>并将其计为2，因为它应该而不是5.

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

谢谢堆

聚苯乙烯。这些<TextNode textContent="\n ">遍及整个文档，所以我需要将它们全部删除，而不仅仅是在这个特定的div中。

Answer 1

Firefox，对吗？ Firefox will treat whitespace as a textnode。除了围绕它们的代码之外，你无能为力。或者，你可以完全摆脱所有的空白，但我打赌这不是一个选择。这是编写网页的一部分，呃，好玩： - ）

Answer 2

使用普通的旧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);

Answer 3

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

这是一个应该有用的链接：

http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247

编辑：

这是一个包含一些应该有用的原型代码的页面：

http://v3.thewatchmakerproject.com/journal/329/finding-html-elements-using-javascript-nextsibling-and-previoussibling

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

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

Answer 4

我希望它有所帮助：

var listOfNodes=document.getElementById('parentNodeId');
nodeCount=0
for(i=0; i<listOfNodes.childNodes.length;i++){
    if(listOfNodes.childNodes[i].id != undefined){
        console.log(listOfNodes.childNodes[i].id)
        nodeCount++
    }
}
alert(nodeCount)

Answer 5

childNodes将包含文本节点，尤其是空节点。

我总是使用children数组，因为这只计算元素而不是文本节点。

使用javaScript </textnode>删除神秘的<textnode textcontent =“\ n”>

5 个答案: