JS获取与遍历节点的兄弟⽗级
介绍下js获取节点的兄弟、⽗级与⼦元素的⽅法，学习下js遍历节点的操作⽅法，有需要的朋友参考下。
先说⼀下JS的获取⽅法，其要⽐JQUERY的⽅法⿇烦很多，后⾯以JQUERY的⽅法作对⽐。
JS的⽅法会⽐JQUERY⿇烦很多，主要则是因为FF浏览器，FF浏览器会把你的换⾏也当最DOM元素。
复制代码代码⽰例:
<div id="test">
<div></div>
<div></div>
</div>
原⽣的JS获取ID为test的元素下的⼦元素。可以⽤：
复制代码代码⽰例:
var a = ElementById("test").getElementsByTagName("div");
这样是没问题的。
此时a.length=2；
如果换另⼀种⽅法
复制代码代码⽰例:
var b =ElementById("test").childNodes;
此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换⾏也当做⼀个元素了。所以，在此，就要做处理了，需遍历这些元素，把元素类型为空格⽽且是⽂本都删除。
复制代码代码⽰例:
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(deValue))
{veChild(elem_child)
}
}
}
上述函数遍历⼦元素，当元素⾥⾯有节点类型是⽂本并且⽂本类型节点的节点值是空的。就把他删除。nodeNames可以得到⼀个节点的节点类型，/\s/是⾮空字符在JS⾥的。前⾯加！，则表⽰是空字符
test() ⽅法⽤于检测⼀个字符串是否匹配某个模式.语法是： st(string)原生js和js的区别
如果字符串 string 中含有与 RegExpObject 匹配的⽂本，则返回 true，否则返回 false。
nodeValue表⽰得到这个节点⾥的值。
removeChild则是删除元素的⼦元素。
之后，在调⽤⼦，⽗，兄，这些属性之前，调⽤上⾯的函数把空格清理即可。
复制代码代码⽰例:
<div id="test">
<div></div>
<div></div>
</div>
<script>
function dom() {
var s= ElementById("test");
del_ff(s);    //清理空格
var chils= s.childNodes;  //得到s的全部⼦节点
var par=s.parentNode;  //得到s的⽗节点
var Sbiling;  //获得s的下⼀个兄弟节点
var ps=s.previousSbiling;  //得到s的上⼀个兄弟节点
var fc=s.firstChild;  //获得s的第⼀个⼦节点
var lc=s.lastChile;  //获得s的最后⼀个⼦节点
}
</script>
下⾯介绍JQUERY的⽗，⼦，兄弟节点查⽅法
jQuery.parent(expr)  ⽗亲节点，可以传⼊expr进⾏过滤，⽐如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr)，类似于jQuery.parents(expr)，但是是查所有祖先元素，不限于⽗元素
jQuery.children(expr).返回所有⼦节点，这个⽅法只会返回直接的孩⼦节点，不会返回所有的⼦孙节点
jQuery对象返回，children()则只会返回节点jQuery.prev()，返回上⼀个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
<()，返回下⼀个兄弟节点，不是所有的兄弟节点
jQuery.siblings()，返回兄弟妹节点，不分前后
jQuery.find(expr)，跟jQuery.filter(expr)完全不⼀样。
jQuery.filter()是从初始的jQuery对象集合中筛选出⼀部分，⽽jQuery.find()的返回结果，不会有初始集合中的内容，⽐如$("p"),find("span")，是从<p>元素开始<span>，等同于$("p span")

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。