0

I'm trying to target all a tags with the 'data-caption' attribute.

I tried achieving this by doing:

first grabbing all the a tags

  let links = document.querySelectorAll('a');

and then attempting to collect their attributes

 links.getAttribute('data-caption');

I get an error when I try logging the attributes saying "getAttribute" is not a function.

I tried giving one a tag an id and then targeting that specific link by doing:

let link = document.getElementById('link').getAttribute('data-caption');

and when I logged my link variable, the attribute was shown. Which is what I need but for all of my links.

My plan was to first target all the links and grab their attributes and then create a loop to be able to manipulate those attributes / display them.

here's some of my html showing my a tags for reference

<a id="link" href="photos/01.jpg" data-caption="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
     <img src="photos/thumbnails/01.jpg" alt="Hay Bales">
</a>

<a href="photos/02.jpg" data-caption="The lake was so calm today. We had a great view of the snow on the mountains from here.">
     <img src="photos/thumbnails/02.jpg" alt="Lake">
</a>

<a href="photos/03.jpg" data-caption="I hiked to the top of the mountain and got this picture of the canyon and trees below.">
    <img src="photos/thumbnails/03.jpg" alt="Canyon">
</a>

if anyone can please help / point me in the right direction, thank you!!!!

karinapichardo
  • 67
  • 2
  • 10
  • 2
    `document.querySelectorAll("a[data-caption]")` - will get all anchor tags with a data-caption attribute. It returns an array of the elements, so you'd loop over it and use getAttribute to read the value on each entry. – Luke Briggs Jul 20 '21 at 17:05
  • 1
    thank you, I got it ! this answers my question, thanks a lot! @LukeBriggs – karinapichardo Jul 20 '21 at 17:12

1 Answers1

0

querySelectorAll returns a NodeList, unlike querySelector which returns the first element matching the selector. To get all anchor elements with the data-caption attribute, you have to iterate through it.

let links = [...document.querySelectorAll('a')].filter(e => e.hasAttribute('data-caption'))
console.log(links);
<a id="link" href="photos/01.jpg" data-caption="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
     <img src="photos/thumbnails/01.jpg" alt="Hay Bales">
</a>

<a href="photos/02.jpg" data-caption="The lake was so calm today. We had a great view of the snow on the mountains from here.">
     <img src="photos/thumbnails/02.jpg" alt="Lake">
</a>

<a href="photos/03.jpg" data-caption="I hiked to the top of the mountain and got this picture of the canyon and trees below.">
    <img src="photos/thumbnails/03.jpg" alt="Canyon">
</a>

You can avoid having to iterate through the list by simply using the a[data-caption] selector that selects all anchor tags with the data-caption attribute:

let links = document.querySelectorAll('a[data-caption]');
console.log(links);
<a id="link" href="photos/01.jpg" data-caption="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
     <img src="photos/thumbnails/01.jpg" alt="Hay Bales">
</a>

<a href="photos/02.jpg" data-caption="The lake was so calm today. We had a great view of the snow on the mountains from here.">
     <img src="photos/thumbnails/02.jpg" alt="Lake">
</a>

<a href="photos/03.jpg" data-caption="I hiked to the top of the mountain and got this picture of the canyon and trees below.">
    <img src="photos/thumbnails/03.jpg" alt="Canyon">
</a>
Spectric
  • 30,714
  • 6
  • 20
  • 43