getElementById怎样获取相同id

cru1se 2011-09-26 06:09:27 
function getByClass(oParent, sClass)

{

	var aEle=oParent.getElementsByTagName('*');

	var aResult=[];

	var i=0;

	

	for(i=0;i<aEle.length;i++)

	{

		if(aEle[i].className==sClass)

		{

			aResult.push(aEle[i]);

		}

	}

	

	return aResult;

}



window.onload=function ()

{

	var oDiv=document.getElementById('div1');

	var aLi=getByClass(oDiv, 'miaov_box_head')[0].getElementsByTagName('li');

	var aBtn=getByClass(oDiv, 'miaov_box_foot')[0].getElementsByTagName('a');

	var oCaret=getByClass(oDiv, 'caret')[0];

	var aPos=[];

	var timer=null;

	var i=0;

	

	for(i=0;i<aLi.length;i++)

	{

		aLi[i].index=i;

		aPos[i]=aLi[i].offsetLeft;

	}

	

	for(i=0;i<aLi.length;i++)

	{

		aLi[i].style.position='absolute';

		aLi[i].style.left=aPos[i]+'px';

	}

	

	aBtn[0].onclick=function ()

	{

		var i=aLi.length-1;

		

		clearTimeout(timer);

		

		function next()

		{

			var obj=aLi[i];

			if(i>=aLi.length/2)

			{

				miaovStartMove(aLi[i], {left: 900}, MIAOV_MOVE_TYPE.FLEX);

				timer=setTimeout(next, 100);

				i--;

			}

			else

			{

				timer=setTimeout(next2, 150);

			}

		}

		

		function next2()

		{

			if(i>=0)

			{

				miaovStartMove(aLi[i], {left: aPos[i]}, MIAOV_MOVE_TYPE.FLEX);

				timer=setTimeout(next2, 100);

			}

			i--;

		}

		

		next();

		

		aBtn[1].className='';

		this.className='show';

		miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);

	};

	

	aBtn[1].onclick=function ()

	{

		var i=0;

		

		clearTimeout(timer);

		

		function next()

		{

			var obj=aLi[i];

			if(i<aLi.length/2)

			{

				miaovStartMove(aLi[i], {left: -200}, MIAOV_MOVE_TYPE.FLEX);

				timer=setTimeout(next, 100);

				i++;

			}

			else if(i==aLi.length/2)

			{

				timer=setTimeout(next2, 150);

			}

		}

		

		function next2()

		{

			if(i<aLi.length)

			{

				miaovStartMove(aLi[i], {left: aPos[i-aLi.length/2]}, MIAOV_MOVE_TYPE.FLEX);

				timer=setTimeout(next2, 100);

			}

			i++;

		}

		

		next();

		

		aBtn[0].className='';

		this.className='show';

		miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);

	};

};


为什么只能运行一个div1
...全文
703 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
daols 2011-09-26
  • 打赏
  • 举报
 回复 
<SCRIPT type="text/javascript">

function $ids(id,node){

	if (node==undefined || node==null || node=='') node=window.document;

	var x=[]; var y=node.getElementsByTagName('*');

	for (var i=0;i<y.length;i++){

		if (y[i].id==id) x.push(y[i]);

	}

return x;

}

</SCRIPT>



<div id="t">test1</div>

<div id="t">test2</div>

<div id="t">test3</div>

<div id="t">test4</div>



<SCRIPT type="text/javascript">

alert($ids('t')[0].innerHTML);

</SCRIPT>
cru1se 2011-09-26
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 uself 的回复:]

getElementsByTagName返回的是一个集合！你自己再遍历就可以找到了。
[/Quote]
我是新手不太懂··
jayrao5566 2011-09-26
  • 打赏
  • 举报
 回复 
document.getElementsByName("page") 来取那些div
杨哥儿 2011-09-26
  • 打赏
  • 举报
 回复
getElementsByTagName返回的是一个集合！你自己再遍历就可以找到了。
cru1se 2011-09-26
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 blue_lg 的回复:]

好吧，你这什么也没有！！！
实在不行，自己写个根据id搜寻多个node的function！！！

引用 3 楼 cru1se 的回复:
引用 2 楼 blue_lg 的回复:

id本来就是只能控制一个！
尝试用getElementsByTagName("")

帮我改一改··我改了一整天也不行··纠结死···
[/Quote]
如果用name怎样改?
峭沙 2011-09-26
  • 打赏
  • 举报
 回复
一个页面本来就不能用重复的id，虽然用了也不会报错。。
cru1se 2011-09-26
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 fanchuanzhidu 的回复:]

html本身就不允许你定义相同的id document.getElementById()也无法取得多个相同id的元素
[/Quote]
如果用name怎样改?
livetiancao 2011-09-26
  • 打赏
  • 举报
 回复
HTML中ID只允许使用一次吧获取的标签都是getElement没有s
cru1se 2011-09-26
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 fanchuanzhidu 的回复:]

html本身就不允许你定义相同的id document.getElementById()也无法取得多个相同id的元素
[/Quote]
我就是不会改啊··
豆虫 2011-09-26
  • 打赏
  • 举报
 回复
html本身就不允许你定义相同的id document.getElementById()也无法取得多个相同id的元素
cru1se 2011-09-26
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 blue_lg 的回复:]

好吧，你这什么也没有！！！
实在不行，自己写个根据id搜寻多个node的function！！！

引用 3 楼 cru1se 的回复:
引用 2 楼 blue_lg 的回复:

id本来就是只能控制一个！
尝试用getElementsByTagName("")

帮我改一改··我改了一整天也不行··纠结死···
[/Quote]


      <div id="div1" class="page">

        <div class="miaov_box">

          <div style="width:100%; height:5px; overflow:hidden;"></div>

          <ul class="miaov_box_head">

            <li><a href="http://js.alixixi.com"><img src="logo/01.png" alt=""/>蓝钻量贩式KTV</a></li>

            <li><a href="http://js.alixixi.com"><img src="logo/02.png" alt=""/>开心果量贩式KTV</a></li>

            <li><a href="http://js.alixixi.com"><img src="logo/03.png" alt=""/>时尚糖果KTV</a></li>

            <li><a href="http://www.alixixi.com"><img src="logo/04.png" alt=""/>回音点KTV</a></li>

            <li><a href="http://www.alixixi.com"><img src="logo/05.png" alt=""/>伯嘉乐量贩式KTV</a></li>

            <li><a href="http://www.alixixi.com"><img src="logo/06.png" alt=""/>滨苑大酒店</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/07.png" alt=""/>星河国际大酒店</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/08.png" alt=""/>海湾假日渔村</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/09.png" alt=""/>杭邦酒店</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/10.png" alt=""/>白石山大酒店</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/11.png" alt=""/>中旅假日旅行社</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/12.png" alt=""/>国际合作旅行社</a></li>

          </ul>

        </div>

        <div class="miaov_box_foot"> <span style="left: 424px;" class="caret"></span>

          <div class="line15"></div>

          <div style="width:141px; height:20px; background:url(images/ktvtext.png) no-repeat; margin-left:40px; overflow:hidden;"></div>

          <div class="line5"></div>

          <div style="width:40px; height:17px; overflow:hidden; margin-left:140px;">

            <a style="font-family:'宋体'; font-weight:bold; line-height:16px; display:block; width:15px; height:15px; float:left; background:#333; border:solid 1px #E0E0E0;" class="show"><</a>

            <a style="font-family:'宋体'; font-weight:bold; line-height:16px; display:block; width:15px; height:15px; float:right; background:#333; border:solid 1px #E0E0E0;">></a>

          </div>

          <div class="line5"></div>

          <div style="width:100px; height:20px; overflow:hidden; font-size:12px; color:#C90; line-height:20px; margin-left:80px; text-align:right;">娱乐休闲好去处</div>

          <div class="line5"></div>

          <div class="icomore"><a href="#">+ 更多</a></div>

        </div>

      </div>

    </div>

    <div class="line10"></div>

    <div class="hot_list">

      <div id="div1" class="page">

        <div class="miaov_box">

          <div style="width:100%; height:5px; overflow:hidden;"></div>

          <ul class="miaov_box_head">

            <li><a href="http://js.alixixi.com"><img src="logo/01.png" alt=""/>蓝钻量贩式KTV</a></li>

            <li><a href="http://js.alixixi.com"><img src="logo/02.png" alt=""/>开心果量贩式KTV</a></li>

            <li><a href="http://js.alixixi.com"><img src="logo/03.png" alt=""/>时尚糖果KTV</a></li>

            <li><a href="http://www.alixixi.com"><img src="logo/04.png" alt=""/>回音点KTV</a></li>

            <li><a href="http://www.alixixi.com"><img src="logo/05.png" alt=""/>伯嘉乐量贩式KTV</a></li>

            <li><a href="http://www.alixixi.com"><img src="logo/06.png" alt=""/>滨苑大酒店</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/07.png" alt=""/>星河国际大酒店</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/08.png" alt=""/>海湾假日渔村</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/09.png" alt=""/>杭邦酒店</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/10.png" alt=""/>白石山大酒店</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/11.png" alt=""/>中旅假日旅行社</a></li>

            <li><a href="http://www.alixixi.cn"><img src="logo/12.png" alt=""/>国际合作旅行社</a></li>

          </ul>

        </div>

        <div class="miaov_box_foot"> <span style="left: 424px;" class="caret"></span>
BLUE_LG 2011-09-26
  • 打赏
  • 举报
 回复
好吧，你这什么也没有！！！
实在不行，自己写个根据id搜寻多个node的function！！！

[Quote=引用 3 楼 cru1se 的回复:]
引用 2 楼 blue_lg 的回复:

id本来就是只能控制一个！
尝试用getElementsByTagName("")

帮我改一改··我改了一整天也不行··纠结死···
[/Quote]
cru1se 2011-09-26
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 blue_lg 的回复:]

id本来就是只能控制一个！
尝试用getElementsByTagName("")
[/Quote]
帮我改一改··我改了一整天也不行··纠结死···
BLUE_LG 2011-09-26
  • 打赏
  • 举报
 回复
id本来就是只能控制一个！
尝试用getElementsByTagName("")
cru1se 2011-09-26
  • 打赏
  • 举报
 回复
帮帮忙···
获取HTML DOM节点元素的方法的总结
令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）： 1. 通过顶层document节点获取： （1） document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。 如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看作是document.getElementById()
javascript学习笔记(十八) 获得页面中的元素代码
1.获取元素 getElementById()方法，通过元素的id获取元素，接受一个参数即要获取元素的id，如果不存在这个id返回 null 注意不要让表单元素的name和别的元素的id相同，IE8以下的IE浏览器用这个方法通过元素的name属性可以获得该元素 以下面元素为例
id =”myDiv”>这里是id为“myDiv”的div内容
var document.getElementById(“myDiv”); //”myDiv”区分大小写，取得
js回去另一个html元素ID,javascript获取多个相同ID的元素
在javascript中默认getElementById(idName)获取的是拥有idName为id的元素的第一个，即$('#idName')[0]，然而如果一个文档中一不小心有了多个div id="mytest"时该怎么办呢？在一个网页中我们强调，在使用id属性时一定要有语义，id值能反应出元素的作用和意思，整个文档中id值不能重复，否则脚本抓取不到。确实是这样，无论是javascript的g...
vue v-else中使用document.getElementById获取不到值的问题
然后我尝试，把含有id组件写在v-if中，这时可以获取到组件了，但是当v-else的组件显示出来以后，发现同一个位置，v-else页面控件对应的位置也能获取到这个id，于是我发现，：我把含有id的标签写在了v-else中，结果，通过document.getElementById获取不到组件，这个问题困扰了我两天，我经过反复排查，终于定位到了问题出现在v-if / v-else 判断属性中，vue v-else中使用document.getElementById获取不到值的问题。
页面中有相同id，DOM对节点的获取
当一个web页面中，有多个id相同的元素，DOM的根据id查询节点的操作是怎么进行的呢？ 首先，要明确的是id选择器规则上是不允许有相同的，要保证id是唯一的。如果是有共同属性的某类元素进行操作时，用class选择器。 其次，页面当中是可以存在多个相同id，页面能正常显示，且不会出现错误。 鉴于这个问题被面试官提及，虽然感觉工作上不会如此使用，但还是做了一下测试。 公共js代码：
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章