Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 JS获取节点的兄弟,父级与子级元素的实例代码

JS获取节点的兄弟,父级与子级元素的实例代码

发布时间:2015-01-10   编辑:www.jquerycn.cn
用js获取元素节点的兄弟节点、父级节点,以及子级元素的例子,有需要的朋友围观下,呵呵。

本节分享的这段代码,用于获取节点的兄弟,父级与子级元素。
代码如下:
 

复制代码 代码示例:
<div id="test">  
<div></div>  
<div></div>  
</div>  
<script>
/**
* 获取节点元素
* 兄弟节点、父级节点、子级元素节点
* by www.jquerycn.cn
*/
function dom() {  
    var s= document.getElementById("test");  
    del_ff(s); //清理空格  
    var chils= s.childNodes; //得到s的全部子节点  
    var par=s.parentNode; //得到s的父节点  
    var ns=s.nextSbiling; //获得s的下一个兄弟节点  
    var ps=s.previousSbiling; //得到s的上一个兄弟节点  
    var fc=s.firstChild; //获得s的第一个子节点  
    var lc=s.lastChile; //获得s的最后一个子节点  
}  
</script> 
 

代码说明:
var b =document.getElementById("test").childNodes;
此时b.length 在IE浏览器中没问题,其依旧等于2,但是在FF浏览器中则会使4,是因为FF把换行也当做一个元素了。
所以,在此,需遍历这些元素,把元素类型为空格而且是文本都删除。
如下:
 

复制代码 代码示例:
<script>
/**
* 遍历节点元素 去除空格
* edit by www.jquerycn.cn
*/
function del_ff(elem){  
    var elem_child = elem.childNodes;  
    for(var i=0; i<elem_child.length;i++){  
        if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))  
        { 
            elem.removeChild(elem_child)  
        }  
    }  
}
</script>

您可能感兴趣的文章:
JS获取节点的兄弟,父级与子级元素的实例代码
js获取兄弟节点、父类节点的方法
JS获取与遍历节点的兄弟父级与子元素
jquery的父子兄弟节点查找示例代码
jQuery父级以及同级元素查找介绍
javascript获取兄弟节点二种方法
Jquery常用选择器的几点知识
jQuery选择器总结
js获取节点dom操作方法
Jquery显示、隐藏元素以及添加删除样式

关键词: 父类节点  兄弟节点   
[关闭]