How to get all images in a div

[john_woo]

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.

 

[David Mark]

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.

 

[john_woo]

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?

 

[RobG]

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.

 

[john_woo]

<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.

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

 

[Thomas 'PointedEars' Lahn]

[...] 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

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/Introduction_to_using_XPath_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.tagName)) count++;
}

count

http://developer.mozilla.org/en/docs/DOM:element.childNodes
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:RegExp
http://developer.mozilla.org/en/docs/DOM:element.tagName


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


PointedEars