javascript之解决DOM中存在的空白节点问题

[html] view plain copy

  1. <body>

  2.     <h1>Introduction to the DOM</h1>

  3.     <pclass="test">There are a number of reasons why the DOM is awesome, here are some:</p>

  4.     <ul>

  5.         <liid="everywhere">It can be found everywhere.</li>

  6.         <liclass="test">It's easy to use.</li>

  7.         <liclass="test">It can help you to find what you want, really quickly.</li>

  8.     </ul>

  9. </body>


当我们得到ul标签的下一个节点的时候,我们会习惯的引用下面的js

[javascript] view plain copy

  1. var every = document.getElementById( "everywhere" );  

  2.        // and remove it from the document

  3. console.info(every.parentNode.childNodes[0].nodeType);  

但是我们发现,控制台打印的nodeType:3.(chorme浏览器测试)

出现这样的问题是因为什么呢?

这是因为在UL标签和LI标签之间出现了空格,被浏览器误认为是文本节点,所以打印出nodeType=3,而实际我们需要得到的是元素节点LI

如何解决这个问题呢?

原理很简单,即去除节点之间的空格即可;

下面就是一段清除空格的函数

[javascript] view plain copy

  1. function cleanWhitespace(oEelement){  

  2.             for(var i=0;i<oEelement.childNodes.length;i++){  

  3.                 var node=oEelement.childNodes[i];  

  4.                 if(node.nodeType==3 && !/\S/.test(node.nodeValue)){  

  5.                     node.parentNode.removeChild(node)  

  6.                 }  

  7.             }  

  8.         }  

通过使用此函数,控制台打印出来的nodeType:1--》这才是正解。

具体详细例子见如下index.html

[html] view plain copy

  1. <html>

  2. <head>

  3.     <title>Introduction to the DOM</title>

  4.     <script>

  5.     // We can't manipulate the DOM until the document  

  6.     // is fully loaded  

  7.     window.onload = function(){  

  8.         // Locate the element with an ID of 'everywhere'  

  9.         var every = document.getElementById( "everywhere" );  

  10.         // and remove it from the document  

  11.         var a=every.parentNode;  

  12.         console.info(a.childNodes[0].nodeType);  


  13.         cleanWhitespace(a)  

  14.         console.info(a.childNodes[0].nodeType);  

  15.         //清除空白函数  

  16.         function cleanWhitespace(oEelement){  

  17.             for(var i=0;i<oEelement.childNodes.length;i++){  

  18.                 var node=oEelement.childNodes[i];  

  19.                 if(node.nodeType==3 && !/\S/.test(node.nodeValue)){  

  20.                     node.parentNode.removeChild(node)  

  21.                 }  

  22.             }  

  23.         }  


  24.     };  



  25.     </script>

  26. </head>

  27. <body>

  28.     <h1>Introduction to the DOM</h1>

  29.     <pclass="test">There are a number of reasons why the DOM is awesome, here are some:</p>

  30.     <ul>

  31.         <liid="everywhere">It can be found everywhere.</li>

  32.         <liclass="test">It's easy to use.</li>

  33.         <liclass="test">It can help you to find what you want, really quickly.</li>

  34.     </ul>

  35. </body>

  36. </html>

--------------------------------------------------------------------------

//忽略空白字符

function filterWhiteNode(node) {

var ret = [];

for (var i = 0; i < node.length; i ++) {

if (node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)) {

continue;

} else {

ret.push(node[i]);

}

}

return ret;

}

//移除空白字符

function removeWhiteNode(node) {

for (var i = 0; i < node.length; i ++) {

if (node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)) {

node[i].parentNode.removeChild(node[i]);

}

return node;

}

*/




window.onload = function () {

var box = document.getElementById('box');

alert(removeWhiteNode(box).firstChild.nodeName);

};



//移除空白节点

function removeWhiteNode(node) {

for (var i = 0; i < node.childNodes.length; i ++) {

if (node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)) {

node.childNodes[i].parentNode.removeChild(node.childNodes[i]);

}

return node;

}




本文转自 风雨萧条 51CTO博客,原文链接:http://blog.51cto.com/1095221645/1877906,如需转载请自行联系原作者

上一篇:lua table序列化和反序列化


下一篇:比较使用sql*loader的直接加载方式和传统加载方式的性能差异