js如何在指定的div内使用getElementsByTagName获取元素

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js如何在指定的div内使用getElementsByTagName获取元素相关的知识，希望对你有一定的参考价值。

如下面的代码所示：
<div id="gallery">
<img src="pics/0.jpg" border="0" class="picsSliding"/>
<img src="pics/1.jpg" border="0" class="picsSliding"/>
<img src="pics/2.jpg" border="0" class="picsSliding"/>
</div>
<div id="picShow">
<img src="pics/2.jpg" border="0" height="460px" id="picShowing"/>
</div>
我在使用getElementsByTagName(“img”)的时候只想get到gallery里面的那三个元素，不要get到页面的其它img元素，要怎么写？
拒绝使用“先get到所有然后通过数组下标过滤掉最后一个元素”的方法哈，这样我的页面以后但凡哪里增加了个img又要再次过滤相关下标，非常不好。
应该会有朋友说写个getElementsByClassName的函数，除此之外有没有更好的方法，如果没有的话请留下一个队ie和ff等主流浏览器比较通用的该函数吧。谢谢。

在指定的div内使用getElementsByTagName获取元素的主要代码为：

getElementById(div_id).getElementsByTagName(tag_name);

示例如下：

1、html结构

<div id="test">
id=test: <span>Glen</span><span>Tane</span><span>John</span><span>Ralph</span>
</div>
<div id="test1">
id=test0: <span>Glen1</span><span>Tane1</span><span>John1</span><span>Ralph1</span>
</div>
<input type='button' value='获取id为test的div下的span' onClick="fun()"/>

2、javascript代码

function fun()
obj = document.getElementById("test").getElementsByTagName("span");
str= [];
for(i=0;i<obj.length;i++)
str.push(obj[i].innerHTML);

alert(str);

3、效果演示

 参考技术A document.getElementById('gallery').getElementsByTagName('img');追问

真可以这样么。。。我试过，发现好像失败了。我再试试。

追答<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<!-- <script type="text/javascript" src="../jquery-1.8.0.min.js"></script> -->
<script type="text/javascript">
var get = function ()
    
    var imgs = document.getElementById ('gallery').getElementsByTagName ('img');
    for ( var i = 0; i < imgs.length; i++)
    
    alert (imgs[i].src);
    
    
    window.onload = function ()
    
    get ();
    
</script>
</head>
<body>
<div id="gallery">
<img src="pics/0.jpg" border="0" class="picsSliding" /> <img
src="pics/1.jpg" border="0" class="picsSliding" /> <img
src="pics/2.jpg" border="0" class="picsSliding" />
</div>
<div id="picShow">
<img src="pics/2.jpg" border="0" height="460px" id="picShowing" />
</div>
</body>
</html>

本回答被提问者采纳

如果将div的可拖动范围限定在指定元素内

如果将div的可拖动范围限定在指定元素内:
拖动效果大家可能比较熟悉，但是通常会对拖动范围进行一下限定，通过一个实例代码介绍一下如何将一个div的拖动限定在一个指定元素范围内，代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
#box{
  width:400px;
  height:300px;
  background-color:red;
  margin:0px auto;
  position:relative;
}
#drag{
  width:50px;
  height:50px;
  background:green;
  position:absolute;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var odrag=document.getElementById("drag");
  var flag=false;
  var x,y;
  var ol,ot;
  odrag.onmousedown=function(ev){
    var ev=window.event||ev;
    flag=true;
    x=ev.clientX;
    y=ev.clientY;
    ol=odrag.offsetLeft;
    ot=odrag.offsetTop;
  }
  document.onmousemove=function(ev){
    if(flag==false) return;
    var ev=window.event||ev;
    var _x,_y;
    _x=ev.clientX-x+ol;
    _y=ev.clientY-y+ot;
    if(_x<0) _x=0;
    if(_y<0) _y=0;
    if(_x>obox.offsetWidth-odrag.offsetWidth) _x=obox.offsetWidth-odrag.offsetWidth;
    if(_y>obox.offsetHeight-odrag.offsetHeight) _y=obox.offsetHeight-odrag.offsetHeight;
         
     odrag.style.left=_x+"px";
     odrag.style.top=_y+"px";
  }
  document.onmouseup=function(){flag=false;}
}
</script> 
</head> 
<body> 
<div id="box">
  <div id="drag"></div>
</div>
</body> 
</html>

以上代码实现了我们的要求，可以将指定的绿色的div的拖动范围限定在红色div之内，下面介绍一下它的实现过程。
一.代码注释:
1.window.onload=function(){}，文档内容完全加载完毕再去执行函数中的代码。
2.var obox=document.getElementById("box")，获取id属性值为box元素对象。
3.var odrag=document.getElementById("drag")，获取id属性会为drag的元素对象。
4.var flag=false，声明一个变量flag并赋初值为false，它用来标识是否可以拖动，为false不可拖动，为true可以拖动。
5.var x,y，声明两个变量，用来存储鼠标按下时鼠标指针在浏览器客户区的坐标。
6.var ol,ot，声明两个变量，用来存储绿色div距离红色div距离。
7.odrag.onmousedown=function(ev){}，为绿色div注册onmousedown事件处理函数，ev是事件对象。
8.var ev=window.event||ev，事件对象的兼容性处理。
9.flag=true，设置为true，也就是说当鼠标在绿色div中按下时候才可以进行拖动。
10.x=ev.clientX，获取鼠标按下时，鼠标指针距离浏览器客户区左端的距离。
11.y=ev.clientY,获取鼠标按下时，鼠标指针距离浏览器客户区顶端的距离。
12.ol=odrag.offsetLeft，获取鼠标按下时，绿色div的左边缘距离红色div左侧的距离。
13.ot=odrag.offsetTop，获取鼠标按下时，绿色div的上边缘距离红色div上侧的距离。
14.document.onmousemove=function(ev){}，为document注册onmousemove事件处理函数，很多朋友可能因为为什么要将其注册在document上而不是odrag，这是为了防止当鼠标拖动过程中，鼠标指针移出odrag导致拖动无效现象。
15.if(flag==false) return，如果flag值为false，这直接跳出。
16.var ev=window.event||ev，事件对象的兼容性处理。
17.var _x,_y,声明两个局部变量，用来存储绿色div的left和top属性值。
18._x=ev.clientX-x+ol，获取拖动过程中，left属性值，一个数学问题。
19._y=ev.clientY-y+ot，获取拖动过程中，top属性值，一个数学问题。
20.if(_x<0) _x=0，防止超出左边缘。
21.if(_y<0) _y=0，防止超出上边缘。
22.if(_x>obox.offsetWidth-odrag.offsetWidth) _x=obox.offsetWidth-odrag.offsetWidth，防止超出右边缘。
23.if(_y>obox.offsetHeight-odrag.offsetHeight) _y=obox.offsetHeight-odrag.offsetHeight，防止超出下边缘。
24.odrag.style.left=_x+"px"，odrag.style.top=_y+"px"设置绿色div的left和top值。
25.document.onmouseup=function(){flag=false;}，当鼠标松开时，将flag设置为false。
二.相关阅读:
1.onmousedown事件可以参阅javascript的onmousedown事件一章节。 
2.var ev=window.event||ev可以参阅var ev=window.event||ev的作用是什么一章节。 
3.clientX可以参阅javascript的clientX事件属性一章节。 
4.offsetLeft可以参阅scrollTop、offsetHeight和offsetTop等属性用法详解一章节。
5.事件冒泡可以参阅javascript事件冒泡简单介绍一章节。 
6.onmousemove事件可以参阅javascript的onmousemove事件一章节。 
7.onmouseup事件可以参阅javascript的onmouseup事件一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11818

更多内容可以参阅:http://www.softwhy.com/javascript/

以上是关于js如何在指定的div内使用getElementsByTagName获取元素的主要内容，如果未能解决你的问题，请参考以下文章

如何让jquery动画效果在屏幕滚动到指定位置才执行

HTML5 js如何获取所有相同ID或class的元素？

如何让js控制的div显示指定的内容

js怎么让指定的div显示指定文字？

强烈求助！！JS 动态循环创建DIV

js 如何获取class的元素