JS获取父节点、子节点、兄弟节点

2024年5月15日 171次阅读 来源: SwJieJie

1、访问父节点
parentNode : Node 类型，返回指定节点的父节点,如果指定节点没有父节点，则返回 null

<div id="box">
	<p id="hello">hello world!</p>
</div>
<script>
	var hello=document.getElementById("hello");
	console.log(hello.parentNode.nodeName);   //DIV
</script>

2、访问所有子节点
childNodes： NodeList 类型，返回指定节点的所有子节点，可以看作是类数组对象，可以使用 length 属性来确定子节点的数量

<div id="box">
	<p>hello world!</p>
	<p>today is Sunday.</p>
</div>
<script>
	var box=document.getElementById("box");
	console.log(box.childNodes.length);   //5
</script>

3、访问第一个子节点
firstChild：Node 类型，返回指定节点的第一个子节点，注意空白文本节点

<div id="box">
	<p id="hello">hello world!</p>
	<p>today is Sunday.</p>
</div>
<script>
	var box=document.getElementById("box");
	console.log(box.firstChild.nodeName);   //#text
	var firstChild=getFirstChildNode(box);
	console.log(firstChild.nodeName);  //p

	//通过判断nodeType的值是否为1,如果是则为元素节点,否则跳过。
	//获取当前元素节点的第一个子节点,过滤空白文本节点
	function getFirstChildNode(box){ 
		if(box.firstChild.nodeType!=1){ 
			return box.firstChild.nextSibling;
		}else{ 
			return box.firstChild;
		}
	 }
</script>

4、访问最后一个子节点
lastChild：Node 类型，返回指定节点的最后一个子节点，注意空白文本节点

<div id="box">
	<p id="hello">hello world!</p>
	<p>today is Sunday.</p>
</div>
<script>
	var box=document.getElementById("box");
	console.log(box.lastChild.nodeName);   //#text
	var lastChild=getLastChildNode(box);
	console.log(lastChild.nodeName);  //p

	//获取当前元素节点的最后一个子节点,过滤空白文本节点
	function getLastChildNode(box){ 
		if(box.lastChild.nodeType!=1){ 
			return box.lastChild.previousSibling;
		}else{ 
			return box.lastChild;
		}
	}
</script>

同理

5、访问下一个兄弟节点
nextSibling： Node 类型，返回指定节点之后紧跟的节点，如果没有 nextSibling 节点，则返回值为 null。

6、访问前一个兄弟节点
previousSibling：Node 类型，返回指定节点的前一个节点，如果没有 previousSibling 节点，则返回值为 null。

7，获取所有兄弟节点

function siblings(elm){ 
    var a = [];    //保存所有兄弟节点
    var p = elm.parentNode.children; //获取父级的所有子节点
    for(var i = 0; i < p.length; i++){   //循环
        if(p[i].nodeType == 1 && p[i] != elm){   //如果该节点是元素节点与不是这个节点本身
            a.push(p[i]);      // 添加到兄弟节点里
        }
    } 
 
   return a;
    
}
 
var sibling = siblings(div);
 
    
for(var j = 0; j < sibling.length; j++){ 
    sibling[i].style.width = "200px"  //这样就可以对所有的兄弟节点执行你需要的操作了
}

汇总小结：
1、parentElement获取父元素节点

var box=document.getElementById(“box”).parentElement;
parentElement返回指定元素的上级元素节点，如果没有上级元素返回null。

2、children获取所有子元素节点

var childs=document.getElementById(“box”).children;
返回一个数组，children ie6-8支持但返回元素节点和注释节点，ie9以上版本返回元素节点，其他浏览器支持

3、firstElementChild获取第一个子元素节点

var first=document.getElementById(“box”).firstElementChild;
返回父元素的第一个子元素节点，如果没有则返回null。ie9以上版本支持

4、lastElementChild获取最后一个子元素节点

var last=document.getElementById(“box”).lastElementChild;
返回父元素的最后一个子元素节点，如果没有则返回null。ie9以上版本支持

5、nextElementSibling获取下一个兄弟元素节点

var next=document.getElementById(“box”).nextElementSibling;
返回当前元素紧跟着的元素节点，如果没有则返回null。ie9以上版本支持

6、previousElementSibling获取前一个兄弟节点

var prev=document.getElementById(“box”).previousElementSibling;
返回当前元素的前一个元素节点，如果没有则返回null。ie9以上版本支持

    原文作者：SwJieJie
    原文地址: https://blog.csdn.net/qq_44552416/article/details/113931949
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞