DOM遍历：查找父元素、子元素和兄弟元素-优快云博客

本文链接：https://blog.youkuaiyun.com/xieixnxia/article/details/118524704

本文介绍了DOM遍历的三种主要情况：查找父元素、查找子元素以及查找兄弟元素。在JavaScript中，可以利用如childNodes、firstChild、lastChild以及children、firstElementChild、lastElementChild等方法来实现这些操作。注意，childNodes包含所有子节点，包括元素节点和文本节点，而children只包含元素节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM遍历可以分为以下三种情况：

查找父元素
查找子元素
查找兄弟元素

查找父元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		table{border-collapse: collapse;}
		table,tr,td{border: 1px solid gray;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oTd=document.getElementsByTagName("td");

			for(var i=0;i<oTd.length;i++){
				oTd[i].onclick=function(){
					var oParent=this.parentNode;//查找td的父元素

					oParent.style.color="white";
					oParent.style.backgroundColor="yellow";
				};
			}
		}
	</script>
</head>
<body>
	<table>
		<caption>考试成绩</caption>
		<tr>
			<td>小明</td>
			<td>80</td>
			<td>80</td>
			<td>80</td>
		</tr>
		<tr>
			<td>小红</td>
			<td>90</td>
			<td>90</td>
			<td>90</td>
		</tr>
		<tr>
			<td>小杰</td>
			<td>100</td>
			<td>100</td>
			<td>100</td>
		</tr>
	</table>

</body>
</html>

查找子元素

在Javascript中，可以使用两组方法来获得父元素中所有子元素或某个子元素

childNodes、firstChild、lastChild
children、firstElementChild、lastElementChild

其中，childNodes获取的是所有的子节点，这个子节点是包括元素节点以及文本节点的，而children获取的是所有元素节点，不包括文本节点。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oUl=document.getElementById("list");
			var childNodeLen=oUl.childNodes.length;
			var childrenLen=oUl.children.length;

			alert("childNodes的长度为："+childNodeLen+"children的长度为："+childrenLen);
		}
		
	</script>
	
</head>
<body>
	<ul id="list">
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
</body>
</html>