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

获取dom对象(3)

2024-07-09 23:10:49   223人阅读

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

 


联系
我们