javascript针对DOM的应用分析（二）

145 阅读 0 评论 96 点赞

我是靠谱客的博主自然楼房，最近开发中收集的这篇文章主要介绍javascript针对DOM的应用分析（二），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

其实在原生的也JS也有这些属性。和JQ几乎相同但是比JQ少一些。但是用起来却比JQ麻烦一点。主要因为FF浏览器，因为FF会把你的换行也当做一个DOM元素。比如说

复制代码代码如下:

 
<div id = "dom"> 
<div></div> 
<div></div> 
</div> 

我用原生的JS获取ID为dom的元素下的子元素。用我第一章说的方法就是var a = document.getElementById("dom").getElementsByTagName("div");这个没问题。可以alert(a.length)提示会是2，但是我们现在换一种方法获取就是我上章提到的var b = document.getElementById("dom").childNodes;如果这样alert(b.length)IE浏览器上没问题还是2，但是在FF浏览器上会提示是4，这就是因为FF把换行也当做一个元素了。
所以我们必须处理一下才能用JS的那些属性。处理思想很简单就是遍历一下这些元素。把元素类型为空格而且是文本都删除。处理函数是这样的

复制代码代码如下:

 
function del_space(elem){ 
var elem_child = elem.childNodes; 
for(var i=0;i<elem_child.length;i++){ 
if(elem_child.nodeName == "#text" && !/S/.test(elem_child.nodeValue)) 
{elem.removeChild(elem_child)} 
}} 

我解释一下这个函数
var elem_child = elem.childNodes;
把传进来的elem元素的子元素都扔给elem_child;

复制代码代码如下:

 
for(var i=0;i<elem_child.length;i++){ 
if(elem_child.nodeName == "#text" && !/S/.test(elem_child.nodeValue)) 
{elem.removeChild(elem_child)} 
} 

遍历这些子元素。如果这些元素里面有节点类型是文本并且这个文本类型节点的节点值是空的。就把它删除

(nodeName是JS里的一个属性，得到这个节点的节点类型，/S/这个是非空字符在JS里的正规表达式。前面加一个感叹号就表示是空字符。test是JS的一个方法，就是把它里面的东西和外面的东西对比一下。nodeValue表示得到这个节点里的值removeChild也是个方法就删除外面这个元素的某个子元素)

这样只需要在调用这些属性之前调用这个函数把空格清理一下就能放心用了比如

复制代码代码如下:

 
<div id = "dom"> 
<div></div> 
<div></div> 
</div> 

<script> 
function dom(){ 
var a = document.getElementById("dom"); 
del_space(a);调用清理空格的函数 
var b = a.childNodes;获取a的全部子节点； 
var c = a.parentNode;获取a的父节点； 
var d = a.nextSbiling;获取a的下一个兄弟节点 
var e = a.previousSbiling;获取a的上一个兄弟节点 
var f = a.firstChild;获取a的第一个子节点 
var g = a.lastChild;获取a的最后一个子节点 

} 
</script> 