<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对象(3)
时间： 2024-08-06 20:00:09