如何将空格视为子节点？
[英]How to count whitespaces as a childnodes?
问题描述
Whitespace count as empty text element in a DOM. 
空格算作DOM中的空文本元素。 How can I count these whitespaces? 如何计算这些空格？
for example 例如
<body>
<div>
</div>
<div>
</div>
</body>
how many whitespaces(childNodes) inside the body element? body元素内有多少个空格（childNodes）？
how many whitespaces(childNodes) inside each div element? 每个div元素内有多少个空白（childNodes）？
2 个解决方案
解决方案1
1 2012-05-15 08:16:10
The code you posted has 5 whitespaces. 您发布的代码有5个空格。 I'll explain to you why is that. 我会向你解释为什么。 Firstly I'd like to let it clear that when I refer to whitepace I'm not only talking about the " " char. 首先，我想我们清楚，当我指的whitepace我不仅仅是在谈论的是" "字符。 Whitespace may also be \\t , \\r or \\n chars, which represent empty Text Nodes. 空格也可以是\\t ， \\r或\\n字符，它们表示空的文本节点。
With that said, we can talk about how the code you posted is represented in the DOM: 话虽如此，我们可以讨论一下您发布的代码如何在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"
As you can notice, the \\n and \\t are in the same text Node. 如您所见， \\n和\\t在同一文本节点中。 This is conforming with the DOM Level 2 says: 这符合DOM级别2的规定 ：
When a document is first made available via the DOM, there is only one Text node for each block of text.
So the break-line that pushes down the div is in the same text Node as the tab that pushes it right. 因此，向下推div的折线与向右推的选项卡在同一文本节点中。 We can go further and add a text to one of the div s: 我们可以进一步将文本添加到div之一：
<body>
<div>
</div>
<div>
Hello World!
</div>
</body>
That would be parsed by the browser like: 这将由浏览器进行解析，例如：
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"
The text is grouped with the two whitespaces nodes, because everything is text, thus they become a single block of text. 文本与两个空格节点分组，因为所有内容都是文本，因此它们成为单个文本块。 This is the way you should count whitespaces in a document. 这是您应该在文档中计算空格的方法。
But I wouldn't rely on my eyes and try to find or access an element based on counting whitespaces. 但是我不会依靠我的眼睛来尝试基于对空格的计数来查找或访问元素。 Instead use some script to loop through the childNodes and check for the nodeType of the element . 而是使用一些脚本遍历childNodes并检查元素的nodeType 。
Here you have some useful functions to transversal the DOM without worrying about whitespaces. 在这里，您可以使用一些有用的函数来遍历DOM，而不必担心空格。
Ok, enough of words. 好的，足够的话。 Let's see some code. 让我们看一些代码。 To prove that the HTML you posted has 5 whitespaces, see this working example that counts all text Nodes in the document. 为了证明您发布的HTML有5个空格，请参见下面的示例 ，该示例对文档中的所有文本节点进行计数。
Hope it helps to clarify something. 希望它有助于澄清一些事情。
解决方案2
0 2012-05-14 21:14:37
If you are trying to see how many elements are empty? 如果您尝试查看有多少个元素为空？ Then I am giving you a jQuery solution instead. 然后我给你一个jQuery解决方案。
bodyChild = $("body :empty").length;
divHcild = $("#divid :empty").length;
Using them, you can know what many elements are completely empty inside an element. 使用它们，您可以知道一个元素中有多少个元素完全为空。
Update: To get all the child element, you can use something like this 更新：要获取所有子元素，可以使用类似以下的内容
Body: 身体：
var children = document.getElementByTagName('body').childNodes;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.