js查找元素的亲戚节点副节点子节点兄弟节点

最新推荐文章于 2023-09-09 22:41:11 发布

在下，杨江河

最新推荐文章于 2023-09-09 22:41:11 发布

阅读量298

点赞数

分类专栏： Mac开发文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Rockandrollman/article/details/128577200

版权

Mac开发专栏收录该内容

294 篇文章 3 订阅

订阅专栏

js查找元素的亲戚节点副节点子节点兄弟节点

正文

function getChildren(){
	//childNodes 节点有三种：文本节点、html节点、注释
	var arr = document.getElementById("d1").childNodes;
	alert(arr.length);
	for(var i=0;i < arr.length;i++){
		alert(arr[i]);
	}
}

function getChildren2(){
	//children html节点
	var arr = document.getElementById("d1").children;
	alert(arr.length);
	for(var i=0;i < arr.length;i++){
		alert(arr[i]);
	}
}

function getParent(){
	var parent = document.getElementById("d1").parentNode;
	alert(parent.innerHTML);
}

function getBrother(){
	var brother = document.getElementById("d1").previousElementSibling;
	alert(brother.innerHTML);
}

function getBrother2(){
	var brother = document.getElementById("d1").nextElementSibling;
	alert(brother.innerHTML);
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/index4.js"></script>
	</head>
	<body>
		<input type="button" value="找儿子" onclick="getChildren()"/>
		<input type="button" value="找儿子2" onclick="getChildren2()"/>
		<input type="button" value="找爸爸" onclick="getParent()"/>
		<input type="button" value="找哥哥" onclick="getBrother()"/>
		<input type="button" value="找弟弟" onclick="getBrother2()"/>
		<div>
			爸爸
			<div >哥哥</div>
			<div id="d1">
			<span >1</span>
			<span>2</span>
			<span>3</span>
			</div>
			<div>弟弟</div>
		</div>
	</body>
</html>