document对象的概念

浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。所有的dom操作都是操控dom对象里的信息对html文档进行改变

document的使用-获取HTML元素对象

  • 获取HTML元素对象-window可以省略
    • 直接获取方式：
      • 通过id-window.document.getElementById(id名);
      • 通过name属性值-document.getElementsByName(name名);
      • 通过标签名-document.getElementsByTagName(标签名);
      • 通过class属性值-document.getElementsByClassName(class名);
    • 间接获取方式：
      • 父子关系
        • 先获取父级元素对象，再通过父级对象获取子元素对象
        • var showdiv=document.getElementById(“showdiv”);
        • var childs=showdiv.childNodes;
      • 子父关系
        • 先获取子元素对象，再通过子元素对象获取父级元素对象
        • var inp=document.getElementById(“inp”);
        • var div=inp.parentNode;
      • 兄弟关系
        • var inp=document.getElementById(“inp”);
        • var preEle= inp.previousSibling;//弟获取兄
        • var nextEle=inp.nextSibling;//兄获取弟
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          60
          61
          62
          63
          64
          65
          66
          67
          68
          69
          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
          80
          81
          82
          83
          84
          85
          86
          87
          88
          89
          90
          91
          92
          <!DOCTYPE html>
          <html>
          	<head>
          		<meta charset="UTF-8">
          		<title>document对象学习</title>
          		<!--声明js代码域-->
          		<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);
          						}	
          						//标签名
          						function testGetEleByTagName(){
          							var inps=document.getElementsByTagName("input");
          							alert(inps);
          						}
          						//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);
          							}
          						//子父关系
          							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>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元素对象---TagName" onclick="testGetEleByTagName()" />
          		<input type="button" name="" id="" value="测试获取HTML元素对象---className" 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="" />
          			<input type="" name="" id="" value="" />
          		</div>	
          	</body>
          </html>