欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js document

程序员文章站 2022-03-19 09:48:33
...
		document对象学习:
			1、document对象的概念
				浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存的HTML文档的所有信息。
			2、使用document
				获取HTML元素对象
					直接获取方式:
						通过id
						通过name属性值
						通过标签名
						通过class属性值
					间接获取方式:
						父子关系
						子父关系
						兄弟关系
					//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);
							
						}

用户名:

唱歌 跳舞 睡觉 打游戏
间接获取方式学习: