JavaScript的DOM_处理空白节点
一、空白节点产生的原因
在非 IE6,7,8 中，标准的 DOM 具有识别空白文本节点的功能。
在火狐浏览器等其他浏览器中是 7个，而 IE6,7,8 自动忽略了，如果要保持一致的子元素节点，需要手工忽略掉它。
<script type="text/javascript"> window.onload = function () { var box = document.getElementById('box'); alert(box.childNodes.length); //IE7,8是3个子节点（一对p标签一个） 其他浏览器都是7个，是加上了换行的一些空白字符 } </script> </head> <body> <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa"> <p>测试Div1</p> <p>测试Div2</p> <p>测试Div3</p> </div> </body>
二、忽略空白字符的做法
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); alert(box.childNodes.length); //没过滤之前IE7,8是3个（一对p标签一个） 其他都是7个，是加上了换行的一些空白字符 alert(filterSpaceNode(box.childNodes).length); //过滤后都是3个 alert(filterSpaceNode(box.childNodes)[0].nodeName); //获取过滤后的第一个子节点 }; function filterSpaceNode(nodes){ var arr = []; for(var i = 0;i<nodes.length;i++){ if(nodes[i].nodeType==3 && /^\s+$/.test(nodes[i].nodeValue)){ continue; } arr.push(nodes[i]); } return arr; }; </script> </head> <body> <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa"> <p>测试1</p> <p>测试2</p> <p>测试3</p> </div> </body>
三、直接删除空位文件节点的做法
这种方法更为简单，不需要创建数组
<script type="text/javascript"> window.onload = function () { var box = document.getElementById('box'); alert(box.childNodes.length);//没过滤之前IE7,8是3个（一对p标签一个） 其他都是7个，是加上了换行的一些空白字符 alert(filterSpaceNode(box.childNodes).length); } function filterSpaceNode(nodes) { for (var i = 0; i < nodes.length; i ++) { if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) { //得到空白节点之后，移到父节点上，删除子节点 nodes[i].parentNode.removeChild(nodes[i]); } } return nodes; } </script> </head> <body> <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa"> <p>测试Div1</p> <p>测试Div2</p> <p>测试Div3</p> </div> </body>
如果 firstChild、lastChild、previousSibling 和 nextSibling 在获取节点的过程中遇到空白节点
不是先将所有子节点获取到再进行处理，而是预先将box的空白子节点处理掉，这样获取的第一个子节点或最后一个子节点才是有效的子节点
<script type="text/javascript"> window.onload = function () { var box = document.getElementById('box'); alert(box.firstChild); //[object Text]是一个文本节点 alert(box.firstChild.nodeName); //#text alert(box.firstChild.nodeValue); //是一个空白的值 } </script> </head> <body> <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa"> <p>测试Div1</p> <p>测试Div2</p> <p>测试Div3</p> </div> </body>
<script type="text/javascript"> window.onload = function () { var box = document.getElementById('box'); alert(removeWhiteNode(box).firstChild); //是一个元素节点p alert(removeWhiteNode(box).firstChild.nodeName); alert(removeWhiteNode(box).firstChild.nodeValue); //是一个空白的值，元素节点没有值 } function removeWhiteNode(nodes) { for (var i = 0; i < nodes.childNodes.length; i ++) { if (nodes.childNodes[i].nodeType === 3 && /^\s+$/.test(nodes.childNodes[i].nodeValue)) { //这里为什么是三个===呢？ 两个==也是可以的啊 nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]); } } return nodes; } </script> </head> <body> <div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa"> <p>测试Div1</p> <p>测试Div2</p> <p>测试Div3</p> </div> </body>
