码迷,mamicode.com
首页 > Web开发 > 详细

11-js操作元素

时间:2020-03-04 18:46:51      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:child   不可   button   用户   color   innertext   通用   onchange   代码   

js操作HTML的元素属性:

<html>
	<head>
		
		<title>js操作HTML的元素属性</title>
		<meta charset="UTF-8"/>
		<!--
			js操作HTML元素属性学习:
				获取元素对象
				操作元素属性
					获取:
						元素对象名.属性名//返回当前属性的属性值。----固有
						元素对象名.getAttribute("属性名");//返回自定义属性的值-----自定义
					修改
						元素对象名.属性名=属性值
						元素对象名.setAttribute("属性名","属性值");//修改自定义属性的值----自定义
					注意:
						尽量的不要去修改元素的id值和name属性值。
						使用自定义方式获取固有属性内容,value的值获取的是默认值,不能够获取到实时的用户数据。
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//声明函数---固有属性
				//获取属性值
				function testField(){
					//获取元素对象
					var inp=document.getElementById("uname");
					//获取元素属性值
					alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);	
				}
				//修改元素属性值
				function testField2(){
					//获取元素对象
						var inp=document.getElementById("uname");
					//修改元素属性
						inp.value="哈哈";
						inp.type="button";
				}
			
			//声明函数---自定义属性
				//获取
				function testOwnField(){
					//获取元素对象
						var inp=document.getElementById("uname");
					//获取自定义属性的值
						alert(inp.getAttribute("abc"));
				}
				//修改
				function testOwnField2(){
					//获取元素对象
					var inp=document.getElementById("uname");
					//修改自定义属性的值
					inp.setAttribute("abc","呵呵");
				}
			//使用自定义方式操作固有属性
				function testOper(){
					//获取元素对象
						var inp=document.getElementById("uname");
					//操作对象属性
						alert(inp.getAttribute("type"));
						alert(inp.getAttribute("value"));
				}
		</script>
	</head>
	<body>
		<h3>js操作HTML的元素属性</h3>
		<input type="button" name="" id="" value="测试获取元素属性--固有" onclick="testField()" />
		<input type="button" name="" id="" value="测试修改元素属性--固有" onclick="testField2()" />
		<input type="button" name="" id="" value="测试获取元素属性--自定义" onclick="testOwnField()" />
		<input type="button" name="" id="" value="测试修改元素属性--自定义" onclick="testOwnField2()" />
		<input type="button" name="" id="" value="测试操作元素自定义操作固有属性" onclick="testOper()" />
		<hr />
		用户名 : <input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
	</body>
</html>

  

js操作元素内容学习:

<html>
	<head>
		<title>js操作元素内容学习</title>
		<meta charset="UTF-8"/>
		<!--声明css-->
		<style type="text/css">
			#div01{
				width: 200px;
				height: 200px;
				border: solid 1px orange;
			}			
		</style>
		<!--
			操作元素内容学习:
				获取元素对象
					获取
						元素对象名.innerHTML//返回当前元素对象的所有内容,包括HTML标签
						元素对象名.innerHTML//返回当前元素对象的文本内容,不包括HTML标签
					修改
						元素对象名.innerHTML="新的值"//会将原有内容覆盖,并HTML标签会被解析
							元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
						元素对象名.innerText="新的值"//会将原有内容覆盖,但HTML标签不会被解析,会作为普通文本显示。		
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//获取元素内容
				function getContext(){
					//获取元素对象
						var div=document.getElementById("div01");
					//获取元素内容
						alert(div.innerHTML);
						alert(div.innerText);
				}
			//修改元素内容
				function updateContext(){
					//获取元素对象
						var div=document.getElementById("div01");
					//修改元素对象内容
						div.innerHTML="<b>你先上,皇军给你殿后,八嘎</b>";
				}
				
				function updateContext2(){
					//获取元素对象
						var div=document.getElementById("div01");
					//修改元素对象内容
						div.innerText="<b>你先上,皇军给你殿后,八嘎</b>";
				}
			
			
		</script>
	</head>
	<body>
		<h3>js操作元素内容学习</h3>
		<input type="button" name="" id="" value="测试获取元素内容---innerHTML&innerText"  onclick="getContext()"/>
		<input type="button" name="" id="" value="测试修改元素内容--innerHTML"  onclick="updateContext()"/>
		<input type="button" name="" id="" value="测试修改元素内容--innerText"  onclick="updateContext2()"/>
		<hr />
		<div id="div01">
			<b>皇军,前面有八路的干活。</b>
			<b>皇军,前面有八路的干活。</b>
			
		</div>
	</body>
</html>

  

js操作元素的样式:

<html>
	<head>
		<title>js操作元素的样式</title>
		<meta charset="UTF-8"/>
		<!--声明css-->
		<style type="text/css">
			#showdiv{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			
			.common{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			
			.common2{
				width: 200px;
				height: 200px;
				border: solid 1px;
				background-color: aqua;
			}
		</style>
		<!--
			js操作元素样式:
				获取元素对象
					通过style属性
						元素对象名.style.样式名="样式值"//添加或者修改
						元素对象名.style.样式名=""//删除样式
						注意:
							以上操作,操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。
					通过className
						元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式
						元素对象名.className=""//删除类样式。
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//js操作元素样式
				//js给元素操作样式---style
					function testOperCss(){
						//获取元素对象
							var showdiv=document.getElementById("showdiv");
						//添加元素样式
							showdiv.style.backgroundColor="#FFA500";
						//js修改元素样式
							showdiv.style.border="solid 2px red";
						//js删除样式
							showdiv.style.border="";
					}
				//js操作样式--className				
					function testOperCss2(){
						//获取元素对象
							var div01=document.getElementById("div01");
						//获取
							alert(div01.className);
						//添加或者修改
							div01.className="common2";
						//删除
							div01.className="";
												
					}	
		</script>
	</head>
	<body>
		<h3>js操作元素的样式</h3>
		<input type="button" name="" id="" value="测试操作元素样式--style" onclick="testOperCss()" />
		<input type="button" name="" id="" value="测试操作元素样式--className" onclick="testOperCss2()" />
		<hr />
		<div id="showdiv" style="border: solid 2px blue;">
			
		</div>
		<div id="div01" class="common">
			
		</div>
	</body>
</html>

 

js操作元素的文档结构一:

<html>
	<head>
		<title>js操作元素的文档结构</title>
		<meta charset="UTF-8"/>
		<!--
			js操作HTML文档结构:
				增加节点
				删除节点
				第一种方式:使用innerHTML
					div.innerHTML=div.innerHTML+"内容"//增加节点
					div.innerHTML=""//删除所有子节点
					父节点.removeChild(子节点对象)//删除指定的子节点。
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			function testAdd(){
				//获取元素对象
				var showdiv=document.getElementById("showdiv");
				//给div追加上传按钮
				showdiv.innerHTML=showdiv.innerHTML+
"<div><input type=‘file‘ value=‘‘ /><input type=‘button‘ value=‘删除‘ onclick=‘delInp(this)‘/></div>";
			}
			function delInp(btn){
				//获取父级div
				var showdiv=document.getElementById("showdiv");
				//获取要删除的子div
				var cdiv=btn.parentNode;
				//父div删除子div
				showdiv.removeChild(cdiv);
			}
			
		</script>
	</head>
	<body>
		<h3>js操作元素的文档结构</h3>
		<input type="button" name="" id="" value="继续上传" onclick="testAdd()"/>
		<hr />
		<div id="showdiv">
		</div>
	</body>
</html>

  

js操作元素的文档结构二:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js操作文档结构2</title>
		<!--
			js操作文档结构2:
				获取元素对象
					var obj=document.createElement("标签名");
					元素对象名.appendChild(obj);
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			function testOper2(){
				//获取元素对象
				var  showdiv=document.getElementById("showdiv");
				//创建input元素对象
				var inp=document.createElement("input");
				inp.type="file";
				//创建按钮元素对象
				var btn=document.createElement("input");
				btn.type="button";
				btn.value="删除";
				btn.onclick=function(){
					showdiv.removeChild(inp);
					showdiv.removeChild(btn);
					showdiv.removeChild(br);
				}
				//创建换行符
				var br=document.createElement("br");
				//将创建的元素对象存放到div中
				showdiv.appendChild(inp);
				showdiv.appendChild(btn);
				showdiv.appendChild(br);	
			}
		</script>
	</head>
	<body>
		<h3>js操作文档结构2</h3>
		<input type="button" name="" id="" value="继续上传" onclick="testOper2()"/>
		<hr />
		<div id="showdiv">
			
		</div>
	</body>
</html>

  

js操作form表单:

<html>
	<head>
		<title>js操作form表单</title>
		<meta charset="UTF-8"/>
		<!--
				js操作form:
					获取form表单对象
						使用id:var fm=document.getElementById("fm");
						使用name属性:var frm=document.frm;
					获取form下的所有表单元素对象集合
						fm.elements
					form表单的常用方法
						表单对象.submit();//提交表单数据。
					form的属性操作:
						表单对象名.action="新的值"//动态的改变数据的提交路径
						表单对象名.method="新的值"//动态的改变提交方式
				js表单元素的通用属性
					只读模式:
						readonly="readonly"//不可以更改,但是数据可以提交
					关闭模式:
						disabled="disabled"//不可以进行任何的操作,数据不会提交。
		-->
		<script type="text/javascript">
			//
			function testForm(){
				//获取form表对象
					var fm=document.getElementById("fm");
					//alert(fm);
				//使用form表单的name属性值来获取
					var frm=document.frm;
					//alert(frm===fm);
				//获取form表单元素对象集合
					//alert(fm.elements.length);
				//form表单的常用方法
					//fm.submit();很重要
					fm.reset();
				//form的属性操作
					fm.action="http://www.baidu.com/s";
			}
		</script>
	</head>
	<body>
		<h3>js操作form表单</h3>
		<input type="button" name="" id="" value="测试操作form" onclick="testForm()" />
		<hr />
		<form action="#" method="get" id="fm" name="frm">
		<b>用户名:</b><input type="text" name="uname" id="uname" value="" readonly="readonly"/><br /><br />
			密码: <input type="password" name="pwd" id="pwd" value=""  disabled="disabled"/><br /><br />
			<input type="submit" name="" id="" value="登录" />
		</form>
	</body>
</html>

  

js操作表单元素:

<html>
	<head>
		<title>操作表单元素</title>
		<meta charset="UTF-8"/>
		<!--
			js操作多选框、单选框
				被选中状态下在js中checked属性值为true,未选中状态为false;
			js操作下拉框:
				被选择的option对象在js中selected属性值为true,未选中为false
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//多选框操作
				function testCheckBox(){
					//获取所有的多选元素对象数组
						var favs=document.getElementsByName("fav");
					//遍历数组
						for(var i=0;i<favs.length;i++){
							if(favs[i].checked){
								alert(favs[i].value+":"+favs[i].checked);
							}
						}
				}
				//全选
				function testCheckBox2(){
					var favs=document.getElementsByName("fav");
					for(var i=0;i<favs.length;i++){
						favs[i].checked=true;
					}
				}
				//反选
				function testCheckBox3(){
					var favs=document.getElementsByName("fav");
					for(var i=0;i<favs.length;i++){
						favs[i].checked=!favs[i].checked;
					}
				}
			//操作下拉框
				function testSel(){
					//获取下拉框对象
						var sel=document.getElementById("address");
						//alert(sel.value);
					//获取option对象集合
					var os=sel.options;
					for(var i=0;i<os.length;i++){
						if(os[i].selected){
							
						alert(os[i].value+":"+os[i].text);
						}
					}
				}
				
				
				
		</script>
	</head>
	<body>
		<h3>操作表单元素</h3>
		<hr />
		<b>操作多选框</b><br /><br />
		<input type="checkbox" name="fav" id="fav" value="1" />远走高飞<br />
		<input type="checkbox" name="fav" id="fav" value="2" />当<br />
		<input type="checkbox" name="fav" id="fav" value="3" />李白<br />
		<input type="checkbox" name="fav" id="fav" value="4" />杜甫<br />
		<input type="checkbox" name="fav" id="fav" value="5" />see you again<br />
		<input type="checkbox" name="fav" id="fav" value="6" />fade<br /><br /><br />
		<input type="button" name="" id="" value="播放" onclick="testCheckBox()"/>
		<input type="button" name="" id="" value="全选" onclick="testCheckBox2()"/>
		<input type="button" name="" id="" value="反选" onclick="testCheckBox3()"/>
		<hr />
		<select name="" id="address" onchange="testSel()">
			<option value="0">--请选择--</option>
			<option value="1" >北京</option>
			<option value="2">上海</option>
			<option value="3">广州</option>
		</select>
		
		
		
	</body>
</html>

  

11-js操作元素

标签:child   不可   button   用户   color   innertext   通用   onchange   代码   

原文地址:https://www.cnblogs.com/wcyMiracle/p/12411368.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!