javascript中的document对象

javascript中的document对象

  1. document对象的概念
    浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存的HTML文档的所有信息。
  2. 使用document获取HTML元素对象
  • 直接获取方式:
    通过id
    通过name属性值
    通过标签名
    通过class属性值
  • 间接获取方式:
    父子关系
    子父关系
    兄弟关系
		<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>
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页