首页 > 代码库 > 获取dom对象(3)
获取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="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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。