JS学习-12.DOM的深入操作

最新推荐文章于 2024-07-22 15:13:59 发布

立花泷的学习日记

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量62

点赞数

分类专栏： js 文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/qq_37974765/article/details/121351691

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

父级：parentNode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父级元素</title>
	</head>
	<body>
		<div>
			<div>
				<div id='div1'></div>
			</div>
		</div>
		<script type="text/javascript">
			div1.style.width='100px';
			div1.style.height='100px';
			div1.style.background='black';
			div1.parentNode.style.width='200px';//选择div1的父级元素
			div1.parentNode.style.height='200px';
			div1.parentNode.style.background='yellow';
			div1.parentNode.parentNode.style.width='300px';//选择div1的父级的父级元素
			div1.parentNode.parentNode.style.height='300px';
			div1.parentNode.parentNode.style.background='red';
		</script>
	</body>
</html>

子级：children

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>子级</title>
	</head>
	<body>
		<div id='parentDiv'>
			<div>
				<span></span>
				<p></p>
			</div>
			<div></div>
			<div></div>
		</div>
		<script type="text/javascript">
			for(var i = 0;i<parentDiv.children.length;i++){
				parentDiv.children[i].style.width='100px';
				parentDiv.children[i].style.height='100px';
				parentDiv.children[i].style.background='green';
			}
			parentDiv.children[0].style.width='100px';
			parentDiv.children[0].style.height='100px';
			parentDiv.children[0].style.background='yellow';
			parentDiv.children[2].style.width='100px';
			parentDiv.children[2].style.height='100px';
			parentDiv.children[2].style.background='red';
			parentDiv.children[0].children[1].innerHTML='我是p标签';
		</script>
	</body>
</html>

立花泷的学习日记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS学习-12.DOM的深入操作

父级：parentNode<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>父级元素</title> </head> <body> <div> <div> <div id='div1'></div> </div> </div>
复制链接

扫一扫