Question

每当我添加

时，我都试图阻止创建空文本节点

换行符，
空格（包括不间断空格）
突片

到我的HTML结构。

例如

<div><div>    <!-- Node not created -->
<div>
                <!-- Node created -->
<div>

为Eg1

<div><div>    <!-- Node not created -->
<div> <div>     <!-- Node created -->

为Eg2。

<div><div>    <!-- Node not created -->
<div>            <!-- Node created -->
    <div>
                 <!-- Node created -->
    </div>    
<div>            <!-- Node created -->

在这里，为了更好的不存在：看看第一个<DIV> s中发生了什么 - jsFiddle

Answer 1

每次操作DOM时，将node.normalize()调用到父节点，它就会完成工作。

在Node.normalize

了解详情

<强>已更新

根据您提供的小提琴，我深入研究了这个问题，我根据您的html结构在Chrome 29中运行以下代码。

var i = 0;
function traverse(node){
    if (node.firstChild) {
        traverse(node.firstChild);
    }

    if (node.nodeType === 3) {
        console.log("text node " + ++i + ": " + node.nodeValue);
        if (node.nodeValue !== '') {
            console.log("text node " + i + " is not null");
        }
        if (node.nodeValue.match(/(\r\n|\r|\n)+/g)) {
            console.log("nonsense node");
        }
    }

    if (node.nextSibling) {
        traverse(node.nextSibling);
    }
}
document.addEventListener("DOMContentLoaded", doTraverse);

function doTraverse(){
    traverse(document.getElementsByClassName("selector")[0]);
}

并获得以下结果：

text node 1: 

text node 1 is not null
nonsense node
text node 2: 

text node 2 is not null 
nonsense node 
text node 3: 

text node 3 is not null 
nonsense node 
text node 4: 

text node 4 is not null 
nonsense node 
text node 5: 
            text

text node 5 is not null 
text node 6: a paragraph 
text node 6 is not null
text node 7: 

text node 7 is not null 
nonsense node 
text node 8: a paragraph 
text node 8 is not null 
text node 9: a paragraph 
text node 9 is not null 
text node 10: 
             more text

text node 10 is not null 
text node 11: 


text node 11 is not null 
nonsense node

令我们惊讶的是，有更多empty文本节点比我们预期的更多。但是，如果我们在Chrome的检查器中检查这些元素，一切似乎都正常。我想Chrome会在渲染引擎中优化此问题，但不会在DOM中优化。

我们清楚地知道那些empty文本节点实际上包含linebreak s，这使得您的代码无法按预期工作。因此，如果您确实要删除这些文本节点，您可以遍历DOM，找到它们并删除它们（这将是非常低效的，我感谢更好的解决方案）。

顺便说一句，在这种情况下，node.normalize()将不适合您，因为它只删除了真正的空文本节点。

Answer 2

如果您认为有必要，请添加评论

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

这将使空白区域被注释掉而不会插入文本节点

来自http://css-tricks.com/fighting-the-space-between-inline-block-elements/

例如1

<div><div><!-- 
--><div><!--

--><div>

例如2

<div><div><!--
--><div><!-- --><div>

例如3

<div><div><!--
--><div><!--
    --><div><!--

    --></div><!--    
--><div>

使您的标记相当丑陋，但删除了文本节点

Answer 3

您可以在DOM上运行简单的清理功能：

function cleanNode(node) {
 var child;
 for (var i = node.childNodes.length; i--;) {
  child = node.childNodes[i];
  // If commentt/textNode and has no non-whitespace character in it, delete it.
  if (child.nodeType === 3 || child.nodeType === 8 && !/\S/.test(child.nodeValue)) {
   node.removeChild(child);
   n--;
  }
  else {
   cleanNode(child);
  } 
 }
}

HTML / jQuery - 防止空文本节点

3 个答案: