用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()