How to select a random child element from XML & show sub-child elements; using JS?

I want to take data from an XML file to display in an html page that is obtained by clicking a button. When the button is clicked, I'd like it to select a random child, and display the sub-child data. I made an XML file that looks like this:

<?xml version="1.0" encoding="UTF-8"?>
 <kdramas>
  <kdrama>
    <title lang="en">A Gentleman's Dignity</title>
    <genre>Comedy, Romance, Drama</genre>
    <year>2012</year>
    <episodes>20</episodes>
    <about>This drama will tell the story of four men in their forties as they go through love, breakup, success and failure. </about>
</kdrama>
<kdrama>
    <title lang="en">Boys Over Flowers</title>
    <genre>Comedy, Romance, Drama, School</genre>
    <year>2009</year>
    <episodes>25</episodes>
    <about>about text</about>
</kdrama>
<kdrama>
    <title lang="en">Goblin</title>
    <genre>Comedy, Romance, Melodrama, Supernatural</genre>
    <year>2016</year>
    <episodes>16</episodes>
    <about>about text</about>
</kdrama>

I am able to display the XML data when the button is clicked, but it shows all of the data (except for the titles). I have looked around to see if it is possible to select a random child then display its sub-child elements, but so far, I am not having any luck finding anything. The JS code I have to display the XML data is:

function getDrama(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("content").innerHTML =
    this.responseText;
    document.getElementById("content").style.display = "block";
  }
};
xhttp.open("GET", "https://raw.githubusercontent.com/npellow/npellow.github.io/master/kdramaList.xml", true);
xhttp.send();
}

Any ideas on how to do this? Or even just pointing me to a place where I can read on how to do it myself would be great?