[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);  


  14.         cleanWhitespace(a)  

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

  16.         //清除空白函数  

  17.         function cleanWhitespace(oEelement){  

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

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

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

  21.                     node.parentNode.removeChild(node)  

  22.                 }  

  23.             }  

  24.         }  


  26.     };  



  29.     </script>

  30. </head>

  31. <body>

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

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

  34.     <ul>

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

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

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

  38.     </ul>

  39. </body>

  40. </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;

}