HTML5 js如何获取所有相同ID或class的元素?
我错了,是class相同。。ID是不能相同的。。 展开
下面例子通过document.getElementsByClassName("class1")获取所有同一class的元素,使用for循环把取得的div元素的值存入数组arr中,完成的代码如下:
运行结果,打印数组如下:
扩展资料:
js或jQuery获取html元素的值的常用方法:
例如:<div id="aa">值</div>
js写法:
alert(document.getElementById('aa').innerHTML);
jQuery写法:
alert($('#aa').html());
说明如下:
innerHTML是取元素的内部html代码,此例中即div内部的所有html代码。
html()方法作用也是取dom节点的内部html内容,是jQuery中的函数方法。
JavaScript获取所有相同class的元素的方法:
var aDiv=document.getElementsByClassName("test"); //获取文档中class为“test”的所有元素
for (var i = 0;i<aDiv.length;i++) {
//遍历 aDiv的中所有元素并且将所有class为“test”的元素的字体颜色设置为“red”
aDiv[i].style.color="red";
};
具体实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{background:#ddd;}
div{
margin:10px auto;
width:200px;
height:100px;
text-align: center;
line-height: 90px;
}
.test{background: rgba(83,172,150,0.4);}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<script type="text/javascript">
var aDiv=document.getElementsByClassName("test");
for (var i = 0;i<aDiv.length;i++) {
aDiv[i].style.color="red";
};
</script>
</body>
</html>
效果:
for(var e in eles)
{
//这里可以循环出每个元素对象
}