用JS和JQ来获取子节点!

时间:2022-09-23 12:29:11

用JS和JQ来获取子节点!

 

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

获取如下#test的子元素:

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

一、通过JS的 childNodes 来获取:

用JS和JQ来获取子节点!
 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 }
用JS和JQ来获取子节点!

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

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

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

用JS和JQ来获取子节点!
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的最后一个子节点
用JS和JQ来获取子节点!

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

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

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

用JS和JQ来获取子节点!
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()
用JS和JQ来获取子节点!