Question

空白计数为DOM中的空文本元素。我怎样才能算出这些空白？

例如

<body>

    <div>

    </div>

    <div>

    </div>

</body>

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

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

Answer 1

您发布的代码有5个空格。我会向你解释为什么会这样。首先，我想明确一点，当我提到空白时，我不仅仅是在讨论" "字符。空格也可以是\t，\r或\n个字符，代表空Text个节点。
话虽如此，我们可以讨论您发布的代码如何在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的断行位于与推动它的选项卡相同的文本节点中。我们可以进一步向div中的一个添加文本：

<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并检查element的nodeType。

Here 你有一些有用的功能来横向DOM而不用担心空白。

好的，足够的话。我们来看一些代码。要证明您发布的HTML有5个空格，请参阅此工作 example ，它会计算文档中的所有文本节点。

希望有助于澄清一些事情。

Answer 2

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

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

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

<强>更新要获取所有子元素，您可以使用类似这样的内容

体：

var children = document.getElementByTagName('body').childNodes;

如何将空格作为子节点计算？

2 个答案: