用JS和JQ来获取子节点！

用JS和JQ来获取子节点！

 

在JS中，如果通过document.getElementsByTagName来获取子元素有个弊端：它不单会获取符合要求的子元素，就连同孙元素也会获取。如果有特殊要求，那么最好要换一种方式来获取子元素。现在发现有两种方法。

获取如下#test的子元素：

<div class="test" id="test">
    <p>123</p>
    <p>567</p>
</div>

一、通过JS的 childNodes 来获取：

 1 window.onload = function(){
 2             var a = document.getElementById("test");
 3             var b = a.childNodes;
 4             for(i=0;i<b.length;i++){
 5                 if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){
 6                     a.removeChild(b[i]);
 7                 }
 8             }
 9             console.log(b);
10         }

有一点要注意：a.childNodes返回的值除了a的子元素，同时也会返回换行等“无用”元素，因此要把这些没用的子元素过滤掉。代码中的for循环就是用来过滤这些元素的。

nodeNames可以得到一个节点的节点类型；/\s/是JS中非空字符的正则表达式；nodeValue会返回节点的值；

test() 方法用于检测一个字符串是否匹配某个模式.语法是： RegExpObject.test(string) 如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

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的最后一个子节点

二、通过JQ的 .children() 来获取：

$(document).ready(function(){
    var a = $("#test").children($("p"));
})

其中.children()括号里的值可以是标签名，ID或类，比如$(".test").children($("#ch"))、$(".test").children()

jQuery.parent(expr) //父节点

jQuery.children(expr) //返回所有子节点，但不会返回孙节点

 jQuery.contents() //返回下面的所有内容，包括节点和文本。这个方法和 children()的区别就在于，包括空白文本，也会被作为一个

 jQuery.prev() //返回上一个兄弟节点 
 jQuery.prevAll() //返回所有之前的兄弟节点

 jQuery.nextAll() //返回所有之后的兄弟节点
 jQuery.siblings() //返回兄弟姐妹节点，不分前后
 jQuery.find(expr) //跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()