Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > How to get all images in a div

Reply
Thread Tools

How to get all images in a div

 
 
john_woo
Guest
Posts: n/a
 
      12-20-2007
Hi,

if I can get the div object, I'm wondering how to get all the images
within this div. ex.

<div id="123" style="position: relative; width: 1690px; height:
239px;">
<img style="position: absolute; left: 0px; top: 0px; width: 1000px;
height: 239px;" src="/images/fragment?
&left=0&top=0&width=1000&height=239"/>
<img style="position: absolute; left: 1000px; top: 0px; width: 690px;
height: 239px;" src="/portal/fragment?
&left=1000&top=0&width=690&height=239"/>

<div id="aaa" .....>
<img.../>
</div>

I use firefox. I've tried:

var aDiv = document.getElementById("123");
var divimges = aDiv.getElementsByTagName('img');

but it returns all images in all div.

--
Thanks

John
 
Reply With Quote
 
 
 
 
David Mark
Guest
Posts: n/a
 
      12-20-2007
On Dec 20, 5:36 pm, john_woo <(E-Mail Removed)> wrote:
> Hi,
>
> if I can get the div object, I'm wondering how to get all the images
> within this div. ex.
>
> <div id="123" style="position: relative; width: 1690px; height:
> 239px;">
> <img style="position: absolute; left: 0px; top: 0px; width: 1000px;
> height: 239px;" src="/images/fragment?
> &left=0&top=0&width=1000&height=239"/>
> <img style="position: absolute; left: 1000px; top: 0px; width: 690px;
> height: 239px;" src="/portal/fragment?
> &left=1000&top=0&width=690&height=239"/>
>
> <div id="aaa" .....>
> <img.../>
> </div>
>
> I use firefox. I've tried:
>
> var aDiv = document.getElementById("123");
> var divimges = aDiv.getElementsByTagName('img');
>
> but it returns all images in all div.


You left off the closing tag for the "123" div.
 
Reply With Quote
 
 
 
 
john_woo
Guest
Posts: n/a
 
      12-21-2007
On Dec 20, 6:38 pm, David Mark <(E-Mail Removed)> wrote:
> On Dec 20, 5:36 pm, john_woo <(E-Mail Removed)> wrote:
>
>
>
> > Hi,

>
> > if I can get the div object, I'm wondering how to get all the images
> > within this div. ex.

>
> > <div id="123" style="position: relative; width: 1690px; height:
> > 239px;">
> > <img style="position: absolute; left: 0px; top: 0px; width: 1000px;
> > height: 239px;" src="/images/fragment?
> > &left=0&top=0&width=1000&height=239"/>
> > <img style="position: absolute; left: 1000px; top: 0px; width: 690px;
> > height: 239px;" src="/portal/fragment?
> > &left=1000&top=0&width=690&height=239"/>

>
> > <div id="aaa" .....>
> > <img.../>
> > </div>

>
> > I use firefox. I've tried:

>
> > var aDiv = document.getElementById("123");
> > var divimges = aDiv.getElementsByTagName('img');

>
> > but it returns all images in all div.

>
> You left off the closing tag for the "123" div.


Thanks for the reply, but the closing tag just missed when copying
from "view source" in tested web page.
Do you have detail example?
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      12-21-2007
On Dec 21, 12:18*pm, john_woo <(E-Mail Removed)> wrote:
> On Dec 20, 6:38 pm, David Mark <(E-Mail Removed)> wrote:
>
>
>
> > On Dec 20, 5:36 pm, john_woo <(E-Mail Removed)> wrote:

>
> > > Hi,

>
> > > if I can get the div object, I'm wondering how to get all the images
> > > within this div. ex.

>
> > > <div id="123" style="position: relative; width: 1690px; height:
> > > 239px;">
> > > <img style="position: absolute; left: 0px; top: 0px; width: 1000px;
> > > height: 239px;" src="/images/fragment?
> > > &left=0&top=0&width=1000&height=239"/>
> > > <img style="position: absolute; left: 1000px; top: 0px; width: 690px;
> > > height: 239px;" src="/portal/fragment?
> > > &left=1000&top=0&width=690&height=239"/>

>
> > > <div id="aaa" .....>
> > > <img.../>
> > > </div>

>
> > > I use firefox. I've tried:

>
> > > var aDiv = document.getElementById("123");
> > > var divimges = aDiv.getElementsByTagName('img');

>
> > > but it returns all images in all div.

>
> > You left off the closing tag for the "123" div.

>
> Thanks for the reply, but the closing tag just missed when copying
> from "view source" in tested web page.
> Do you have detail example?


<div id="d0">
<img src="">
<img src="">
</div>
<div id="1">
<img src="">
</div>
<script type="text/javascript">
var x = document.getElementById('d0');
alert(x.getElementsByTagName('img').length);
</script>

Shows 2, the number of img elements in div d0. There are 3 img
elements in the document.


--
Rob
 
Reply With Quote
 
john_woo
Guest
Posts: n/a
 
      12-21-2007
On Dec 21, 5:38 am, RobG <(E-Mail Removed)> wrote:
> On Dec 21, 12:18 pm, john_woo <(E-Mail Removed)> wrote:
>
>
>
> > On Dec 20, 6:38 pm, David Mark <(E-Mail Removed)> wrote:

>
> > > On Dec 20, 5:36 pm, john_woo <(E-Mail Removed)> wrote:

>
> > > > Hi,

>
> > > > if I can get the div object, I'm wondering how to get all the images
> > > > within this div. ex.

>
> > > > <div id="123" style="position: relative; width: 1690px; height:
> > > > 239px;">
> > > > <img style="position: absolute; left: 0px; top: 0px; width: 1000px;
> > > > height: 239px;" src="/images/fragment?
> > > > &left=0&top=0&width=1000&height=239"/>
> > > > <img style="position: absolute; left: 1000px; top: 0px; width: 690px;
> > > > height: 239px;" src="/portal/fragment?
> > > > &left=1000&top=0&width=690&height=239"/>

>
> > > > <div id="aaa" .....>
> > > > <img.../>
> > > > </div>

>
> > > > I use firefox. I've tried:

>
> > > > var aDiv = document.getElementById("123");
> > > > var divimges = aDiv.getElementsByTagName('img');

>
> > > > but it returns all images in all div.

>
> > > You left off the closing tag for the "123" div.

>
> > Thanks for the reply, but the closing tag just missed when copying
> > from "view source" in tested web page.
> > Do you have detail example?

>
> <div id="d0">
> <img src="">
> <img src="">
> </div>
> <div id="1">
> <img src="">
> </div>
> <script type="text/javascript">
> var x = document.getElementById('d0');
> alert(x.getElementsByTagName('img').length);
> </script>
>
> Shows 2, the number of img elements in div d0. There are 3 img
> elements in the document.
>
> --
> Rob


Thanks lots Rob, but how about if I just want one level down of nodes,
ex

<div id='aaa'>
<img />
<div id='bbb'>
<img />
</div>
<img />
<div/>

I want the return of x.getElementsByTagName('img').length = 2 not 3.

How can I get that?

John

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      12-21-2007
john_woo wrote:
> [...] but how about if I just want one level down of nodes,
> ex
>
> <div id='aaa'>
> <img />
> <div id='bbb'>
> <img />
> </div>
> <img />
> <div/>


The last line should be

</div>

> I want the return of x.getElementsByTagName('img').length = 2 not 3.
>
> How can I get that?


You can *not* get that without successfully redefining gEBTN() or `length'.

However, with XPath it is easily possible to retrieve the number of child
elements of a certain element type:

/*
* yields 2 if `x' is a reference to the element object
* that represents <div id='aaa'>...</div> in the DOM
*/
document.evaluate('img', x, null, 7, null).snapshotLength

http://developer.mozilla.org/en/docs..._in_JavaScript

Without XPath, you will have to iterate through the collection of child
nodes of `x' and test each node:

var count = 0;

for (var i = 0, len = (x.childNodes && x.childNodes.length);
i < len; i++)
{
if (/\s*img\s*/i.test(x.childNodes[i].tagName)) count++;
}

count

http://developer.mozilla.org/en/docs...ent.childNodes
http://developer.mozilla.org/en/docs...Objects:RegExp
http://developer.mozilla.org/en/docs...lement.tagName


Please trim your quotes, especially please do not quote signatures unless
you refer to them directly.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$(E-Mail Removed)>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
Creating a CSS class to use in DIV to affect all contents of the DIV??? Some One HTML 5 08-09-2003 03:12 PM



Advertisments