JavaScript系列问题(判断某个DOM节点是否存在于指定DOM节点中)案例讲解

最新推荐文章于 2022-08-19 19:38:50 发布

程宇寒

最新推荐文章于 2022-08-19 19:38:50 发布

阅读量2.3k

点赞数

文章标签： JavaScript js 前端开发 parentNode 子节点/父节点

本文链接：https://blog.csdn.net/czh500/article/details/103285915

版权

直接po图和代码

参考文章https://blog.csdn.net/rao_limon/article/details/88841802

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript系列问题 —— 判断某个DOM节点是否存在于指定DOM节点中</title>
</head>
<body style="background-color: #CCE8CF;">
<h3 style="color: #cd1636;">JavaScript系列问题 —— 判断某个DOM节点是否存在于指定DOM节点中</h3>
<a href="https://blog.csdn.net/rao_limon/article/details/88841802" target="_blank">
参考文章https://blog.csdn.net/rao_limon/article/details/88841802
</a>
	<div id="great">
		<div id="grand">
			<div id="parent">
				<div id="child"></div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
var great = document.getElementById('great');    //曾祖父节点
var grand = document.getElementById('grand');    //祖父节点
var parent = document.getElementById('parent');  //父节点
var child = document.getElementById('child');    //子节点

//参数说明:child表示指定某个节点,parent表示child节点是否存在于parent节点中
function isChildOf(child, parent) {
	console.log("参数child=" + child + "-" + child.nodeName, "参数parent=" + parent + "-" + parent.nodeName);
	if (child && parent) {
		var myParentNode = child.parentNode; //定义临时变量，并初始化为child参数的父节点
		while (myParentNode) {
			console.log("myParentNode=" + myParentNode + "-" + myParentNode.nodeName);
			if (myParentNode === parent) {
				//如果myParentNode等于parent参数，则证明child参数是parent参数的后代
				return true;
			} else {
				//找myParentNode的上一代
				myParentNode = myParentNode.parentNode;
			}
		}
	}
	//遍历结束后，都没有返回true，则说明child参数找不到它的祖先parent参数
	return false;
}
	
console.log(isChildOf(great, grand));
console.log("**********************");
console.log(isChildOf(great, parent));
console.log("**********************");
console.log(isChildOf(great, child));
console.log("**********************");
console.log(isChildOf(grand, parent));
console.log("**********************");
console.log(isChildOf(grand, child));
console.log("**********************");
console.log(isChildOf(parent, child));
console.log("-----------------------");

console.log(isChildOf(child, parent));
console.log("-----------------------");
console.log(isChildOf(child, grand));
console.log("-----------------------");
console.log(isChildOf(child, great));
console.log("-----------------------");
console.log(isChildOf(parent, grand));
console.log("-----------------------");
console.log(isChildOf(parent, great));
console.log("-----------------------");
</script>
</html>