Dom模型

最新推荐文章于 2024-11-02 12:42:04 发布

码农阿茹

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量57

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_69674158/article/details/124869599

版权

一：节点关系

①父子
父节点parentElement
所有子节点children
第一个子节点firstElementChild
最后一个子节点lastElementChild


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.content{ display: none;}
			.show{ display: block;}
		</style>
	</head>
	<body>
		<h1>节点关系查找</h1>
		<div id="parent">
			<p>你好我是p1</p>
			<p id="me">你好我是p2</p>
			<p>你好我是p3</p>
			<h5>小小标题</h5>
		</div>
		
		 
		<script>
			// 获取到父节点
			var parent  =  document.getElementById("parent");
			// 获取到所有的子节点
			console.log(parent.children);
			// 第一个子节点
			var first = parent.firstElementChild;
			console.log("第一个子节点",first);
			// 最后一个子节点
			var last  = parent.lastElementChild;
			console.log("最后一个",last);
			// children 子（复数） first第一个 Element元素 Child子
			// last 最后一个
			
			
		</script>
	</body>
</html>

②兄弟
上一个兄弟previousElementSibling
下一个兄弟nextElementSibling


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.content{ display: none;}
			.show{ display: block;}
		</style>
	</head>
	<body>
		<h1>节点关系查找</h1>
		<div id="parent">
			<p>你好我是p1</p>
			<p id="me">你好我是p2</p>
			<p>你好我是p3</p>
			<h5>小小标题</h5>
		</div>
		
		 
		<script>
			/*
			// 获取me节点
			var me = document.getElementById("me");
			console.log(me);
			// me的父节点
			console.log(me.parentElement);
			// me的上一个兄弟节点
			var pre = me.previousElementSibling;
			console.log(pre);
			// me的下一个兄弟节点
			var next = me.nextElementSibling;
			console.log(next);
			// parent 父 Element元素   parentElement父元素
			// previous之前、上一个 Element 元素   Sibling兄弟 
			// previousElementSibling 上一个兄弟节点
			// next 下一个;Element元素;Sibling兄弟
			// nextElementSibling下一个兄弟关系
			*/
		</script>
	</body>
</html>

二：步进器

input.value=input.value*1+1 加1

input.value=input.value*1-1 减1


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>步进器</h1>
		<p>
			<button onclick="minus(this)">-</button>
			<input type="text" value="1">
			<button onclick="add(this)">+</button>
		</p>
		<p>
			<button onclick="minus(this)">-</button>
			<input type="text" value="1">
			<button onclick="add(this)">+</button>
		</p>
		<p>
			<button onclick="minus(this)">-</button>
			<input type="text" value="1">
			<button onclick="add(this)">+</button>
		</p>
		<script>
			// this必须加，就是btn，只有通过btn才能找到对应input
			function minus(btn){
				// 通过btn获取input
				var input = btn.nextElementSibling;
				input.value = input.value*1-1;
			}
			// 单击加让input值+1，单击减，谁让input值减1
			function add(btn){
				// 通过btn获取到input
				var input = btn.previousElementSibling;
				// 重新设置input的值为 原来input值*1转换为数字 + 1
				input.value = input.value*1+1;
			}
		</script>
	</body>
</html>

三：属性修改

getAttribute获取属性
setAttribute 设置属性
removeAttribute 移除属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>属性修改</h1>
		<img src="images/pic1.png" alt="一张好图"><br/>
		<button onclick="changeImg()">修改图片</button>
		<script>
			function changeImg(){
				// 获取图片
				var img = document.querySelector("img");
				// 获取图片的src属性
				console.log(img.getAttribute("src"))
				// 修改图片的src属性
				img.setAttribute("src",'./images/pic2.png');
				// 删除alt属性
				img.removeAttribute("alt");
			}
			
		</script>
	</body>
</html>