用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()
复制代码
原文地址:https://www.cnblogs.com/liaohongwei/p/9145719.html