2

空白算作 DOM 中的空文本元素。我如何计算这些空格？

例如

<body>

    <div>

    </div>

    <div>

    </div>

</body>

body 元素中有多少个空格（childNodes）？

每个 div 元素中有多少个空格（子节点）？

4

2 回答 2

1

您发布的代码有 5 个空格。我会向你解释为什么会这样。首先，我想明确一点，当我提到 whitepace 时，我不仅仅是在谈论" "char。空格也可以是\t或\rchars \n，代表空的文本节点。
话虽如此，我们可以谈谈您发布的代码在 DOM 中的表示方式：

body
 |
 x-- #Text = "\n\t"
 |
 x-- div
 |    |
 |    x-- #Text = "\n\t"
 |
 x-- #Text = "\n\t"
 |  
 x-- div
 |    |
 |    x-- #Text = "\n\t"
 |
 x-- #Text = "\n"

如您所见，\n和\t位于同一文本节点中。这符合DOM Level 2说：

当一个文档第一次通过 DOM 可用时，每个文本块只有一个 Text 节点。

因此，下推的断线与div右推的选项卡位于同一文本节点中。我们可以更进一步，在其中一个divs 中添加一个文本： 

<body>

    <div>

    </div>

    <div>
        Hello World!
    </div>

</body>

这将由浏览器解析，例如：

body
 |
 x-- #Text = "\n\t"
 |
 x-- div
 |    |
 |    x-- #Text = "\n\t"
 |
 x-- #Text = "\n\t"
 |  
 x-- div
 |    |
 |    x-- #Text = "\n\t Hello World! \n\t"
 |
 x-- #Text = "\n"

文本与两个空白节点组合在一起，因为一切都是文本，因此它们成为单个文本块。这是您应该在文档中计算空格的方式。
但我不会依赖我的眼睛并尝试根据计数空格来查找或访问元素。而是使用一些脚本循环childNodes并检查元素nodeType的。 在这里，您可以使用一些有用的函数来遍历 DOM，而不必担心空格。 好了，话够多了。让我们看一些代码。要证明您发布的 HTML 有 5 个空格，请参阅这个计算文档中所有文本节点的 工作示例。 希望它有助于澄清一些事情。





于 2012-05-15T08:16:10.310 回答
0

如果你想看看有多少元素是空的？然后我给你一个 jQuery 解决方案。

bodyChild = $("body :empty").length;
divHcild = $("#divid :empty").length;

使用它们，您可以知道一个元素中有多少元素是完全空的。

更新： 要获取所有子元素，您可以使用类似这样的东西

身体：

var children = document.getElementByTagName('body').childNodes;
于 2012-05-14T21:14:37.033 回答