JS与jQuery获取元素父级、子级及兄弟节点的方法对比

JavaScript原生获取节点基础方法

使用JavaScript获取指定元素s的全部子节点，可通过变量chils接收s.childNodes的结果。

获取元素s的父节点，将结果赋值给变量par，即s.parentNode。

获取元素s的下一个兄弟节点，通过变量ns接收s.nextSbiling的值。

获取元素s的上一个兄弟节点，将结果存入变量ps，即s.previousSbiling。

获取元素s的第一个子节点，通过变量fc接收s.firstChild。

获取元素s的最后一个子节点，将结果赋值给变量lc，即s.lastChile。

本节主要介绍如何使用JavaScript获取节点的父级、子级元素。

Firefox浏览器空白节点处理与清理

首先说明原生JS的获取方式，其代码复杂度通常高于jQuery，后续将以此进行对比。

原生JS方法相对繁琐，主要难点在于Firefox浏览器会将代码中的换行符也识别为DOM元素。

<div id="test">
<div></div>
<div></div>
</div>

演示原生JS获取ID为test的元素下所有子元素的具体操作。

可以使用以下代码实现获取子元素的功能。

var a = docuemnt.getElementById("test").getElementsByTagName_r("div"); 

按照上述方式编写代码，在常规情况下运行没有问题。

此时变量a的长度属性length等于2。

如果改用另一种获取子节点的方法，结果可能不同。

var b =document.getElementByIdx_x("test").childNodes; 

此时变量b的长度在IE浏览器中仍为2，但在Firefox浏览器中会变为4，原因是Firefox将换行符也计为一个元素。

因此，需要对获取到的节点进行处理，遍历并删除类型为空格且内容为文本的节点。

function del_ff(elem){
var elem_child = elem.childNodes;
for(var i=0; i<elem_child.length;i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)
}
}
}

上述函数用于遍历子元素，当检测到节点类型为文本且节点值仅包含空白字符时，将其删除。

通过nodeNames属性可获取节点类型，/\s/是JS中正则表达式用于匹配非空字符，前面加感叹号表示匹配空字符。

test()方法用于检测字符串是否匹配指定模式，其语法为RegExpObject.test(string)。

若字符串string中包含与RegExpObject匹配的文本，则返回true，否则返回false。

nodeValue属性用于获取节点内部的具体值。

removeChild方法用于删除元素的指定子元素。

在调用子、父、兄弟等属性之前，先调用上述函数清理空格节点即可。

<div id="test">
<div></div>
<div></div>
</div>

<script>
function dom() {
var s= document.getElementByIdx_x("test");
del_ff(s);  //清理空格
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的最后一个子节点
}
</script>

jQuery节点查找常用方法详解

接下来介绍jQuery中查找父级、子级和兄弟节点的方法。

jQuery.parent(expr)用于查找父亲节点，支持传入expr进行过滤，例如$("span").parent()或$("span").parent(".class")。

jQuery.parents(expr)类似于parent，但会查找所有祖先元素，不限于直接父元素。

jQuery.children(expr)返回所有直接子节点，该方法仅返回直接孩子节点，不包含子孙节点。

jQuery.contents()返回内部所有内容，包括节点和文本节点。

contents()与children()的区别在于，contents()会将空白文本也作为jQuery对象返回，而children()仅返回节点。

jQuery.prev()返回上一个兄弟节点，不包括所有兄弟节点。

jQuery.prevAll()返回当前元素之前的所有兄弟节点。

jQuery.next()返回下一个兄弟节点，不包括所有兄弟节点。

jQuery.nextAll()返回当前元素之后的所有兄弟节点。

jQuery.siblings()返回所有兄弟姐妹节点，不区分前后顺序。

jQuery.find(expr)与jQuery.filter(expr)功能不同。filter()从初始集合中筛选部分元素，而find()的返回结果不包含初始集合内容，例如$("p").find("span")从<p>元素内查找<span>，等同于$("p span")。

以上即为关于JS和jQuery获取当前元素兄弟级、上一个及下一个元素的详细介绍，希望能为读者提供帮助。