js与jquery获取子节点、父节点、兄弟节点的方法

在写代码时，时不时会遇到获取子节点、父节点等需要，但有的时候总是弄混淆不是很清晰，所以针对这些问题，总结了jquery与js获取节点的方法

js方法

<div id="div">
    <p id = "one">我是爷爷</p>
    <span id="two">我是伯伯</span>
    <div id="three">
        <span id="threeOne">
            <span id="threeTwo">孙子1</span>
            <span id="threeFour">孙子2</span>
        </span>
    </div>
</div>

一、js获取父节点

1.parentElement()方法获取父节点，其是IE标准下的方法

var three=document.getElementById('three');
var parent=three.parentElement;	//id='div'

2.parentNode获取，其是w3c标准下方法

var three=document.getElementById('three');
var parent=three.parentNode;//id='div'

3.offsetParent获取
该方法返回最近的祖先定位元素

var three=document.getElementById('three');
var parent=three.offsetParent;	//是body
parent.style.background="red";

二、js获取子节点

1.通过getElementsByTagName()获取子节点的标签数组，进而获取子节点，

var three=document.getElementById('threeOne');
var span=three.getElementsByTagName('span');//span[0]》id='threeTwo';

2.通过childNodes获取子节点，与children获取结果不同
其返回的是子节点的集合，是一个数组包含换行和空格

 var three=document.getElementById('threeOne');
 var span=three.childNodes;
 console.log(span);

在这里插入图片描述
所以为了进一步获取子节点，需要对chiledNodes进行去除空格和换行处理

for (var i=0;i<span.length;i++){
               if (span[i].nodeName =='#text'&& !/\s/.test(span.nodeValue)){
                   three.removeChild(span[i]);
               }
           }
 console.log(span);

在这里插入图片描述

3.通过children获取，与childNodes获取结果不同
其返回的是包含子节点的一个数组

  var three=document.getElementById('threeOne');
  var span=three.children;//span[0]》id='threeTwo';

4.通过firstChild获取，在测试的时候发现，取得的值为空，发现其父级的children包含空格或换行，所以要对父级的children进行处理，方法同上

var three=document.getElementById('threeOne');
 var span=three.childNodes;
 for (var i=0;i<span.length;i++){
         if (span[i].nodeName =='#text'&& !/\s/.test(span.nodeValue)){
           three.removeChild(span[i]);
              }
           }
 console.log(three.firstChild)

5.获取最后一个子节点
其直接返回父级下的第一个子节点

var three=document.getElementById('threeOne');
console.log(three.firstElementChild);
 //<span id="threeTwo">孙子1</span>

6.通过firstElementChild获取
其直接返回父级下的第一个子节点

 var three=document.getElementById('threeOne');
console.log(three.lastChild);
lastChild同firstChild一样，也要进行处理
console.log(three.lastElementChild); // <span id="threeFour">孙子2</span>

三、js获取兄弟节点

1.先获取父节点，在获取父节点下面的子节点

var two=document.getElementById('two');
var twoParent=two.parentNode;
console.log(twoParent.children[0]);//id='one';

2.通过previousElementSibling直接获取

var two=document.getElementById('two');
var twoPre=two.previousElementSibling;
console.log(twoPre);//<p id="one">我是爷爷</p>

3.通过previousSibling获取，它与previousElementSibling不同的是，其还包含换行和空格，这里就在进行细述。

var two=document.getElementById('two');
var twoPre=two.previousSibling;

4.获取下个兄弟节点

var two=document.getElementById('two');
var twoPre=two.nextElementSibling;
console.log(twoPre);//<p id="one">我是爷爷</p>
var twoPre=two.nextSibling;//也需要对其进行处理

jquery方法

一、js获取父节点

1.通过parent()方法获取
该方法只会对上一级DOM树进行遍历

var a= $('#threeFour').parent();//id="threeOne"

2.通过parents()
该方法会返回其所有的祖先元素

var a= $('#threeFour').parent();// ```
var a= $('#threeFour').parent();//#threeOne,#three，#div, body, html

3.通过parentsUntil() 方法
该方法返回当前元素到截止元素之间的所有祖先元素

 var a= $('#threeFour').parentsUntil('div');//#threeOne

二、js获取父子节点

1.通过children() 方法
该方法返回被选元素的所有直接子元素，对下一级DOM树进行遍历

 var a= $('#threeOne').children();//#threeTwo,#threeFour

2.通过find() 方法
该方法会向下一级，找到该元素

  var a= $('#threeOne').find('#threeFour');//#threeFour

三、js获取兄弟节点

1.通过 siblings() 方法
该方法返回元素的所有兄弟节点

var a= $('#two').siblings();//#one,#three

2.通过next() 方法
该方法只返回一个元素

var a= $('#two').next();//#three

3.通过nextAll() 方法
该方法返回所有跟随的兄弟元素

var a= $('#one').nextAll();#two,#three

4.通过nextUntil() 方法
该方法返回元素到截止元素之间的兄弟元素

var a= $('#one').nextUntil('#three');#two

prev(), prevAll() & prevUntil() 方法只不过是取目标元素之前的兄弟节点，这里就不一一描述了