JavaScript的DOM_处理空白节点
2024-08-27 04:17:05
一、空白节点产生的原因
在非 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>
最新文章
- ASP.NET五步打包下载Zip文件
- C#中DateTime.Now.ToString()
- 学习cocos 空程序
- POJ 2352
- ubuntu 安装fcitx输入法
- 八、天气App案例
- Windows Phone的简单学习
- jenkins 邮件配置步骤
- activity状态的保存和保持(onRetainNonConfigurationInstance和getLastNonConfigurationInstanc
- MsSQL的游标的综合运用
- 免写前缀JS包--prefixfree.min.js--插件
- 关于多本小说站的SEO—从”易读中文网”获得的心得体会
- Unreal Engine 4 创建Destructible Mesh(可破坏网格)
- lambda 表达式 自定义查询
- 【懒人有道】在asp.net core中实现程序集注入
- 【Flink】流-表概念
- tf.py_func
- 【JavaScript】事件捕获、事件冒泡与事件委托
- Node.js进程内存使用查看方法及返回对象的含义
- 第一周嵌入式程序设计(linux环境下)的学习总结