首页 > 代码库 > 获取dom对象(2)

获取dom对象(2)

2024-07-09 21:43:53   224人阅读

<html><head>    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />    <title>获取dom对象</title></head><body>    <input name="btn1" type="button" value="http://www.mamicode.com/mybtn1" />    <input name="btn1" type="button" value="http://www.mamicode.com/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>

 


联系
我们