DOM遍历

最新推荐文章于 2022-10-06 19:44:31 发布

原创最新推荐文章于 2022-10-06 19:44:31 发布 · 705 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #html #javascript #css

笔记专栏收录该内容

20 篇文章

订阅专栏

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

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>