Javascript实例教程:处理页面中的空格元素
http://www.itjxue.com 2015-08-06 23:01 来源:未知 点击次数:
今天第二章，继续讲获取页面中DOM元素。大家都知道在JQ中想获取一个元素的兄弟元素，父级元素，子元素等等是非常方便的。其实在原生的也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>
(另外说下。var b = a.childNodes;获取的也是一个数组；所以比如我要用第一个节点就是childNodes[0];我要用第二个节点就是childNodes[1];以此类推)
到这里获取DOM方面就算是结束了。下章就教大家如何操作DOM元素。