Pulling link from HTML stored in array

Question

I'm trying to pull a link from the following html. There's lots of bits of HTML like this one in an array.

tweets[0] is:

var tweets = Array.from(document.querySelectorAll("[class ^= AdaptiveMedia-ph]"));
console.log(tweets);

<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
  <img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>

How do I go about actually pulling the link in "src" and the alt text from "alt" from the HTML text? Thanks in advance!

You mean the src and alt from the inner <img> tag?

Isac
– Isac

2018-06-07 12:54:29 +00:00
Commented Jun 7, 2018 at 12:54 — Isac
– Isac, Commented Jun 7, 2018 at 12:54
Why use the Array.from() ?? Can we remove this?

Gerardo BLANCO
– Gerardo BLANCO

2018-06-07 12:56:08 +00:00
Commented Jun 7, 2018 at 12:56 — Gerardo BLANCO
– Gerardo BLANCO, Commented Jun 7, 2018 at 12:56

mplungjan · Accepted Answer · 2018-06-07 12:55:11Z

2

Like this:

var tweets = document.querySelectorAll("[class ^= AdaptiveMedia-ph]");
for (var i=0;i<tweets.length;i++) {
  console.log("data-image-url",tweets[i].getAttribute("data-image-url"));
  var img = tweets[i].querySelector("img");
  console.log("image-url",img.src,"alt",img.alt);
  
}

<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
  <img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>

answered Jun 7, 2018 at 12:55

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

Comments

Krypt1 · Accepted Answer · 2018-06-07 12:58:13Z

1

Would be easier if you would select directly the img elements and then just .map() the results:

// Select img inside the cards
var tweets = Array.from(document.querySelectorAll("[class ^= AdaptiveMedia-ph] img"));

var imgData = tweets.map(e => ({src: e.src, alt: e.alt}));
console.log(imgData);

<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
  <img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>

answered Jun 7, 2018 at 12:58

Krypt1

1,0668 silver badges14 bronze badges

Collectives™ on Stack Overflow

Pulling link from HTML stored in array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related