javascript选择父亲、儿子、兄弟节点

最新推荐文章于 2023-06-21 23:21:45 发布

刘璐菲

最新推荐文章于 2023-06-21 23:21:45 发布

阅读量4.8k

点赞数 2

分类专栏： Javascript学习笔记

本文链接：https://blog.csdn.net/qq_43077318/article/details/106506985

版权

Javascript学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

应用场景：网页中当我们点击本节点时，我们希望删除父节点的样式，并且重新设置本节点的样式。

1.Html文档，其中包括id 为myself的节点，以这个节点为基础去寻找，它的父亲节点，儿子节点，哥哥节点（上一个同级节点），弟弟节点（下一个同级节点）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./test.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="button" name="" id="" value="找儿子" onclick="functionOne()" />
		<input type="button" name="" id="" value="找儿子节点中的标签"  onclick="func2()"/>
		<input type="button" name="" id="" value="找父亲" onclick="func3()" />
		<input type="button" name="" id="" value="找哥哥" onclick="func4()" />
		<input type="button" name="" id="" value="找弟弟" onclick="func5()" />
		<div id="">
			这是父亲节点的内容
			<div id="">
				这是哥哥节点的内容
			</div>
			<div id="myself">
				
				<div id="">
					这是儿子一节点的内容
				</div>
				<div id="">
					这是儿子二节点的内容
				</div>
				
			</div>
			
			<div id="">
				这是弟弟节点的内容
			</div>
		</div>
		
	</body>
</html>

2.Javascript的代码最主要的代码

//找子节点，(包括文本节点，html标签，以及html注释标签)
	var getChild = document.getElementById("myself").childNodes;
//找儿子节点中的标签
	var getChild2 = document.getElementById("myself").children;
//找父亲节点，如果是找父亲的父亲就是再加一个.parentNode
	var getChild3 = document.getElementById("myself").parentNode;
//找哥哥节点		
	var getChild4 = document.getElementById("myself").previousElementSibling;
//找弟弟节点	
	var getChild5 = document.getElementById("myself").nextElementSibling;

function functionOne()
{
	//找子节点，(包括文本节点，html标签，以及html注释标签)
	var getChild = document.getElementById("myself").childNodes;
	alert(getChild.length);
	for(var i = 0; i< getChild.length; i++)
	{
		alert(getChild[i]);
	}
	
	
}

function func2()
{
	//找儿子节点中的标签
	var getChild2 = document.getElementById("myself").children;
	alert(getChild2.length)
	for(var i = 0; i < getChild2.length; i++)
	{
		alert(getChild2[i]);
	}
}

function func3()
{
	//找父亲节点，如果是找父亲的父亲就是再加一个.parentNode
	var getChild3 = document.getElementById("myself").parentNode;
	alert(getChild3.innerHTML)
}

function func4()
{
		var getChild4 = document.getElementById("myself").previousElementSibling;
		alert(getChild4.innerHTML)
	
}

function func5()
{
		var getChild5 = document.getElementById("myself").nextElementSibling;
		alert(getChild5.innerHTML)
	
}

刘璐菲

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript选择父亲、儿子、兄弟节点

1.Html文档，其中包括id 为myself的节点，以这个节点为基础去寻找，它的父亲节点，儿子节点，哥哥节点（上一个同级节点），弟弟节点（下一个同级节点）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./test.js" type="text/javascript" charset="utf-8
复制链接

扫一扫