JS获取子节点、父节点和兄弟节点的方法实例总结

1.js获取⼦节点的⽅式

1.通过获取dom⽅式直接获取⼦节点

var a = document.getElementById(\"test\").getElementsByTagName(\"div\");

2.通过children来获取⼦节点

利⽤children来获取⼦元素是最⽅便的，他也会返回出⼀个数组。对其获取⼦元素的访问只需按数组的访问形式即可。var getFirstChild = document.getElementById(\"test\").children[0];

3.通过childNodes获取⼦节点

childNodes返回的是⼦节点的集合，是⼀个数组的格式。他会把换⾏和空格也当成是节点信息。

var b =document.getElementById(\"test\").childNodes;

　为了不显⽰不必须的换⾏的空格，我们如果要使⽤childNodes就必须进⾏必要的过滤。通过正则表达式式取掉不必要的信息。下⾯是过滤掉

//去掉换⾏的空格

for(var i=0; iif(b[i].nodeName == \"#text\" && !/\\s/.test(b.nodeValue)){ document.getElementById(\"test\").removeChild(b[i]); }}

//打印测试

for(var i=0;i//补充 document.getElementById(\"test\").childElementCount; 可以直接获取长度 同length

4.获取第⼀个⼦节点　

//会匹配换⾏和空格信息

var getFirstChild = document.getElementById(\"test\").firstChild;　　

//不会匹配换⾏和空格信息

var getFirstChild = document.getElementById(\"test\").firstElementChild;

5.获取最后⼀个⼦节点

//lastChild获取最后⼀个⼦节点的⽅式其实和firstChild是类似的。

//会匹配换⾏和空格信息

var getLastChildA = document.getElementById(\"test\").lastChild;

//不会匹配换⾏和空格信息

var getLastChildB = document.getElementById(\"test\").lastElementChild;

2.获取⽗节点的⽅式

1. parentNode获取⽗节点

获取的是当前元素的直接⽗元素。parentNode是w3c的标准。

var p = document.getElementById(\"test\").parentNode;

2. parentElement获取⽗节点

parentElement和parentNode⼀样，只是parentElement是ie的标准。var p1 = document.getElementById(\"test\").parentElement;

3. offsetParent获取所有⽗节点

⼀看offset我们就知道是偏移量 其实这个是于位置有关的上下级 ，直接能够获取到所有⽗亲节点， 这个对应的值是body下的所有节点信息。

var p2 = document.getElementById(\"test\").offsetParent;

3.获取兄弟节点的⽅式

1. 通过获取⽗亲节点再获取⼦节点来获取兄弟节点

var brother1 = document.getElementById(\"test\").parentNode.children[1];

2. 获取上⼀个兄弟节点

在获取前⼀个兄弟节点的时候可以使⽤previousSibling和previousElementSibling。他们的区别是previousSibling会匹配字符，包括换⾏和空格，⽽不是节点。previousElementSibling则直接匹配节点。

var brother2 = document.getElementById(\"test\").previousElementSibling;var brother3 = document.getElementById(\"test\").previousSibling;

3. 获取下⼀个兄弟节点

同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是类似的。var brother4 = document.getElementById(\"test\").nextElementSibling;var brother5 = document.getElementById(\"test\").nextSibling;　

$('#id').siblings() 当前元素所有的兄弟节点$('#id').prev() 当前元素前⼀个兄弟节点

$('#id').prevaAll() 当前元素之前所有的兄弟节点$('#id').next() 当前元素之后第⼀个兄弟节点$('#id').nextAll() 当前元素之后所有的兄弟节点