DOM进阶

最新推荐文章于 2021-07-06 17:30:22 发布

原创最新推荐文章于 2021-07-06 17:30:22 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dom #html #css #javascript

笔记专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨DOM操作，包括HTML属性的获取与设置，如使用getAttribute和setAttribute方法，以及CSS属性的处理，如获取和设置CSS属性值，并介绍了cssText属性的应用。

HTML属性操作（对象属性）

获取静态HTML中的属性值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload = function(){
			var oBtn = document.getElementById("btn");
			oBtn.onclick=function(){
				alert(oBtn.id);
			}

		}
	</script>
</head>
<body>
	<input id="btn" type="button" class="myBtn" value="获取"/>

</body>
</html>

动态获取DOM中的属性值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oInput=document.createElement("input");
			oInput.id="submit";
			oInput.type="button";
			oInput.value="提交";
			document.body.appendChild(oInput);

			oInput.onclick=function(){
				alert(oInput.id);
			};

		}
		

	</script>
</head>
<body>
	
</body>
</html>

获取文本框的值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				var oTxt=document.getElementById("txt");
				alert(oTxt.value);
			}
		}
	</script>
</head>
<body>
	<input type="text" id="txt">
	<input type="button" id="btn" value="获取">
	
</body>
</html>

获取单选框的值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			var oFruit=document.getElementsByName("fruit");
			oBtn.onclick=function(){
				
				for(var i=0;i<oFruit.length;i++){
					if(oFruit[i].checked)
					{
						alert(oFruit[i].value);
					}
				}
			};
		}
	</script>
</head>
<body>
	<div>
		<label><input type="radio" name="fruit" value="苹果" checked>苹果</label>
		<label><input type="radio" name="fruit" value="香蕉">香蕉</label>
		<label><input type="radio" name="fruit" value="西瓜">西瓜</label>
	</div>
	<input type="button" id="btn" value="获取">
</body>
</html>

获取复选框的值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			var oFruit=document.getElementsByName("fruit");
			var str="";
			oBtn.onclick=function(){
				
				for(var i=0;i<oFruit.length;i++){
					if(oFruit[i].checked)
					{
						str+=oFruit[i];
					}
				}
				alert(str);
			};
		}
	</script>
</head>
<body>
	<div>
		<label><input type="checkbox" name="fruit" value="苹果">苹果</label>
		<label><input type="checkbox" name="fruit" value="香蕉">香蕉</label>
		<label><input type="checkbox" name="fruit" value="西瓜">西瓜</label>
	</div>
	<input type="button" id="btn" value="获取">
</body>
</html>

获取下拉菜单的值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			var oSelect=document.getElementById("select");
			oBtn.onclick=function(){
				alert(oSelect.value);
			};
		}
	</script>
</head>
<body>
	<select id="select">
		<option value="江西">江西</option>
		<option value="重庆">重庆</option>
		<option value="浙江">浙江</option>
		<option value="福建">福建</option>
		<option value="云南">云南</option>
		
	</select>
	<input type="button" id="btn" value="获取">
</body>
</html>

设置HTML属性值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				oBtn.value="button";
			};
		}
	</script>
</head>
<body>
	<input type="button" id="btn" value="修改">
</body>
</html>

实现两张图片来回切换

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			var oPic=document.getElementById("pic");
			var flag=true;
			oBtn.onclick=function(){
				if(flag){
					oPic.src="img/baby2.jpg";
					flag=false;
				}else{
					oPic.src="img/baby1.jpg";
					flag=true;
				}
				
			};
		}
	</script>
</head>
<body>
	<input type="button" id="btn" value="修改">
	<img id="pic" src="img/baby1.jpg">
</body>
</html>

HTML属性操作

getAttribute()

在Javascript中，我们可以使用getAttribute()方法来获取元素的某个属性，下面两种获取属性的形式是等价的：

obj.getAttribute("attr");

obj.attr

这两种方法都可以用来获取静态HTML属性值以及动态DOM的属性值，但用户自定义属性只能通过getAttribute()来获取。

setAttribute()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				oBtn.setAttribute("value", "button");
			}
		}

	</script>
</head>
<body>
	<input type="button" id="btn" value="修改">
</body>
</html>

removeAttribute()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.main{color: red; font-weight: bold;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oP=document.getElementsByTagName("p");
			oP[0].onclick=function(){
				oP[0].removeAttribute("class");
			}
		}		
	</script>
</head>
<body>
	<p class="main">你偷走了我的影子，无论在哪里，我都会一直想你。</p>
</body>
</html>

hasAttribute()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.main{color: red; font-weight: bold;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oP=document.getElementsByTagName("p");
			if(oP[0].hasAttribute("class")){
				oP[0].onclick=function(){
					oP[0].removeAttribute("class");
				};
			}
		}		
	</script>
</head>
<body>
	<p class="main">你偷走了我的影子，无论在哪里，我都会一直想你。</p>
</body>
</html>

CSS操作属性

获取CSS属性值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			background-color: hotpink;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			var oBox=document.getElementById("box");

			oBtn.onclick=function(){
				alert(getComputedStyle(oBox).backgroundColor);
			};
		}
	</script>
	
</head>
<body>
	<input type="button" id="btn" value="获取颜色">
	<div id="box"></div>
</body>
</html>

设置CSS属性值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			background-color: hotpink;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			var oBox=document.getElementById("box");

			oBtn.onclick=function(){
				oBox.style.backgroundColor="lightskyblue";
			};
		}
	</script>
	
</head>
<body>
	<input type="button" id="btn" value="设置属性">
	<div id="box"></div>
</body>
</html>

cssText属性

用来同时设置多个CSS属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			background-color: hotpink;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			var oBox=document.getElementById("box");

			oBtn.onclick=function(){
				var txt=document.getElementById("txt").value;
				oBox.style.cssText=txt;
			};
		}
	</script>
	
</head>
<body>
	<input type="text" id="txt">
	<input type="button" id="btn" value="设置属性">
	<div id="box"></div>
</body>
</html>