获取dom对象(3)

<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>获取dom对象</title>
</head>
<body>
	<input class="btn1" type="button" value="mybtn1" />
	<input class="btn1" type="button" value="mybtn2" />
	<img src="" alt="img1" />
	<img src="" alt="img2" />
	<div id="mydiv">
		<input class="btn2" type="button" value="mybtn3" />
		<input class="btn2" type="button" value="mybtn4" />
	</div>
</body>
</html>

<script type="text/javascript">
	//兼容ie浏览器测试
	var console = console || {};
	console.log = console.log || function(a){
		alert(a);
	}

	/*
	getElementsByTagName(tag);
	通过元素名获取到tag相同的dom对象集合.
	这个方法效率比较低,在实际开发中用的比较少,建议大家也根据实际情况使用.
	但是在我们使用框架获取dom的时候,不知不觉就用了这个方法,比如:jquery的$(".class").
	这个问题,后面再讲,我们先看一下这个方法的实例.
	*/

	//获取所有的input元素
	var input = document.getElementsByTagName("input");

	//我们知道文档中有四个input,输出length
	console.log(input.length);//4

	//如果我们要获取其中的某一个或几个input,就只能循环获取了
	//如:获取class=btn1的按钮
	for(var i = 0,len = input.length; i < len; i++){
		var dom = input[i];
		//获取dom的class,注意dom属性中的class,属性名叫className
		//有一点可以留意的是,dom属性中,一般包含多个英文单词的或者属性带_的,在js中命名格式都是驼峰式.
		var name = dom.className;
		if(name === "btn1"){
			console.log(dom.value);//mybtn1,mybtn2
		}
	}

	/*
	其实这个方法还有更高效的使用方法,因为每一个dom对象都有这个方法.
	如:
	需要获取到id=mydiv所有的input子元素,我们就不需要先获取全部的,然后再循环.
	直接先得到mydiv的dom,然后通过mydiv的getElementsByTagName方法获取input元素
	*/
	var mydiv = document.getElementById("mydiv");
	var input = mydiv.getElementsByTagName("input");

	//输出获取到的input
	for(var i = 0,len = input.length; i < len; i++){
		var dom = input[i];
		console.log(dom.value);//mybtn3,mybtn4
	}

	/*
	这个方法,还有一种用法,当传入特殊字符"*"的时候,将返回文档全部元素.
	这个功能,我们经常用来封装一些其他方式的获取dom方法.
	比如:
	使用jquery的时候,经常通过class获取dom,但是在DHTML中是没有这个方法的.
	*/

	//获取全部元素
	var all = document.getElementsByTagName("*");
	for(var i = 0,len = all.length; i < len; i++){
		var dom = all[i];
		console.log(dom.tagName);//HTML,HEAD,META,TITLE,BODY,INPUT ...
	}

	/*
	扩展知识点:
	js获取dom的三个基本方法就这样了,当然js还有很多其它的方式获取dom元素.
	比如:
	通过层级关系,firstChild/lastChild/previousSibling/nextSibling
	父子关系查找等.parentNode/children/childNodes

	当然了在最新的js版本中,又加入了两个新的获取dom方法,并且效率很高.
	他们分别是:
	document.querySelector();
	document.querySelectorAll();
	他们只适用 IE8+,chrome,firefox
	*/

</script>

 

你可能感兴趣的:(DOM对象)