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