Access an html node in javascript

Question

I have following html code.

<div id="polaroid">
    <figure>
        <img src="assets/polaroid01.jpg" width="200" height="200" alt="Red mushroom" />
        <figcaption>Pretty red mushroom</figcaption>
    </figure>
    <figure>
        <img src="assets/polaroid02.jpg" width="200" height="200" alt="Rainbow near Keswick" />
        <figcaption>Rainbow near Keswick</figcaption>
   </figure>
   <figure>
        <img src="assets/polaroid03.jpg" width="200" height="200" alt="An old tree" />
        <figcaption>Nice old tree</figcaption>
   </figure>
</div><!--end polaroid-->

In this i want to store all the image tags in an array. I know, I can access the figure tags like this.

var images= document.getElementById('gall').getElementsByTagName('figure');

But i don't know how to access the image tag. I tried this.

document.getElementById('gall').getElementsByTagName('figure').getElementsByTagName('img');

But this doesn't work.

it doesn't work because getElementsByTagName returns a node list, not a single node. — Jaromanda X
– Jaromanda X, Commented Sep 8, 2015 at 10:15

dfsq · Accepted Answer · 2015-09-08 10:14:56Z

2

In this case it's more convenient to use querySelectorAll:

var images = document.querySelectorAll('#gall figure img');

answered Sep 8, 2015 at 10:14

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AndrewL64 · Accepted Answer · 2015-09-08 10:16:45Z

0

You mean like this:

var images= document.getElementById('gall').getElementsByTagName('figure');
images.getElementsByTagName("img");

answered Sep 8, 2015 at 10:16

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

1 Comment

AndrewL64 Over a year ago

hmm. What errors are you getting in the console when you try the above Sheldon?

Deepak · Accepted Answer · 2015-09-08 10:29:02Z

0

This is possible if you use JQuery. Simply Do This.

Include Jquery Library (any version).
select image : $("#polaroid img").(any action);

Example:

put this above your code:

<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    
$(document).ready(function() { 

$("#polaroid img").css("border", "1px solid #000000");

});

</script>

answered Sep 8, 2015 at 10:29

Deepak

1781 gold badge2 silver badges14 bronze badges

Collectives™ on Stack Overflow

Access an html node in javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related