js中的document对象的基本使用(一)

js中的document对象的基本使用(一)

<html>
	<head>
		<title>js的document对象学习()</title>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
			//document对象获取元素
				//直接方式
				//id方式
				function testGetEleById(){
					var inp=window.document.getElementById("uname");
					alert(inp);
				}
				
				//name方式
				function testGetEleByName(){
					var favs=document.getElementsByName("fav");
					alert(favs.length);
				}
				
				//标签名方式
				function testGetEleByTagName(){
					var inps=document.getElementsByTagName("input");
					alert(inps.length);
				}
				
				//class属性方式
				function testGetEleByClassName(){
					var inps=document.getElementsByClassName("common");
					alert(inps.length);
				}
				
				//间接获取方式
					//父子关系
					function testParent(){
						//获取父级对象元素
						var showdiv=document.getElementById("showdiv");
						//获取所有的子元素对象数组
						var childs=showdiv.childNodes;
						alert(childs.length);
//						alert(childs);
					}
					//子父关系
					function testChild(){
						//获取子对象元素
						var inp=document.getElementById("inp");
						var div=inp.parentNode;
						alert(div);
					}
					//兄弟关系
					function testBrother(){
						//兄获取弟
						var inp=document.getElementById("inp");
						var preEle=inp.previousSibling;//弟获取兄
						var nextEle=inp.nextSibling;//兄获取弟
						alert(preEle+"::::"+nextEle);
					}
					
		</script>
		<style type="text/css">
			.common{
			}
			#showdiv{
				border: solid 2px orange;
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<h3>js的document对象学习()</h3>
		直接获取方式:<br />
		<input type="button" name="" id="" value="获取html对象元素--id" onclick="testGetEleById();"/>
		<input type="button" name="" id="" value="获取html元素对象--name" onclick="testGetEleByName();"/>
		<input type="button" name="" id="" value="获取html元素对象--input" onclick="testGetEleByTagName();"/>
		<input type="button" name="" id="" value="获取html元素对象--class" onclick="testGetEleByClassName();"/>
		<hr />
			用户名:<input type="text" name="uname" id="uname" value="" /><br /><br />
			<input type="checkbox" name="fav" id="fav" value="" class="common"/>唱歌
			<input type="checkbox" name="fav" id="fav" value="" class="common"/>跳舞
			<input type="checkbox" name="fav" id="fav" value="" />打游戏	
			<input type="checkbox" name="fav" id="fav" value="" />睡觉
		<hr />
		间接获取方式:<br />
		<input type="button" name="" id="" value="父子关系" onclick="testParent();"/>
		<input type="button" name="" id="" value="子父关系" onclick="testChild();"/>
		<input type="button" name="" id="" value="兄弟关系" onclick="testBrother();"/>
		<hr />
		<div id="showdiv"><input type="" name="" id="" value="" /><input type="" name="" id="inp" value="" /><input type="" name="" id="" value="" /><input type="" name="" id="" value="" /><input type="" name="" id="" value="" />
		</div>
	</body>
</html>
<html>
	<head>
		<title>js的document对象操作html元素属性</title>
		<meta charset="UTF-8"/>
		<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.abc);//不能这样获取
				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"));//只能拿到value的默认值
				
			}
		</script>
	</head>
	<body>
		<h3>js的document对象操作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中的document对象的基本使用(一))