乌徒帮技术范技术中心Javascript › javascript获取多个相同ID的元素

javascript获取多个相同ID的元素

分类:Javascript

在javascript中默认getElementById(idName)获取的是拥有idName为id的元素的第一个,即$('#idName')[0],然而如果一个文档中一不小心有了多个div id="mytest"时该怎么办呢?

在一个网页中我们强调,在使用id属性时一定要有语义,id值能反应出元素的作用和意思,整个文档中id值不能重复,否则脚本抓取不到。确实是这样,无论是javascript的getElementById还是用jquery,都无法完成抓取多个有相同id值的元素。

不过我们并不是没有办法,否子戈轻而易举的将问题解决,但是要警告开发者的是,这种方法必然占用大量内存,不到万不得已不要用,就算要用,也要根据文档内的情况较少内存消耗。

解决该问题的方法是使用getElementsByTagName,方法很简单,如下:

var $elements = document.getElementsByTagName(tagName);
for($i = 0;$i < $elements.length;$i ++)if($elements[$i].id == idName)$elements[$i].style.display = 'none';

如果你要用在一个函数中,并返回这些值,可以声明一个数组保存它们

var $elements = document.getElementsByTagName(tagName);
var $results = new Array();
for($i = 0;$i < $elements.length;$i ++)if($elements[$i].id == idName)$results[$results.length] = $elements[$i];
return $results;

这时你就可以使用这些返回值了,例如你要使用第二个mytest,就可以用$results[1]来引用该元素了。

你可能已经注意到,程序只是用了一个for循环来比较获取的值,我们在比较id属性时,也可以使用getAttribute('id'),这就有点像jquery中的attr()。

填写个人信息,赶快回复吧!