获取dom对象(2)

<html>
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	<title>获取dom对象</title>
</head>
<body>
	<input name="btn1" type="button" value="mybtn1" />
	<input name="btn1" type="button" value="mybtn2" />
</body>
</html>

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

	/*
	getElementsByName(name);
	该方法可以获取到name相同的dom对象集合.
	因为name属性在文档中允许值相同,所以不管name的值在文档中是否唯一,返回的结果都是一个集合.
	我们需要通过下标获取单个的dom对象.
	例如:常见的单选框我都需要把name属性设置相同的值,让他们成为一组.
	*/

	/*
	获取name=btn1的dom
	写代码的时候需要注意这个接口是getElements,多了一个s,这也从命名上说明了返回值是多个.
	*/
	var btns = document.getElementsByName("btn1");

	//输出对象的length值,
	console.log(btns.length);//2
	//获取第一个dom对象
	var btn1 = btns[0];
	//输出btn1的value
	console.log(btn1.value);//mybtn1

	/*
	思考一下:
	既然是通过类似数组方式获取数据,那么getElementsByName返回的是Array吗?
	*/

	/*
	我们知道js的基础数据类型,是没有数组的.
	这六种类型分别是:
	number,string,boolean,object,function,undefined
	可能大家还能想到null,Array,Date,RegExp等,但是这都不是js的基础数据类型.

	那怎么验证这六种数据格式呢,其实也很简单.
	直接使用typeof运算符就可以得到,注意哦typeof只是一个一元运算符,不是函数.
	*/

	console.log(typeof 1);//number
	console.log(typeof "1");//string
	console.log(typeof true);//boolean
	console.log(typeof []);//object
	console.log(typeof {});//object
	console.log(typeof null);//object
	console.log(typeof function(){});//function
	console.log(typeof a);//undefined
	/*
	可以看出使用typeof运算符只能得到6个类型,这就是js的基础数据类型了.
	*/

	/*
	回到上面的问题,btns是什么类型呢?
	*/

	//使用typeof运算一下
	console.log(typeof btns);//object

	/*
	发现返回的结果也是object,但是数组typeof运算之后也是object.
	所以通过typeof并不能判断.
	那怎么办呢?
	是的天无绝人之路,我们发现js还有一个运算符instanceof.
	instanceof运算符与typeof运算符差不多,用来判定对象的数据类型.
	与typeof不同的是,instanceof能够明确地判定对象是否是某种类型的实例.
	*/

	//Array类型
	console.log([] instanceof Array);//true
	//btns呢
	console.log(btns instanceof Array);//false

	/*
	通过判定得知,btns并不是Array类型,只是一个类似array的对象集合.
	我也不知道这样描述对不对,感觉应该跟arguments很类似吧,是js中一种特有的对象,并且拥有length属性.
	提一下instanceof返回值的只有true/false.
	*/

	/*
	知识点:
	typeof运算符
	instanceof运算符
	其实instanceof还有更多更有意思用法.
	*/

	function testA(){};
	var t = new testA();
	console.log(t instanceof testA);// ?

	function testB(){};
	testB.prototype = new testA();
	var t2 = new testB();
	console.log(testB.prototype instanceof testA);// ?
	console.log(t2 instanceof testA);// ?
	console.log(t2.prototype instanceof testA);// ?
</script>

 

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