JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slide">
     <h2 class="title">Image Title</h2>

    <p class="description">This b da first image.</p>
    <img src="http://lorempixel.com/400/200/">
</div>
<div class="slide">
     <h2 class="title">Image Title</h2>

    <p class="description">This b da second image.</p>
    <img src="http://lorempixel.com/400/200/">
</div>
<div class="slide">
     <h2 class="title">Image Title</h2>

    <p class="description">This b da third image.</p>
    <img src="http://lorempixel.com/400/200/">
</div>
<div class="slide">
     <h2 class="title">Image Title</h2>

    <p class="description">This b da fourth image.</p>
    <img src="http://lorempixel.com/400/200/">
</div>

JavaScript

var alldivs = document.getElementsByTagName("div");
var slides = [];
var details = [];

for (var i = 0; i < alldivs.length; i++) {
    if (alldivs[i].className.indexOf("slide") != -1) {
        slides.push(alldivs[i]);
    }
}

for (var i=0; i<slides.length; i++){
    var slide = slides[i];
    var titl = slide.getElementsByClassName("title")[0];
    var description = slide.getElementsByClassName("description")[0];
    var image = slide.getElementsByTagName("img")[0];
    alert(titl);
    details.push({
        "title": titl.innerHTML,
        "description": description.innerHTML,
        "image": image.src
    });
}
for (var i=0; i<details.length; i++) console.log(details[i].description);