How to get all images in a div

Discussion in 'Javascript' started by john_woo, Dec 20, 2007.

  1. john_woo

    john_woo Guest

    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
    john_woo, Dec 20, 2007
    #1
    1. Advertising

  2. john_woo

    David Mark Guest

    On Dec 20, 5:36 pm, john_woo <> 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.
    David Mark, Dec 20, 2007
    #2
    1. Advertising

  3. john_woo

    john_woo Guest

    On Dec 20, 6:38 pm, David Mark <> wrote:
    > On Dec 20, 5:36 pm, john_woo <> 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?
    john_woo, Dec 21, 2007
    #3
  4. john_woo

    RobG Guest

    On Dec 21, 12:18 pm, john_woo <> wrote:
    > On Dec 20, 6:38 pm, David Mark <> wrote:
    >
    >
    >
    > > On Dec 20, 5:36 pm, john_woo <> 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
    RobG, Dec 21, 2007
    #4
  5. john_woo

    john_woo Guest

    On Dec 21, 5:38 am, RobG <> wrote:
    > On Dec 21, 12:18 pm, john_woo <> wrote:
    >
    >
    >
    > > On Dec 20, 6:38 pm, David Mark <> wrote:

    >
    > > > On Dec 20, 5:36 pm, john_woo <> 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
    john_woo, Dec 21, 2007
    #5
  6. 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/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
    --
    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$>
    Thomas 'PointedEars' Lahn, Dec 21, 2007
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Some One
    Replies:
    5
    Views:
    795
    Toby A Inkster
    Aug 9, 2003
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    718
  3. Replies:
    2
    Views:
    1,240
    Adrienne
    Feb 13, 2005
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    172
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    294
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page